How To Easily Use Flutter Date Picker [Detailed Example]

In this tutorial, we’ll learn how to properly use Flutter date picker to pick some specific date(day, month and year). We’ll understand it with the help of a practical Flutter code example for better understanding.

Introduction: Flutter Date Picker

As the name suggests, it’s used to pick date(day, month and year) in Flutter from a calendar. We’ll be implementing it inside the onPressed function of Flutter material button. You can use other buttons/widgets as well. We just need to trigger it so the calendar can appear on screen.

Let’s now understand its implementation using a practical Flutter example.

Implementing Flutter Date Picker (Step By Step)

Below steps will guide you on how to properly use Flutter date picker.

Step 1: Variable To Store Picked Date Value

First we’ve to create a variable of type date time so the picked date value can be stored inside it. See below:

DateTime? selectedDate;

Step 2: Show Date Picker Function

We’ve to specify the date picker function which comes from the Flutter SDK and calling it will show a calendar through which we can pick a date. Inside it, we’ve to provide an initial date so that specific date is automatically selected when the calendar is shown. We also need to specify a first date and last date to specify a range of dates to display in the calendar. See below code:

 onPressed: () async {

           final initialDate = DateTime.now();
           final newDate = await showDatePicker(
                 firstDate: DateTime(DateTime.now().year - 10),
                 lastDate: DateTime(DateTime.now().year + 10),
                      context: context,
                      initialDate: initialDate);
                  if (newDate == null) {
                    return;
                  }
                  setState(() {
                    selectedDate = newDate;
                    dateToDisplay =
                        '${selectedDate!.day} - ${selectedDate!.month} - ${selectedDate!.year}';
                  });
                },

We’ve also specified a code that if the user press the cancel button then return without executing other lines as the value is null.
We’ve created a string variable in which the selected day, month and year will be stored.
Also, use async function to pick date like shown above.

Step 3: Pick and Display a Specific Date

Let’s now test our app and see if we get the desired output or not. See below:

flutter date picker

pick date in flutter

pick date flutter

For demonstration, we’ve clicked our material button and in its onPressed function, the logic to pick and store date is implemented. We can see a calendar popup after we clicked the button. We’ve picked a specific date and after clicking the ok button, we can see the selected date on our screen. Reason is that we’ve used a Flutter text widget and inside it, we’ve specified the string variable which will store the selected date.

So this is how we can use Flutter date picker. Hope you’ve learned alot from this tutorial. Do feel free to share it with your friends.

Also, don’t hesitate to ask if you’ve any questions related to Flutter date picker. We’ll be very glad to answer all.

The complete source code of above implemented date picker is given in the below section.

Flutter Date Picker Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false, home: DatePickerScreen());
  }
}
class DatePickerScreen extends StatefulWidget {
  const DatePickerScreen({super.key});
  @override
  State<DatePickerScreen> createState() => _DatePickerScreenState();
}
class _DatePickerScreenState extends State<DatePickerScreen> {

  DateTime? selectedDate;
  String dateToDisplay = '00 - 00 - 0000';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              Padding(
                padding: EdgeInsets.only(bottom: 20),
                child: Text(
                  dateToDisplay,
                  style: TextStyle(color: Colors.blue, fontSize: 30),
                ),
              ),

              MaterialButton(
                onPressed: () async {
                  final initialDate = DateTime.now();
                  final newDate = await showDatePicker(
                      firstDate: DateTime(DateTime.now().year - 10),
                      lastDate: DateTime(DateTime.now().year + 10),
                      context: context,
                      initialDate: initialDate);
                  if (newDate == null) {
                    return;
                  }
                  setState(() {
                    selectedDate = newDate;
                    dateToDisplay =
                        '${selectedDate!.day} - ${selectedDate!.month} - ${selectedDate!.year}';
                  });
                },

                color: Colors.blue,
                textColor: Colors.white,
                child: Text('Pick Date'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

In conclusion, hope you now have a detailed understanding of how to use Flutter date picker. Your feedback will be well appreciated.

We’d be very glad to see you visit our other tutorials on Flutter app development. Thank you for reading this article.