Flutterのマテリアルデザインを活用した日付入力と時間入力コンポーネントを紹介

dependencies:
  flutter:
    sdk: flutter

  // （1） 多言語対応
  flutter_localizations:
    sdk: flutter
  // （2） 日付などのフォーマットの多言語化
  intl: ^0.17.0

// （1） 必要なパッケージのimport宣言
import 'package:flutter_localizations/flutter_localizations.dart';
// : （省略）
return MaterialApp(
    // （2） 多言語対応処理の追加
    localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
    ],
    // （3） 対応する言語の宣言
    supportedLocales: [
        Locale('ja',''),
        Locale('en',''),
    ],
);

class _DatePickerWidget extends State {

  // （1） 入力された日付変数
  DateTime _inputDate = DateTime.now();
  // : （省略）

  @override
  Widget build(BuildContext context) {
    return Container(
        color: Colors.white,
        alignment: Alignment.center,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              OutlinedButton(
                  // （2） ボタンを押した時に入力できるようにする
                  onPressed: () => _openSample1(context),
                  child: Text("日付選択")
              ),
              // : （省略）
            ])
    );
  }

  Future _openSample1(BuildContext context) async {
    // （3） ダイアログを表示する
    final DateTime? _date = await showDatePicker(
        context: context,
        // （4） 処理指定日付
        initialDate: DateTime.now(),
        // （5） 指定できる日付範囲
        firstDate: DateTime(2022,1,1),
        lastDate: DateTime(2022,12,31),
    );
    // （6） 選択された場合に、値を設定する
    if(_date != null){
      setState(() {
        _inputDate = _date;
      });
    }
  }
  // : （省略）
}

final DateTime? _date = await showDatePicker(
    // : （省略）
    //  入力モードを指定する
    initialEntryMode: DatePickerEntryMode.inputOnly,
);

// : （省略）

// （1） 指定された日付
DateTime _startDate = DateTime.now();
DateTime _endDate = DateTime.now();

//  日付(レンジ)選択
Future _openSample4(BuildContext context) async {
    //  （2） showDateRangePickerを使う
    final DateTimeRange? _range = await showDateRangePicker(
        context: context,
        // （3） 初期の日付期間を指定する
        initialDateRange: DateTimeRange(start: _startDate, end: _endDate),
        firstDate: DateTime(2022,1,1),
        lastDate: DateTime(2022,12,31),
    );
    if(_range != null){
        setState(() {
            // （4） 期間の開始と終了の設定
            _startDate = _range.start;
            _endDate = _range.end;
        });
    }
}
// : （省略）