flutter 使用getx 框架系统日历 showDatePicker && selectTimeWidget 多语言切换终极解决方案

前言

最近一段时间，写了一个项目，使用的getx 框架，但是在使用系统日历的时候，需求需要日历有多语言功能，但是showDatePicker 日历组件，无法使用getx 里面的Locale 设置，强制使用的话，只会崩溃报错，报错原因就是需要我们在MaterialApp 里面配置多语言。

下面是我给如上问题的一些解决方案，如果你有更好的方式，请留言告知，万分感谢

---

一、showDatePicker

showDatePicker() 方法用于弹出一个日期选择器的对话框，对话框会有一个默认的样式，当然，我们也可以使用builder 来自定义样式，如下列表中的属性，就是我们常用的一些属性了。

当我们需要使用的时候，直接在事件中调用

showdata(context) {
    showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        lastDate: DateTime.now(),
        firstDate: DateTime(1900, 01, 01));
  }
1
2
3
4
5
6
7

当然，上面是最简单的使用方法，并不是本篇文章的重点解决方案，接下来我们先来看一个在正常情况下使用，怎么设置多语言切换功能。

1.1、showDatePicker 多语言功能设置

1. 找到pubspec.yaml配置flutter_localizations

flutter_localizations:
    sdk: flutter
1
2

2. 在MaterialApp 中设置国际化

void main() {
  runApp(
    new MaterialApp(
      title: 'app',
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      home: new MyLoginWidget(),
      localizationsDelegates: [
        //此处 系统是什么语言就显示什么语言
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        //此处 系统是什么语言就显示什么语言
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],
    ),
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. 调用 showDatePicker 组件并设置组件 Locale

_showDatePicker() async{
    var date =await showDatePicker(
      context: context,
      initialDate: _datetime,
      firstDate:DateTime(1900),
      lastDate:DateTime(2050),
      locale: Locale('zh'), // 强制显示中文 如果报错就删除,跟随系统语言显示
    );
    if(date==null) return;
    print(date);
    setState(() {
       _datetime=date;
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

如上便是我们在正常环境下，使用的 showDatePicker() 并设置多语言的方式，下面我们再来看，如何在getx 组件中设置多语言

1.2、getx 框架下设置 showDatePicker 多语言功能

1. 找到pubspec.yaml配置flutter_localizations

flutter_localizations:
    sdk: flutter
1
2

2. 在 GetMaterialApp 中配置 localizationsDelegates

GetMaterialApp(
  theme: TigerTheme.themeData(),
  debugShowCheckedModeBanner: false,
  title: "App",
  initialRoute: "/",
  getPages: GetPages.getPages,
  localizationsDelegates: const [   // localizationsDelegates delegate 必须得设置
    GlobalMaterialLocalizations.delegate,  
    GlobalWidgetsLocalizations.delegate,
  ],
);
1
2
3
4
5
6
7
8
9
10
11

3. 使用 showDatePicker() 并设置 Locale

_showDatePicker() async{
    var date =await showDatePicker(
        context: context,
        initialDate: selectedDate != null
            ? DateTime.parse(selectedDate.toString())
            : DateTime.now(),
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101),
        locale: const Locale('de', 'US'));     // 在此设置多语言功能
  }
1
2
3
4
5
6
7
8
9
10

二、showTimePicker 时间选择器多语言设置

在showTimePicker() 组件中，我们会发现没有Locale 这个语言设置功能，那么我们该怎么来设置语言呢？

_showTimePicker() async{
final picked = await showTimePicker(
    context: context,
    initialTime: selectedTime,
    builder: (context, child) {
      return Localizations(
          locale: const Locale('de', 'US'),
          delegates: const [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          child: child);
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

如上代码中所示，我们可以重写他的builder 属性，来自定义一个Localizations 组件，这样我们就实现了 showTimePicker 时间选择器的多语言功能了。

总结

在遇到这个这个问题的时候，我也查询了很多资料，也反复的去查看了getx 的源码部分，浪费了很多的时间，才解决了此问题，如果对你有帮助，别忘了点赞支持一下哦！