showTimePicker 时间选择器国际化 | Flutter

微信交流群

Flutter 1.20 版本更新了时间类组件的样式。

弹出时间组件：

RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)

1
2
3
4
5
6
7

1.20 版以前的效果：

设置 交互模式，交互模式包含 时钟模式（默认）和 输入模式。

var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input);

1
2
3
4

时钟模式（TimePickerEntryMode.dial）：

输入模式（TimePickerEntryMode.input）：

设置顶部标题、取消按钮、确定按钮文案：

var result = showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    initialEntryMode: TimePickerEntryMode.input,
    helpText: '选择时间',
    cancelText: '取消',
    confirmText: '确定');

1
2
3
4
5
6
7

设置 24小时 制：

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return MediaQuery(
      data: MediaQuery.of(context)
          .copyWith(alwaysUse24HourFormat: true),
      child: child,
    );
  },
);

1
2
3
4
5
6
7
8
9
10
11

设置 黑暗模式：

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  },
);

1
2
3
4
5
6
7
8
9
10

# 国际化

在 pubspec.yaml 中引入：

dependencies:
  flutter_localizations:
    sdk: flutter

1
2
3

在顶级组件 MaterialApp 添加支持：

MaterialApp(
  title: 'Flutter Demo',

  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'),
    const Locale('en'),
  ],
  ...

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

弹出时间组件：

RaisedButton(
  child: Text('弹出时间选择器'),
  onPressed: () async {
    var result =
        showTimePicker(context: context, initialTime: TimeOfDay.now());
  },
)

1
2
3
4
5
6
7

切换系统语言为中文：

不跟随系统语言，直接指定，比如当前系统语言为中文，指定为英文：

var result = showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
  builder: (BuildContext context, Widget child) {
    return Localizations(
      locale: Locale('en'),
      delegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      child: child,
    );
  },
);

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

9.1 日期选择器 9.3 iOS风格日期选择器