【Flutter】DatePickerでカレンダーを表示して日付を入力する

2023年11月19日

この記事はこんな人におすすめ！

カレンダーを表示して日付を入力したい
showDatePickerの使い方が知りたい

「Flutterでカレンダーを表示して日付を入力するにはどうするの？」

今回はFlutterでカレンダーを表示して日付入力ができるshowDatePicker()の使い方を解説していきます。

DatePicker(showDatePicker関数)とは？

showDatePicker関数を呼び出すことでスクリーン上にカレンダーを表示し、入力した日付をDateTime型として取得できます。

DatePickerの使い方

それではDatePickerの使い方について紹介していきます。

今回は_pickDateメソッドを作成してElevatedButtonでメソッドを呼び出して日付入力できるよう実装していきます。

（全体のコードは記事下からコピーできます）

ステップ１：DatePickerのメソッドを作成

まずはデフォルトの日付と更新した日付を格納する変数_dateを作成し、非同期処理で_pickDateメソッドを次のように作成します。

DateTime _date = DateTime.now();

Future _pickDate(BuildContext context) async {
  final newDate = await showDatePicker(
    context: context,
    initialDate: _date,
    firstDate: DateTime(1900),
    lastDate: DateTime(2100),
  );

  if (newDate != null) {
    setState(() => _date = newDate);
  }
}

showDatePicker関数が呼び出されるとカレンダーが表示され入力した日付がDateTime型で返されるので、変数newDateを新たに作成して戻り値を取得しsetState()で_dateの値を更新します。

またshowDatePicker関数のinitialDateでカレンダーで表示されるデフォルトの日付、firstDateで選択できる最初の日付、lastDateに選択できる最後の日付をDateTime型で指定します。

ステップ２：メソッドの呼び出し

メソッドが完成したらElevatedButtonなどのウィジェットで呼び出すだけでカレンダーが表示され日付を入力できます。

//全体のコードから一部抜粋
... 

ElevatedButton(
  child: Text('${_date.year}-${_date.month}-${_date.day}'),
  onPressed: () => _pickDate(context),
),

...

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime _date = DateTime.now();

  Future _pickDate(BuildContext context) async {
    final newDate = await showDatePicker(
      context: context,
      initialDate: _date,
      firstDate: DateTime(1900),
      lastDate: DateTime(2100),
    );

    if (newDate != null) {
      setState(() => _date = newDate);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: ElevatedButton(
          child: Text('${_date.year}-${_date.month}-${_date.day}'),
          onPressed: () => _pickDate(context),
        ),
      ),
    );
  }
}

まとめ

今回はカレンダーを表示して日付を入力できるDatePickerの使い方を紹介しました。

DatePickerの他にも時刻を入力できるTimePickerもあるのでぜひ一緒にチェックしてみてください。

参考サイト

https://www.youtube.com/watch?v=yMZpwXQcP2E