• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Developers

      • Home
      • Blog
      • Developers
      • DATE TIME PICKER USING FLUTTER
      Date&TimePicker

      DATE TIME PICKER USING FLUTTER

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter
      • Date March 16, 2020
      • Comments 0 comment

      Introduction

      Using Flutter Date Time Picker Plugin you can add Date and Time picker in your flutter application.

      What do you learn here?

      In this tutorial, you’ll build a mobile app that includes a DateTime Picker using the Flutter SDK. Your app will:

      • Display Date and Time picker separately.
      • Display the selected data as outputs in Text Widgets.

      In this tutorial, we will focus on adding a Date_Time Picker in your flutter application and.

      Setup Flutter on your machine

      If you don’t have a flutter set up in your machine so you have to need to install it first. Click here to learn how to set up flutter on Windows and for Linux click here.

      Let’s Begin for the code.

      • Add flutter_datetime_picker and intl dependency in your project pubspec.yaml file.
      dependencies:
        flutter:
          sdk: flutter
        flutter_datetime_picker: <latest version>
        intl: <latest version>

      flutter_datetime_picker: This will show DateTime picker.
      intl: This dependency set format of choose selected date or time.

      Run flutter packages get command on terminal

      • Add the below code in your main.dart file for import dependency.
      import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
      import 'package:intl/intl.dart';

      Now we are ready for Coding the component.

      Date Picker component code.

      datePicker | DATE TIME PICKER USING FLUTTER
        String _selectedDate;
       Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(" ${_selectedDate??'Selected Date'}",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
                  RaisedButton(
                    onPressed: () {
                      DatePicker.showDatePicker(context,
                          showTitleActions: true,
                          minTime: DateTime(1980, 1, 1),
                          maxTime: DateTime(3000, 12, 31),
                          onConfirm: (date) {setState(() {
                            _selectedDate=DateFormat("yyyy-MM-dd").format(date);
                          });},
                          locale: LocaleType.en);},child: Text("Show Date picker"),
                  )
      
                ],
              )

      Time Picker component code.

      timePickers | DATE TIME PICKER USING FLUTTER
        String _selectedTime;
      Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text("${_selectedTime??'Selected Time'}",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
                  RaisedButton(
                    onPressed: () {
                      DatePicker.showTimePicker(context,
                          showTitleActions: true,
      
                          onConfirm: (time) {setState(() {
                            _selectedTime=DateFormat("HH-mm-ss").format(time);
                          });},
                          locale: LocaleType.en);},child: Text("Show Time picker"),
                  ),
      
                ],
              )

      DateTime Picker component code.

      dateTimePicker | DATE TIME PICKER USING FLUTTER
      String _selectedDateTime;
      Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text("${_selectedDateTime??"Selected Date and Time"}",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
                  RaisedButton(
                    onPressed: () {
                      DatePicker.showDateTimePicker(context,
                          showTitleActions: true,
                          minTime: DateTime(1980, 1, 1),
                          maxTime: DateTime(3000, 12, 31),
                          onConfirm: (dateTime) {setState(() {
                            _selectedDateTime=DateFormat("yyyy-MM-dd  HH-mm-ss").format(dateTime);
                          });},
                       locale: LocaleType.en);},child: Text("Show Date Time Picker"),
                  ),
      
                ],
              )

      Language Options

      In this library, you get various language options so that you can make it easy for worldwide use. For modifying the language of the component amend just update LocaleType property.

       locale: LocaleType.en

      You can choose date / time / date&time in below languages:

      • Arabic(ar)
      • Armenian(hy)
      • Azerbaijan(az)
      • Basque(eu)
      • Bengali(bn)
      • Bulgarian(bg)
      • Catalan(cat)
      • Chinese(zh)
      • Danish(da)
      • Dutch(nl)
      • English(en)
      • French(fr)
      • German(de)
      • Indonesian(id)
      • Italian(it)
      • Japanese(jp)
      • Kazakh(kk)
      • Korean(ko)
      • Persian(fa)
      • Polish (pl)
      • Portuguese(pt)
      • Russian(ru)
      • Spanish(es)
      • Thai(th)
      • Turkish(tr)
      • Vietnamese(vi)


      Get complete code on GitHub.

      Bookmark(1)

      Please login to bookmark

      Continue with Google
      Continue with Facebook
      0

      Tag:date and time picker in flutter github, flutter date picker, flutter datepicker widget, flutter datetimepicker, flutter showdatepicker, year picker in flutter

      • Share:
      Shivam Srivastava
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      WWDC 2020 cancel due to COVID-19
      March 16, 2020

      Next post

      Flare Animation With Flutter
      March 16, 2020

      You may also like

      whats-new-in-flutter-2.0.0
      Flutter 2 is here | What’s new in Flutter 2.0.0
      22 March, 2021
      Flutter Commands a Developer must know, Cheat Sheet
      14 Flutter Commands a Developer must know, Cheat Sheet
      28 January, 2021
      6 Things About HTTP Request in Dart For Beginners-min
      6 Things About HTTP Request in Dart For Beginners
      7 September, 2020

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • whats-new-in-flutter-2.0.0Flutter 2 is here | What’s new in Flutter 2.0.0
      • Flutter Commands a Developer must know, Cheat Sheet14 Flutter Commands a Developer must know, Cheat Sheet
      • 6 Things About HTTP Request in Dart For Beginners min | 6 Things About HTTP Request in Dart For Beginners6 Things About HTTP Request in Dart For Beginners

      Subscribe Now

       

      Social Connect

      Recent Courses

      Flutter App Development Course Online

      Flutter App Development Course Online

      Single and Multi Selection ListView in Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation and Variables

      Go Installation and Variables

      List in Dart Programming language

      List in Dart Programming language

      View All

      DON’T MISS A BEAT

      Be the first to know when our album is released on iTunes and Spotify

      We don’t spam! Read our privacy policy for more info.

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   [email protected]
      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google
      Continue with Facebook

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google
      Continue with Facebook

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now