Date Picker in Flutter without plugins

Have you ever want to take Date input in flutter. Don't worry, Flutter has widget for it.

watch it on youtube:

we need to have a stateful class because we tend to change the value of the date every time the user select it. And a DateTime variable to store the date value.

DateTime _dateTime;

initialize the _datetime

  @override
  void initState() {
    super.initState();
    _dateTime = DateTime.now();
  }

I used Column and then listtile to show the date in text format(string) and to choose date onTap() on Listtile()

Column(children: [
        ListTile(
          title: Text("Date: " + _dateTime.toString(),
              style: TextStyle(fontWeight: FontWeight.bold)),
          onTap: _pickTime,
        )
      ])

Now, all we need is to define _picktime(){}. As we need to pick date is a future , we will have to use async and await.

showDatePicker() is the widget which returns DateTime() selected and has 4 required fields

required BuildContext context,
required DateTime initialDate,
required DateTime firstDate,
required DateTime lastDate,

assign the returned value of showDatePicker to a variable.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );

  }

now using setstate() update the _datetime variable.

_pickTime() async {
    DateTime d = await showDatePicker(
      context: context,
      initialDate: _dateTime,
      firstDate: DateTime(DateTime.now().year - 5),
      lastDate: DateTime(DateTime.now().year + 5),


    );
    if (d != null) {
      setState(() {
        _dateTime = d;
      });
    }
 }

several optional values are there like
helpText, label displayed at the top of the dialog.
cancelText, label on the cancel button.
confirmText, label on the ok button.
which take string values

      cancelText: "CANCEL TEXT",
      helpText: "HELP TEXT",
      confirmText: "CONFIRM TEXT",

An optional initialEntryMode argument can be used to display the date picker in the DatePickerEntryMode.calendar (a calendar month grid) or DatePickerEntryMode.input (a text input field) mode. It defaults to DatePickerEntryMode.calendar and must be non-null.

initialEntryMode: DatePickerEntryMode.input,

An optional textDirection argument can be used to set the text direction (TextDirection.ltr or TextDirection.rtl) for the date picker

textDirection: TextDirection.rtl,

An optional initialDatePickerMode argument can be used to have the calendar date picker initially appear in the DatePickerMode.year or DatePickerMode.day mode. It defaults to DatePickerMode.day, and must be non-null.

initialDatePickerMode: DatePickerMode.day,

The builder parameter can be used to wrap the dialog widget to add inherited widgets like Theme.

 builder: (context, child) {
        return Theme(
            data: ThemeData(
                primarySwatch: Colors.purple,
                primaryColor: Colors.purple,
                accentColor: Colors.purpleAccent),
            child: child);
      },

An optional selectableDayPredicate function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate returns true for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true for initialDate.

selectableDayPredicate: (DateTime q) {
        return q.weekday == 6 || q.weekday == 7 ? false : true;
      },

you can play with codepen

Comments

[Pablo Discobar]

Wow, cool work! If you are interested in this topic, then look here dev.to/pablonax/flutter-templates-...

[Mitai]

you can show how selecting only the year on ios and android will work using inputdecorator instead of a text field and ValueListenableBuilder/ValueNotifier?))