Flutter中日期組件DatePicker及組件漢化

Flutter提供了DatePicker組件進行時間選擇。

日期組件及時間組件代碼示例：

import 'package:flutter/material.dart';
// 第三方插件，需要提前配置
import 'package:date_format/date_format.dart';

class DatePickerPage extends StatefulWidget {
    DatePickerPage({Key key}) : super(key: key);
    
    @override
    _DatePickerPageState createState() => _DatePickerPageState();
}

class _DatePickerPageState extends State<DatePickerPage> {

    // 初始化當前日期
    DateTime _nowDate = DateTime.now();
    // 初始化當前時間
    TimeOfDay  _nowTime = TimeOfDay(hour: 12, minute: 30);

    @override
    void initState() {
        super.initState();
    }

    // 日期組件方法，異步調用(第一種調用方式)
    // _showDatePicker(){
    //     showDatePicker(
    //         context: context, 
    //         initialDate: _nowDate, 
    //         firstDate: DateTime(1980), 
    //         lastDate: DateTime(2100)
    //     ).then((result){
    //         // 異步回調的結果
    //         print(result);
    //     });
    // }

    // 日期組件方法，異步調用(第二種調用方式)
    void _showDatePicker() async{
        var result = await showDatePicker(
            // 上下文環境
            context:context, 
            // 初始化時間
            initialDate:_nowDate, 
            // 最早時間
            firstDate:DateTime(1980), 
            // 最晚時間
            lastDate:DateTime(2100), 
        );
        // 異步回調的結果
        print(result);
        // 將選擇的時間進行賦值
        setState(() {
           this._nowDate = result;
        });
    }

    // 時間選擇器，異步調用
    void _showTimePicker() async{
        var result = await showTimePicker(
            // 上下文環境
            context: context, 
            // 初始化時間
            initialTime: _nowTime
        );
        setState(() {
           this._nowTime = result;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(title: Text("DatePicker")),
            body:Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                            // 日期選擇器
                            InkWell( // 點擊有水波紋效果
                                child:Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                        // 用第三方插件將選擇的日期進行格式化
                                        Text("${formatDate(_nowDate,[yyyy,'年',mm,'月',dd])}"),
                                        Icon(Icons.arrow_drop_down)
                                    ],
                                ),
                                onTap:this._showDatePicker
                            ),

                            // 時間選擇器
                            InkWell( // 點擊有水波紋效果
                                child:Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children:<Widget>[
                                        // 將選擇的時間進行格式化
                                        Text("${_nowTime.format(context)}"),
                                        Icon(Icons.arrow_drop_down)
                                    ],
                                ),
                                onTap:this._showTimePicker
                            )
                        ],
                    )
                ],
            )
        );
    }
}

效果圖如下：

 

默認情況下，組件是英文格式的，如果要想將組件進行漢化，需要做以下操作：

1. 安裝本地化的包。

dependencies:
  flutter:
    sdk: flutter
  date_format: ^1.0.6
  flutter_localizations:
    sdk: flutter

pubspec.yaml中配置保存後，在VS Code環境中會自動下載依賴包。

如果無法正常下載，執行 flutter pub get 。

2. 引入本地化文件包

// main.dart

// 引入本地化的包
import 'package:flutter_localizations/flutter_localizations.dart';

3. 進行配置

// main.dart

Widget build(BuildContext context) {
    return MaterialApp(
        
        // 配置本地化
        localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
            const Locale('zh', 'CH'),
            const Locale('en', 'US'),
        ],
        locale: const Locale("zh"),

    );
}

4. 完整示例

// main.dart
import 'package:flutter/material.dart';

// 引入本地化的包
import 'package:flutter_localizations/flutter_localizations.dart';

// 引入路由管理
import 'routes/Routes.dart';

// 主函數
void main(){
    runApp(MyApp());
}

class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            // 配置本地化
            localizationsDelegates: [
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
            ],
            supportedLocales: [
                const Locale('zh', 'CH'),
                const Locale('en', 'US'),
            ],
            locale: const Locale("zh"),

            // 初始化的路由
            initialRoute: '/',
            // 監聽路由事件
            onGenerateRoute:onGenerateRoute,
            // 主題
            theme: ThemeData(primarySwatch:Colors.yellow),
            // 關閉調試模式的圖標
            debugShowCheckedModeBanner: false,

            
        );
    }
}