DEV Community

loading...
Cover image for Date Picker in Flutter without plugins

Date Picker in Flutter without plugins

vasanthkumar
Waiting for Thanos to snap.....
Updated on ・2 min read

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

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;
Enter fullscreen mode Exit fullscreen mode

initialize the _datetime

  @override
  void initState() {
    super.initState();
    _dateTime = DateTime.now();
  }
Enter fullscreen mode Exit fullscreen mode

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,
        )
      ])
Enter fullscreen mode Exit fullscreen mode

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,
Enter fullscreen mode Exit fullscreen mode

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),


    );

  }
Enter fullscreen mode Exit fullscreen mode

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;
      });
    }
 }
Enter fullscreen mode Exit fullscreen mode

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",

Enter fullscreen mode Exit fullscreen mode

Alt 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,

Enter fullscreen mode Exit fullscreen mode

Alt Text

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

textDirection: TextDirection.rtl,
Enter fullscreen mode Exit fullscreen mode

Alt Text

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,
Enter fullscreen mode Exit fullscreen mode

Alt Text
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);
      },
Enter fullscreen mode Exit fullscreen mode

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;
      },
Enter fullscreen mode Exit fullscreen mode

you can play with codepen

Discussion (1)

Collapse
pablonax profile image
Pablo Discobar

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