What is the name of the widget inside DatePicker? How can I customize it from ThemeData?

Question

I'm customizing the DatePicker I'm using, and I'm stuck at the widget in the highlighted area. I can't figure out which widget it is, and therefore, I'm unable to change the text to white color from ThemeData. How can I achieve this?

I've tried several properties, but I couldn't find the ones that stand out. The code I want to write as an example is as follows:

  static final ThemeData lightTheme = ThemeData(
    textSelectionTheme: const TextSelectionThemeData(
      cursorColor: AppColors.whiteColor,
      selectionColor: AppColors.scaffoldColor,
      selectionHandleColor: AppColors.activeColor,
    ),
    scaffoldBackgroundColor: AppColors.scaffoldColor,
    useMaterial3: true,
    appBarTheme: const AppBarTheme(
      backgroundColor: AppColors.scaffoldColor,
      elevation: 0,
      iconTheme: IconThemeData(color: AppColors.whiteColor),
    ),
    bottomNavigationBarTheme: const BottomNavigationBarThemeData(
      backgroundColor: AppColors.scaffoldColor,
      elevation: 0,
      selectedItemColor: AppColors.activeColor,
      unselectedItemColor: AppColors.inactiveColor,
      type: BottomNavigationBarType.shifting,
    ),
  );

Answer 1

The text color on the mode toggle button is controlled by the onSurface color from ColorScheme. You can modify it for the date picker like this:

showDialog<DateTime>(
  context: context,
  builder: (BuildContext context) {
    return Theme(
      data: ThemeData(
        colorScheme: Theme.of(context)
            .colorScheme
            .copyWith(onSurface: Colors.white),
      ),
      child: DatePickerDialog(
        firstDate: DateTime(2023),
        lastDate: DateTime(2025),
      ),
    );
  },
);

If you previously used showDatePicker, you can move most of its parameters to the DatePickerDialog constructor.

Answer 2

The DatePicker can not be customised directly through ThemeData, but the text inside the DatePicker Header can be customised to an extent.

• dialogBackgroundColor can be used to change the background color of the dialog where the DatePicker appears
• ColorScheme can be used since you have useMaterial3 set to true. Setting the onPrimary should affect the header text in the DatePicker.
• headLineMedium or headLine4 is often used to style the date range displayed at the top of the date picker.

If these options do not work try using a custom date picker, like Flutter Date Range Picker or Some Calender.

Hope this helps:)