[Flutter]日付を範囲で選択できるようにするには？

どうも、ちょげ(@chogetarou)です。

○日からX日までのように、日付を範囲で選択するにはどうしたらいいのでしょうか？

方法

日付を範囲選択できるようにするには、「DateRangePicker」を使います。

「 DateRangePicker」は、次の手順で使います。

1. 選択した日付の範囲を保持する変数を用意
2. 「DateRangePicker」を表示し、選択された範囲を変数に格納する関数を用意
3. トリガーに用意した関数を指定

Step1

まず、選択した日付の範囲を保持するための変数を用意します。

DateTimeRange? selectedDateRange;

変数の型には、「DateTimeRange?」型を指定します。

Step2

次に、「DateRangePicker」を表示し、選択された範囲を最初に用意した変数（ここでは「selectedDateRange変数」）に格納する関数を用意します。

  Future _pickDateRange(BuildContext context) async {
    final initialDateRange = DateTimeRange(
        start: DateTime.now(),
        end: DateTime.now().add(Duration(hours: 24 * 3)));

//DateRangePickerを表示する
    final newDateRange = await showDateRangePicker(
        context: context,
        initialDateRange: initialDateRange,
        firstDate: DateTime(DateTime.now().year - 3),
        lastDate: DateTime(DateTime.now().year + 3));

//nullチェック
    if (newDateRange != null) {
　　　　　//用意した変数に格納
      setState(() => selectedDateRange = newDateRange);
    } else {
      return;
    }
  }

「DateRangePicker」は、「showDateRnagePicker関数」で表示します。

この関数は、「DateRangePicker」が表示し、範囲を選択した後に「DateTimeRange」型の値を返します。

    final newDateRange = await showDateRangePicker(
        context: context,
        initialDateRange: initialDateRange,
        firstDate: DateTime(DateTime.now().year - 3),
        lastDate: DateTime(DateTime.now().year + 3));

そして、選択し終わった後には、選択された日付の範囲を用意した変数に格納します。

//nullチェック
    if (newDateRange != null) {
　　　　　//用意した変数に格納
      setState(() => selectedDateRange = newDateRange);
    } else {
      return;
    }

「showDateRangePicker関数」は、４つの引数を指定して使います。

• context : コンテキスト
• initialDateRange : 日付の範囲の初期値
• firstDate : 選択できる日付の上限（過去の方）
• lastDate : 選択できる日付の上限（未来の方）

他の引数では、表示する「DateRangePicker」の設定をすることが出来ます。

showDateRangePicker function - material library - Dart API

API docs for the showDateRangePicker function from the material library, for the Dart programming language.

api.flutter.dev

Step3

ElevatedButton(
              onPressed: () => _pickDateRange(context),
              child: const Text("Pick DateRange"))