Customize DateRangePicker in flutter

Question

I want to customize DateRangePicker in flutter, How can I change the following elements?

Change the Save button to image.
Remove the Switch to input button.
Change the header background color.
Change day name color.
Change background color.
Change selected item indicator color.
Change selected item text color.
Change selected range indicator color.
Change selected range text color.

showDateRangePicker(
  context: context,
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(Duration(days: 100)),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData(
        ...
      ),
      child: child,
    );
  },
);

The source code is freely available. You can edit it as much or as little as you like. Unless you're hoping someone will just do the work for you — Alex.F, Nov 06 '20 at 21:58
@Alex.F I think we can apply a style to date range picker like https://stackoverflow.com/questions/50321182/how-to-customize-a-date-picker but I don't know which property should be modified. — Hamed, Nov 08 '20 at 09:11
@Hamed if you want to be able to style the properties separately then you will have to make a copy like I described in my answer. If you just want to know how the styles are grouped you can have a look at the two files - it is mostly primary color. But some are hard-coded into the daterange picker, so to change that you need to make a copy — Damian K. Bast, Nov 09 '20 at 22:17

score 6 · Answer 1 · answered Mar 23 '21 at 15:01

Most of these things can only be changed by modifying the source, as others have said before. You can change the header background color by applying an appBarTheme in the builder callback of showDateRangePicker. The text colors and the selection color can also be set via applying a theme, you need to use a ColorScheme to set them. This example sets the header background to blue, the close icon to white, the header texts + the selected date texts to white, and the selection color to red:

final themeData = Theme.of(context);
showDateRangePicker(
      context: context,
      initialDateRange: initialDateRange,
      firstDate: firstDate,
      lastDate: lastDate,
      currentDate: currentDate,
      initialEntryMode: initialEntryMode,
      helpText: helpText,
      cancelText: cancelText,
      confirmText: confirmText,
      saveText: saveText,
      errorFormatText: errorFormatText,
      errorInvalidText: errorInvalidText,
      errorInvalidRangeText: errorInvalidRangeText,
      fieldStartHintText: fieldStartHintText,
      fieldEndHintText: fieldEndHintText,
      fieldStartLabelText: fieldStartLabelText,
      fieldEndLabelText: fieldEndLabelText,
      locale: locale,
      useRootNavigator: useRootNavigator,
      routeSettings: routeSettings,
      textDirection: textDirection,
      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!,
          ));

Screenshot

score 3 · Accepted Answer · answered Nov 09 '20 at 10:34

@Michael Feinstein is right - to elaborate a little bit on what you have to do:

You need to copy date_range_picker_dialog.dart into your lib folder (you get there by clicking 'go to implementation' on showDateRangePicker()
You need to copy calendar_date_range_picker.dart (~ line 577 of date_range_picker_dialog.dart is where the actual picker widget is returned as body of the dialog)
You need to make the adjustments you want to do in both files. Your numbers 1-3 are in the dialog, have a look at the class _CalendarRangePickerDialog and change what you need. For your 6-9 look at _buildDayItem in the range picker file and the other 2 are also easy to find :-)
Don't forget to change the import in your copy of date_range_picker_dialog.dart so that you import your copy of the date_range_picker.dart, instead of the original one.

Now you are all set and good to go.

thank you Damian K. Bast I was looking for a solution without changing the source code. — Hamed, Nov 25 '20 at 11:37
is it possible to use calendar_date_range_picker without using showDateRangePicker, because i dont want it as a dialog i want to wrap it inside a Container — Jagath Ratchagan, Dec 31 '20 at 08:02

score 2 · Answer 3 · answered Sep 06 '21 at 20:52

I copy below how to change almost everything you asked in terms of color customization:

showDateRangePicker(
  context: context,
  firstDate: DateTime.now(),
  lastDate: DateTime.now().add(Duration(days: 100)),
  builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.light().copyWith(
              //Header background color
              primaryColor: Colors.blue,
              //Background color
              scaffoldBackgroundColor: Colors.grey[50],
              //Divider color
              dividerColor: Colors.grey,
              //Non selected days of the month color
              textTheme: TextTheme(
                bodyText2:
                    TextStyle(color: Colors.black),
              ),
              colorScheme: ColorScheme.fromSwatch().copyWith(
                //Selected dates background color
                primary: Colors.blue,
                //Month title and week days color
                onSurface: Colors.black,
                //Header elements and selected dates text color
                //onPrimary: Colors.white,
              ),
            ),
            child: child,
          );
        }
);

score 1 · Answer 4 · answered Nov 08 '20 at 00:17

1

For that level of customization you will need to get the source code, copy it, and then make your own widget modifying that source code.

answered Nov 08 '20 at 00:17

Michel Feinstein

13,416
16
91
173

Neo Liu · Answer 5 · 2022-05-23T08:31:59.717

1

I created a package calendar_date_picker2 supporting high-level customisations, just simply wrap it inside a Container and set the container color as the background colors.

edited May 23 '22 at 08:31

answered May 23 '22 at 00:36

Neo Liu

393
5
11

This is a great package, thank you very much. The alternative with this design is https://pub.dev/packages/syncfusion_flutter_datepicker which is not free to use, it mentions. By the way, can you point out the design principle for this type of range picker? Our graphic designer uses exactly this but I couldn't find the graphical reference. – Ashkan Sarlak Apr 07 '23 at 17:32
Hi @AshkanSarlak , this widget follows Google Material Design https://m3.material.io/components/date-pickers/overview – Neo Liu Apr 08 '23 at 01:49
Thank you. I'm wondering why flutter hasn't implemented this design. – Ashkan Sarlak Apr 09 '23 at 20:46

score 0 · Answer 6 · answered Nov 09 '20 at 03:52

You have could do this in two ways:

Fork a library which has the code to create something similar to this and then edit the code directly and customize how you want
Look for a library which allows more customizing to the date picker, below are a few:

score 0 · Answer 7 · answered Jun 06 '23 at 08:22

0

I'm too late to answer that question. But I think it will useful for someone.

I used syncfusion_flutter_datepicker packaged. It gives lot of customisation that we want. try it out

answered Jun 06 '23 at 08:22

Kasun Hasanga

1,626
4
15
35

Customize DateRangePicker in flutter

7 Answers7