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

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

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?

DatePicker Image

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,
    ),
  );
Tags:

2

Answers


  1. 0

    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:)

    Login or Signup to reply.
  2. 0

    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.

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

Back To Top
Search