Flutter 〜showDatePickerのサンプル〜

showDatePickerとは

日付選択をするカレンダーを表示する。
今回のサンプルはボタンを押すとカレンダーが表示され、選択した日付を変数に設定する。

選択した日付ボタンを押すとコンソールに日付が表示される。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

// MyAppクラス: アプリのルートウィジェットを定義するStatelessWidget。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('showDatePicker'),
          // AppBarのタイトルを設定。
        ),
        body: Home(),
        // HomeウィジェットをScaffoldのbodyとして使用。
      ),
    );
  }
}

// Homeクラス: 日付選択機能を提供するStatelessWidget。
class Home extends StatelessWidget {
  const Home({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    // 変数birthdayを宣言。選択された日付を保持する。
    DateTime? birthday;
    return Center(
      // Centerウィジェットで子ウィジェットを中央に配置。
      child: Column(
        // Columnウィジェットで子ウィジェットを垂直方向に並べる。
        children: [
          ElevatedButton(
            // 日付選択用のボタン。
            onPressed: () async {
              // ボタンが押されたときのアクション。
              birthday = await showDatePicker(
                context: context,
                initialDate: DateTime(DateTime.now().year - 10),
                firstDate: DateTime(DateTime.now().year - 100),
                lastDate: DateTime(DateTime.now().year),
                // showDatePickerダイアログを表示し、ユーザーからの入力を待つ。
              );
            },
            child: Text('日付選択'),
            // ボタンのテキスト。
          ),
          ElevatedButton(
            onPressed: () {
              // 選択した日付表示用のボタン。
              print('$birthdayを選択');
              // コンソールに選択した日付を出力。
            },
            child: Text('選択した日付'),
            // ボタンのテキスト。
          )
        ],
        crossAxisAlignment: CrossAxisAlignment.center,
        // 子ウィジェットを中央揃えに設定。
      ),
    );
  }
}