[Flutter]角丸のDatePickerを表示するには？

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

角丸のDatePickerを表示するには、どうしたらいいのでしょうか？

方法

角丸のDatePickerを表示するには、「flutter_rounded_date_picker」パッケージを使います。

まず、パッケージを導入します。

dependencies:
  flutter_rounded_date_picker: ^2.0.2

次に、パッケージをインポートします。

import 'package:flutter_rounded_date_picker/flutter_rounded_date_picker.dart';

DatePickerを表示するための関数と変数を用意します。

  DateTime? selectedDate;

  Future _getDate(BuildContext context) async {
    final initialDate = DateTime.now();

     //角丸のDatePickerを表示
    final newDate = await showRoundedDatePicker(
      context: context,
      height: 400,  //高さ
      initialDate: DateTime.now(), //初期値
      firstDate: DateTime(DateTime.now().year - 1),    //過去の上限
      lastDate: DateTime(DateTime.now().year + 1),    //未来の上限
      borderRadius: 30,   //丸み具合
    );

    if (newDate != null) {
      setState(() => selectedDate = newDate);
    } else {
      return;
    }
  }

「showRoundedDatePicker」関数を使うことで、角丸のDatePickerを表示することが出来ます。

最後に、タップやスワイプなどのトリガーに用意した関数を指定します。

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextButton(
              onPressed: () {
                _getDate(context);
              },
              child: Text('Pick')
           ),
　　　　　     Text("$selectedDate")
        ],
),

これで角丸のDatePickerを表示することが出来ます。