Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Cannot customise borders of years section in showDatePicker

I am using Flutter 3.16.5.

The years section in the showDatePicker has a border top and bottom that cannot be customised and doesn’t respond to any changes applied in the Theme.

I would expect that the dividerColor is also applied to this border, or that any other colours options in the ColorScheme could impact these borders. How can I change change the colours of these borders or if possible remove them altogether?

showDatePicker(
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: Theme.of(context).copyWith(
          inputDecorationTheme:
              InputDecorationTheme(
                  border: UnderlineInputBorder(
            borderSide: BorderSide(
              width: 0.5,
              color: ColorRes.colorPrimary,
            ),
          )),
          colorScheme: ColorScheme.light(
              onPrimary: ColorRes.white,
              primary: ColorRes.colorPrimary,
              background: ColorRes.white),
          datePickerTheme: DatePickerThemeData(
            headerBackgroundColor:
                ColorRes.colorPrimary,
            backgroundColor: ColorRes.white,
            headerForegroundColor: ColorRes.white,
            surfaceTintColor: ColorRes.white,
            dividerColor: ColorRes.colorPrimary,
          ),
        ),
        child: child!,
      );
    },
    locale: currentDefaultSystemLocale == "nl_NL"
        ? Locale("nl", "NL")
        : Locale("en", "US"),
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime.now(),
    lastDate: DateTime.now()
        .add(const Duration(days: 183)))

issue

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Fixed by changing the outlineVariant in the colorScheme


  2. 0

    I’ve digged more into it and I found this documentation in the Divider class

      /// If [color] is null, then [DividerThemeData.color] is used. If that is also
  /// null, then if [ThemeData.useMaterial3] is true then it defaults to
  /// [ThemeData.colorScheme]'s [ColorScheme.outlineVariant]. Otherwise
  /// [ThemeData.dividerColor] is used.

    The date picker uses two Dividers without color argument so, according to the documentation, if you have in your ThemeData a dividerTheme defined it will use the color in that regardles whether you have useMaterial3 true or false. If you don’t have a dividerTheme defined and you use useMaterial3: false it looks at the dividerColor. If you do have useMaterial3: true (which is the default in the latest Flutter version) it uses the outlineVariant of the colorScheme. Digging further I could see that if your colorScheme doesn’t have a outlineVariant defined it defaults to the colorScheme‘s onBackground which has Colors.black as default for the ColorScheme.light constructor. This is why it was black.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search