How to Add DatePicker on Flutter?

DatePicker is a flutter material widget that displays a Material Design date picker in a dialog by utilizing flutter’s inbuilt function. We’ll use it to book movie tickets, rail tickets, and other things. You will learn how to use DatePicker in your project by following these steps in this blog:

The first step is to initialize a variable “selectedDate” of type DateTime which will hold the selected date.

DateTime selectedDate = DateTime.now();

Outside the Scaffold, create a function that will hold the value of the variable and will refresh the value depending on the date that you pick. Note that you will have to work on a Stateful widget in use setState function.

  _selectDate(BuildContext context) async {
    final DateTime selected = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2010),
      lastDate: DateTime(2025), 
    );
    if (selected != null && selected != selectedDate)
      setState(() {
        selectedDate = selected;
      });
  }

Next is to design the UI, in this example we will have an ElevatedButton widget to display DatePicker dialog.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Flutter Datepicker"),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          RaisedButton(
              onPressed: () {
                _selectDate(context);
              },
            child: Text("Choose Date"),
          ),
          Text("${selectedDate.day}/${selectedDate.month}/${selectedDate.year}")
        ],
      ),
    ),
  );
} 

In conclusion, you have a working DatePicker and the whole project will look like this:

import 'package:flutter/material.dart';
void main()
{
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Datepicker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}
 
class _MyHomePageState extends State<MyHomePage> {
String date = "";
DateTime selectedDate = DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Datepicker"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: () {
                  _selectDate(context);
                },
              child: Text("Choose Date"),
            ),
            Text("${selectedDate.day}/${selectedDate.month}/${selectedDate.year}")
          ],
        ),
      ),
    );
  }
 
  _selectDate(BuildContext context) async {
    final DateTime selected = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2010),
      lastDate: DateTime(2025), 
    );
    if (selected != null && selected != selectedDate)
      setState(() {
        selectedDate = selected;
      });
  }
}