如何更改日期范围选择器的样式? [英] How can I change style of date range picker?

问题描述

在Flutter中添加了.那么如何更改此插件的样式和语言?

解决方案

对于语言，您可以设置语言环境.我还建议您调查 https://flutter.dev/docs/development/可及性和本地化/国际化

要更改小部件颜色，ant字体等，必须将元素包装到Theme中:

 小部件returnRangePicker(BuildContext context){返回主题(数据:Theme.of(context).copyWith(accentColor:Colors.green，primaryColor:Colors.blue，buttonTheme:ButtonThemeData(HighlightColor:Colors.green，buttonColor:Colors.green，colorScheme:Theme.of(context).colorScheme.copyWith(次要:epapGreen，背景:Colors.white，主色:Colors.green，primaryVariant:Colors.green，亮度:亮度.暗，onBackground:Colors.green)，textTheme:ButtonTextTheme.accent))，子代:Builder(生成器:(上下文)=>FlatButton(onPressed:()异步{最终List< DateTime>选=等待DateRangePicker.showDatePicker(上下文:上下文，initialFirstDate:DateTime.now()，initialLastDate:DateTime.now()).add(Duration(days:7)，firstDate:DateTime(2015)，lastDate:DateTime(2020));if(picked！= null& amp; Picked.length == 2){打印(已选)；}}，子代:文字(选择范围"，样式:TextStyle(颜色:Colors.green)，)，)，)，);} 

In flutter added this plugin.This is my code

onPressed:() async {
    final List<DateTime> picked = await DateRagePicker.showDatePicker(
        context: context,
        initialFirstDate: DateTime.now(),
        initialLastDate: DateTime.now()).add(Duration(days: 7),
        firstDate: DateTime(2018),
        lastDate: DateTime(2022),
    );
    if (picked != null && picked.length == 2) {
        print(picked);
    }
},

This is the result. So how can I change style and language of this plugin?

解决方案

For language you can set locale. I would also suggest looking into https://flutter.dev/docs/development/accessibility-and-localization/internationalization

To change widget colors, fonts ant etc. would have to wrap element into Theme:

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

这篇关于如何更改日期范围选择器的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！