日付選択の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
以上、メモ書きでした。