Spinner Date Picker

Illustration

Allow quick setting of dates by choosing what date options you would like to set

enum DateOptions { d, m, y }

Set an initial date to give the user a hint If left the initial date will be the current date

    class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<DateTime> dateNotifier =
  ValueNotifier(DateTime(2020, MonthsOfYear.march.number, 12));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme
            .of(context)
            .colorScheme
            .inversePrimary,
        title: Text(widget.title),
      ),
      body: ValueListenableBuilder(
        valueListenable: dateNotifier,
        builder: (context, date, _) {
          return Center(
            child: Column(
              children: [
                Text("${date.day} - ${date.month} - ${date.year}"),
                DropDownDatePicker(
                  initialDate: date,
                  dateOptions: const [
                    DateOptions.d,
                    DateOptions.m,
                    DateOptions.y
                  ],
                  onDateChanged: (date) => dateNotifier.value = date,
                ),
              ],
            ),
          );
        },), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

  • The dateOptions parameter is used to order your date, such as a date format, and also choose what you'd like to be able to change

  • The onDateChanged function is a callback used to get the new date.