flutterdatepickerdaterangepicker

DateRangePicker color scheme in flutter


I would like the customize the DateRangePicker in flutter to look like the DatePicker. I am using material 3:

screenshot of DatePicker: enter image description here

screenshot of DateRangePicker: enter image description here

Basically in the DateRangePicker you can barely see your selection. I want the background to be as dark as in the DatePicker. A look at the source code of DateRangePicker reveals that it uses a app bar. I suspect this is the cause of the light color in the header background. But I don't know change that.

This is my code to show the date range picker:

                                 await showDateRangePicker(
                                    context: context,
                                    firstDate: DateTime(1900),
                                    lastDate: DateTime.now(),
                                   );

I manage to achieve what I want thanks to the help of @Rohan Jariwala. This is what works for me:

    await showDateRangePicker(
                                    context: context,
                                    firstDate: DateTime(1900),
                                    lastDate: DateTime.now(),
                                    builder: (context, child) {
                                      return Theme(
                                        data: Theme.of(context).copyWith(
                                          appBarTheme: Theme.of(context)
                                              .appBarTheme
                                              .copyWith(
                                                backgroundColor:
                                                    Theme.of(context)
                                                        .colorScheme
                                                        .primary,
                                              ),
                                        ),
                                        child: child!,
                                      );
                                    });

Solution

  • You can add builder in showDateRangePicker in following way

    builder: (context, Widget? child) => Theme(
                data: themeData.copyWith(
                    appBarTheme: themeData.appBarTheme.copyWith(
                        backgroundColor: Colors.blue,
                        iconTheme: themeData.appBarTheme.iconTheme!.copyWith(color: Colors.white)),
                    colorScheme: ColorScheme.light(
                      onPrimary: Colors.white,
                      primary: Colors.red
                    )),
                child: child!,
              ));
    

    I've added colours to the appBar and colorScheme. You can change those colours.