如何在颤动中更改 showDateRangePicker() 或 showDateRangePicker() 的 TextStyle答案

【问题标题】：how can i change the TextStyle of showDateRangePicker() or showDateRangePicker() in flutter如何在颤动中更改 showDateRangePicker() 或 showDateRangePicker() 的 TextStyle
【发布时间】：2020-12-20 17:06:24
【问题描述】：

想在Flutter中更改showDateRangePicker()中helpText的TextStyle。

谁能帮忙。

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

【问题讨论】：

标签： flutter flutter-text flutter-theme flutter-dialog

【解决方案1】：

为了改变颜色、字体等。你必须将元素包装到主题中：

Widget returnRangePicker(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
          accentColor: Colors.green,
          primaryColor: Colors.blue,
          buttonTheme: ButtonThemeData(
              highlightColor: Colors.green,
              buttonColor: Colors.green,
              colorScheme: Theme.of(context).colorScheme.copyWith(
                  secondary: epapGreen,
                  background: Colors.white,
                  primary: Colors.green,
                  primaryVariant: Colors.green,
                  brightness: Brightness.dark,
                  onBackground: Colors.green),
              textTheme: ButtonTextTheme.accent)),
      child: Builder(
        builder: (context) => FlatButton(
          onPressed: () async {
            final List<DateTime> picked = await DateRangePicker.showDatePicker(
                context: context,
                initialFirstDate: DateTime.now(),
                initialLastDate:
                    DateTime.now()).add(Duration(days: 7),
                firstDate: DateTime(2015),
                lastDate: DateTime(2020));
            if (picked != null && picked.length == 2) {
              print(picked);
            }
          },
          child: Text(
            "Choose range",
            style: TextStyle(color: Colors.green),
          ),
        ),
      ),
    );
  }

有关更多信息，您可以查看docs。或查看link

【讨论】：

【解决方案2】：

所以，根据abbas jafary的回答回答。我深入研究了showDateRangePicker() 的文档（您可以使用Ctrl+ Right-Clicking）并找到texstTheme 用于Text 的内容。

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

所以，然后我用Theme 包装了我的小部件并更新了textTheme 字段。

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

【讨论】：