• 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 DIALOG USING FLUTTER
      Flutter Date Picker Dialog

      DATE TIME PICKER DIALOG USING FLUTTER

      • Posted by Shivam Srivastava
      • Categories Developers, Flutter
      • Date March 17, 2020
      • Comments 0 comment
      Spread the love

      Introduction

      In this article, we will add Date and Time picker in flutter application without any plugin.

      Purpose of this article?

      In this tutorial, you’ll build a mobile app that includes a DateTime Picker Dialog 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 DateTime Picker Dialog in your flutter application.

      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 intl dependency in your project pubspec.yaml file.
      dependencies:
        flutter:
          sdk: flutter
        intl: <latest version>

      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:intl/intl.dart';

      Now we are ready for Coding the component.

      Show Date Picker Dialog.

       Future<void> _showDatePicker()async{
          final DateTime picked=await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime(2015, 8), lastDate: DateTime(2101));
          if(picked != null)
          {
          print(DateFormat("yyyy-MM-dd").format(picked));
          }
        }

      Using this code a simple calendar arises on a screen in a dialog box.

      Show Time Picker Dialog.

        Future<void> _showTimePicker()async{
          final TimeOfDay picked=await showTimePicker(context: context,initialTime: TimeOfDay(hour: 5,minute: 10));
          if(picked != null)
            {
            print(picked.format(context));
            }
        }

      Using this code a simple time chooser arises on a screen in a circle dialog box.

      Show Date and Time Picker Dialog.

      Future<void> _showDateTimePicker()async
        {
          final DateTime datePicked=await showDatePicker(context: context, initialDate: DateTime.now(), firstDate: DateTime(2015, 8), lastDate: DateTime(2101));
      
            if(datePicked!=null)
              {
                final TimeOfDay timePicked=await showTimePicker(context: context,initialTime: TimeOfDay(hour: TimeOfDay.now().hour,minute: TimeOfDay.now().minute));
                    if(timePicked !=null)
                      {
                     print("${ DateFormat("yyyy-MM-dd").format(datePicked)}  ${timePicked.format(context)}");  
                      }
              }
      
        }

      Using this code you first get a simple calendar for choosing a date then after you get a simple Time picker in circle dialog watch.

      Showdatepickerdialog | Date Time Picker Dialog Using Flutter

      You can find given example’s complete code on my GitHub repo click here.

      Bookmark(1)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter add datepicker, flutter date time picker, flutter showdatepicker, flutter showdatepicker example, flutter time picker example

      • Share:
      author avatar
      Shivam Srivastava

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

      Previous post

      Flare Animation With Flutter
      March 17, 2020

      Next post

      Detect Barcode using Firebase ML kit
      March 17, 2020

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      Flutter-Web-CORS-Error-SOLVED-Navoki.com
      [SOLVED] Flutter Web CORS Error
      4 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

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

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      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

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   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

      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

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

      Are you a member? Login now