how can i change the TextStyle of showDateRangePicker() or showDateRangePicker() in flutter

2,738

So, according to the answer of abbas jafary answer. I deep Dived into the Documentation of the showDateRangePicker() (you can do so using Ctrl+ Right-Clicking) and found what texstTheme it is using for that Text.

 Text(
       helpText,
       style: textTheme.overline.apply(
       color: headerForeground,),
 ),

So, Then I wrapped my Widget with Theme and updated the textTheme field.

buildMaterialDatePicker({BuildContext context, SearchVM model}) async {
    final DateTimeRange picked = await showDateRangePicker(
      context: context,
      firstDate: initialDate,
      helpText: 'Select a Date or Date-Range',
      fieldStartHintText: 'Start Booking date',
      fieldEndHintText: 'End Booking date',
      currentDate: initialDate,
      lastDate: DateTime(2020, initialDate.month + 1, initialDate.day),
      builder: (BuildContext context, Widget child) {
        return Theme(
          data: ThemeData.dark().copyWith(
            colorScheme: ColorScheme.dark(
              primary: Colors.greenAccent,
              onPrimary: oppColor,
              surface: Colors.greenAccent,
              onSurface: oppColor,
            ),

          // Here I Chaged the overline to my Custom TextStyle.
            textTheme: TextTheme(overline: TextStyle(fontSize: 16)),
            dialogBackgroundColor: mainColor,
          ),
          child: child,
        );
      },
    );
   
}

Here is the Output of what I get

Share:
2,738
DIVYANSHU SAHU
Author by

DIVYANSHU SAHU

I'm a Freelance Flutter Developer.

Updated on December 01, 2022

Comments

  • DIVYANSHU SAHU
    DIVYANSHU SAHU over 1 year

    Want to change the TextStyle of helpText in showDateRangePicker() in Flutter.

    Can anybody Help.

    This the UI right now.

    Want to Increase the size of this & color too


      buildMaterialDatePicker({BuildContext context, SearchVM model}) 
       async {
        final DateTimeRange picked = await showDateRangePicker(
          context: context,
          firstDate: initialDate,
          helpText: 'Select a Date or Date-Range',
          fieldStartHintText: 'Start Booking date',
          fieldEndHintText: 'End Booking date',
          currentDate: initialDate,
          lastDate: DateTime(2020, initialDate.month + 1, 
          initialDate.day),
          builder: (BuildContext context, Widget child) {
            return Theme(
              data: ThemeData.dark().copyWith(
                colorScheme: ColorScheme.dark(
                  primary: Colors.greenAccent,
                  onPrimary: oppColor,
                  surface: Colors.greenAccent,
                  onSurface: oppColor,
                ),
                dialogBackgroundColor: mainColor,
              ),
              child: child,
            );
          },
        );
      }