[Flutter]「DateRangePicker」の使い方

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

「DateRangePicker」の使うには、どうしたらいいのでしょうか？

方法

変数

「DateRangePicker」を使うには、まず「DateTimeRange?」型の変数を用意します。

DateTimeRange? selectedDateRange;

選択した日付はこの変数に格納します。

関数

次に,「DateRangePicker」を表示し、選択した日付を最初に用意した変数に格納する関数を用意します。

  Future _pickDateRange(BuildContext context) async {
//DateRangePickerの初期値を用意
    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」は、「showDateRangePicker関数」によって表示することが出来ます。

この関数に、「await」を指定することで、ユーザーが選択し終えるまで待つことが出来ます。

そして、選択し終わったら処理を再開し、用意した変数に選択した日付の範囲を格納します。

「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

トリガーに関数を指定

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

//開始日
dateTimeRange.start

//終了日
dateTimeRange.end

//期間
dateTimeRange.duration

全体のコード

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  DateTimeRange? selectedDateRange;

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

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

    if (newDateRange != null) {
      setState(() => selectedDateRange = newDateRange);
    } else {
      return;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(selectedDateRange != null
              ? "${selectedDateRange?.start} to ${selectedDateRange?.end}"
              : "No Pick"),
          SizedBox(
            height: 20,
          ),
          ElevatedButton(
              onPressed: () => _pickDateRange(context),
              child: const Text("Pick DateRange"))
        ],
      ),
    );
  }
}