Search code examples
flutterflutter-textflutter-themeflutter-dialog

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


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,
        );
      },
    );
  }

Solution

  • 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