【flutter】iOS風のDatePickerを表示するには？

こんにちは。
今回は、CupertinoDatePicker(iOS風)を実装する方法を紹介します。

方法

まず、「Cupertinoパッケージ」をインポートします。
「CupertinoDatePicker」のウィジェットを使い、iOS風のDatePickerを表示することが出来ます。

「CupertinoDatePicker」は、引数「onDateTimeChanged」に、値が変更された時の処理を記述することで使えます。

使用例

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';  //インポートする

void main() {
  runApp(const MainApp());
}

var selectDate = DateTime.now(); //今回は、現在時刻をセット

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.pink,
            title: const Text("Flutter!!!!"),
          ),
          body: Center(
            child: CupertinoDatePicker(  //以下を追加
              initialDateTime: selectDate,
              mode: CupertinoDatePickerMode.date,
              onDateTimeChanged: (dateTime) {
                setState(() => selectDate = dateTime);
              },
            ),
          )),
    );
  }
}

実行例