Flutter CupertinoDatePickerで日付のみ選択したい

日付選択のUIでiosでの日付選択表示ができるか探していて、その作り方がわかりましたのでメモとして残しておきます。

まず日付選択の画面がどのようになったのか載せておきます。画像は作成中のアプリケーションの一部です。

「クパチーノデザインの日付選択UI」

ソースコードは以下になります。

/// Cupertinoデザインのモーダルを表示する
showCupertinoModalPopup<void>(
    context: context,
    builder: (BuildContext context) {
        return Column(
        mainAxisAlignment:
        MainAxisAlignment.end,
        children: <Widget>[
        Container(
        decoration: BoxDecoration(
        color: Color(0xffffffff),
        border: Border(
            bottom: BorderSide(
            color: Color(0xff999999),
            width: 0.0,
            ),
        ),
        ),
        child: Row(
        mainAxisAlignment:
            MainAxisAlignment
                .spaceBetween,
        children: <Widget>[
            /// クパチーノデザインのボタン表示
            CupertinoButton(
            child: Text('キャンセル'),
            onPressed: () {
                Navigator.pop(context);
            },
            padding: const EdgeInsets
                .symmetric(
                horizontal: 16.0,
                vertical: 5.0,
            ),
            ),
            CupertinoButton(
            child: Text('追加'),
            onPressed: () {
                Navigator.pop(context);
            },
            padding: const EdgeInsets
                .symmetric(
                horizontal: 16.0,
                vertical: 5.0,
            ),
            )
        ],
        ),
        ),
        /// 最下部で表示するPicker
        _bottomPicker(
        CupertinoDatePicker(
        /// datePickerを日付のみの表示にする
        mode: CupertinoDatePickerMode
            .date,
        initialDateTime: _dateTime,
        onDateTimeChanged:
            (DateTime newDateTime) {
            setState(() =>
                _dateTime = newDateTime);
    },
),
/// datePickerの表示構成
Widget _bottomPicker(Widget picker) {
    return Container(
      height: 216,
      padding: const EdgeInsets.only(top: 6.0),
      color: CupertinoColors.white,
      child: DefaultTextStyle(
        style: const TextStyle(
          color: CupertinoColors.black,
          fontSize: 22.0,
        ),
        child: GestureDetector(
          onTap: () {},
          child: SafeArea(
            top: false,
            child: picker,
          ),
        ),
      ),
    );
  }

FlutterでのIOSに対応したデザインを作成する際にはCupertinoDesignを使用します。クパチーノはappleの本社の住所らしいです。今回使用したのは、cupertinoModalで背景が暗くなって最下部に表示したいpickerがでてくるものと、ボタンのデザインですね。

このDatePickerはキャンセルと追加ボタンの枠と日付選択のPickerで別れています。なので、Columnで上下に並べて見た目を調整しています。

DatePickerは日付選択、日時選択、時間選択のどれかを選べるようになっています。CupertinoDatePicker内にあるmodeで選べます。

日付のみを選択したい場合は、CupertinoDatePickerMode.date

日時を選択したい場合は、CupertinoDatePickerMode.dateAndTime

時刻のみを選択したい場合は、CupertinoDatePickerMode.time

以上、メモ書きでした。