Zenn
📆

board_datetime_pickerなるものを使ってみた！

2024/04/08に公開
Flutter
Dart
tech

📕Overview

https://pub.dev/packages/board_datetime_picker

Flutter の日時を選択するピッカー。
カレンダーであると同時にピッカーでもあり、パッケージとして様々なオプションを提供します。
タブレット端末では、カレンダーとピッカーを同時に表示して、簡単に日時を選択できます。その他の場合は、カレンダーとピッカーをワンタッチで切り替えて、簡単に日時を選択できます。

🧷summary

見た目が可愛らしい DatePicker のライブラリを知人にご紹介していただいたので、使ってみることにしました。公式のサンプルコードをそのまま使えば動きます。

BoardDateTimeBuilder の内部実装を見てみましたところ以下のように解説されておりました。機能の使用がまとめられた解説がありました。

  • Date ピッカーをページ下部にキーボードのように表示する。
  • テキスト入力とスクロールが可能なピッカーを提供する。
  • サイズがブレークポイントを超えた場合、カレンダーを左側に、ピッカーを右側に表示する。
  • 左側にカレンダー、右側にピッカーが表示されます。
  • サイズがブレークポイントより小さい場合、デフォルトではピッカーが表示される、
  • カレンダーとボタンの表示が切り替わります。
  • キーボードが表示されている間は、ピッカーだけが選択できます、
  • カレンダーはキーボードが表示されていない時にのみ選択できます。

Exapmle

Builder

final controller = BoardDateTimeController();

DateTime date = DateTime.now();

@override
Widget build(BuildContext context) {
    return BoardDateTimeBuilder(
        controller: controller,
        pickerType: DateTimePickerType.datetime
        builder: (context) {
            return Scaffold(
                appBar: AppBar(
                    title: Text('Example'),
                ),
                body: Center(
                    child: Text(BoardDateFormat('yyyy/MM/dd').format(date))
                ),
            );
        },
        onChange: (val) {
            setState(() => date = val);
        }
    );
}

showBoardDateTimePickerの内部実装を見てみた。

BoardDateTimePicker のモーダルボトムシートを表示する。

context 引数はボトムシートの[Navigator]と[Theme]を検索するために使用されます。
ボトムシート。

pickerType 引数はモードを表示するピッカーのタイプです。
[date] または [time] または [datetime].

valueNotifier は変更を検知して即座に通知するためのパラメータである。
ピッカー内で変更された場合、value に設定される。
すぐに変更コールバックを受け取ることができる。
指定の有無にかかわらず、ヘッダーのチェックボタンを押すと、選択された日付が返されます。
ヘッダーのチェックボタンを押すと、選択された日付が返されます。

initialDate と minimumDate と maximumDate は日付に関するパラメータである、
それぞれ 初期値、最小日付、最大日付である。

options はピッカーの表示をカスタマイズするためのオプションである。

breakpoint はワイド表示と標準表示を切り替える幅である。
radius はモーダル表示時の上部の左右の角を丸くする。

barrierColor, routeSettings, transitionAnimationController などは、 barrierColor, routeSettings, transitionAnimationController で指定するパラメータである。
通常のモーダルボトムシートで指定されるパラメータです、
パラメータの説明はそちらを参照してください。

final result = await showBoardDateTimePicker(
  context: context,
  pickerType: DateTimePickerType.datetime,
)

実行するとこんな感じです。

全体のコード
import 'package:board_datetime_picker/board_datetime_picker.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Board DateTime Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: const Color.fromARGB(255, 235, 235, 241),
        useMaterial3: false,
      ),
      // home: const Home(),
      home: const MyHomePage(title: 'Board DateTime Picker Example'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('text'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) =>
                    const MyHomePage(title: 'Board DateTime Picker Example'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = BoardDateTimeController();

  DateTimePickerType? opened;

  final List<GlobalKey<_ItemWidgetState>> keys = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey()
  ];

  final textController = BoardDateTimeTextController();

  @override
  Widget build(BuildContext context) {
    return BoardDateTimeBuilder<BoardDateTimeCommonResult>(
      controller: controller,
      resizeBottom: true,
      options: const BoardDateTimeOptions(
        boardTitle: 'Board Picker',
        languages: BoardPickerLanguages.en(),
      ),
      builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          backgroundColor: const Color.fromARGB(255, 245, 245, 250),
          body: Center(
            child: SingleChildScrollView(
              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 40),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'BoardDateTimeInputField: ',
                        style: Theme.of(context).textTheme.bodySmall,
                      ),
                      const SizedBox(width: 16),
                      SizedBox(
                        width: 160,
                        child: BoardDateTimeInputField(
                          controller: textController,
                          pickerType: DateTimePickerType.datetime,
                          options: const BoardDateTimeOptions(
                            languages: BoardPickerLanguages.en(),
                          ),
                          initialDate: DateTime.now(),
                          maximumDate: DateTime(2040),
                          minimumDate: DateTime(1900, 1, 1),
                          textStyle: Theme.of(context).textTheme.bodyMedium,
                          onChanged: (date) {
                            print('onchanged: $date');
                          },
                          onFocusChange: (val, date, text) {
                            print('on focus changed date: $val, $date, $text');
                          },
                          onResult: (p0) {
                            // print('on result: ${p0.hour}, ${p0.minute}');
                          },
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 60),
                  ItemWidget(
                    key: keys[0],
                    type: DateTimePickerType.datetime,
                    controller: controller,
                    onOpen: (type) => opened = type,
                  ),
                  const SizedBox(height: 24),
                  ItemWidget(
                    key: keys[1],
                    type: DateTimePickerType.date,
                    controller: controller,
                    onOpen: (type) => opened = type,
                  ),
                  const SizedBox(height: 24),
                  ItemWidget(
                    key: keys[2],
                    type: DateTimePickerType.time,
                    controller: controller,
                    onOpen: (type) => opened = type,
                  ),
                  const SizedBox(height: 24),
                  const ModalItem(),
                  const SizedBox(height: 24),
                ],
              ),
            ),
          ),
        );
      },
      onResult: (val) {},
      onChange: (val) {
        int index = -1;
        if (opened == DateTimePickerType.datetime) {
          index = 0;
        } else if (opened == DateTimePickerType.date) {
          index = 1;
        } else if (opened == DateTimePickerType.time) {
          index = 2;
        }
        if (index >= 0) keys[index].currentState?.update(val);
      },
    );
  }
}

class ItemWidget extends StatefulWidget {
  const ItemWidget({
    super.key,
    required this.type,
    required this.controller,
    required this.onOpen,
  });

  final DateTimePickerType type;
  final BoardDateTimeController controller;
  final void Function(DateTimePickerType type) onOpen;

  @override
  State<ItemWidget> createState() => _ItemWidgetState();
}

class _ItemWidgetState extends State<ItemWidget> {
  DateTime d = DateTime.now();

  void update(DateTime date) {
    setState(() {
      d = date;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      borderRadius: BorderRadius.circular(8),
      color: Theme.of(context).cardColor,
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: () {
          // Open without date specification
          // widget.controller.openPicker();
          widget.onOpen(widget.type);
          widget.controller.open(widget.type, d);
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
          child: Row(
            children: [
              Material(
                color: color,
                borderRadius: BorderRadius.circular(4),
                child: SizedBox(
                  height: 36,
                  width: 36,
                  child: Center(
                    child: Icon(
                      icon,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 20),
              Expanded(
                child: Text(
                  BoardDateFormat(format).format(d),
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),
              Text(
                title,
                style: Theme.of(context).textTheme.bodySmall,
              ),
            ],
          ),
        ),
      ),
    );
  }

  String get title {
    switch (widget.type) {
      case DateTimePickerType.date:
        return 'Date';
      case DateTimePickerType.datetime:
        return 'DateTime';
      case DateTimePickerType.time:
        return 'Time';
    }
  }

  IconData get icon {
    switch (widget.type) {
      case DateTimePickerType.date:
        return Icons.date_range_rounded;
      case DateTimePickerType.datetime:
        return Icons.date_range_rounded;
      case DateTimePickerType.time:
        return Icons.schedule_rounded;
    }
  }

  Color get color {
    switch (widget.type) {
      case DateTimePickerType.date:
        return Colors.blue;
      case DateTimePickerType.datetime:
        return Colors.orange;
      case DateTimePickerType.time:
        return Colors.pink;
    }
  }

  String get format {
    switch (widget.type) {
      case DateTimePickerType.date:
        return 'yyyy/MM/dd';
      case DateTimePickerType.datetime:
        return 'yyyy/MM/dd HH:mm';
      case DateTimePickerType.time:
        return 'HH:mm';
    }
  }
}

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

  @override
  State<ModalItem> createState() => _ModalItemState();
}

class _ModalItemState extends State<ModalItem> {
  DateTime d = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Material(
      borderRadius: BorderRadius.circular(8),
      color: Theme.of(context).cardColor,
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: () async {
          final result = await showBoardDateTimePicker(
            context: context,
            pickerType: DateTimePickerType.datetime,
            options: const BoardDateTimeOptions(
              languages: BoardPickerLanguages.en(),
              startDayOfWeek: DateTime.sunday,
              pickerFormat: PickerFormat.ymd,
              boardTitle: 'Board Picker',
              pickerSubTitles: BoardDateTimeItemTitles(year: 'year'),
            ),
            onResult: (val) {},
          );
          if (result != null) {
            setState(() => d = result);
          }
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
          child: Row(
            children: [
              Material(
                color: Theme.of(context).scaffoldBackgroundColor,
                borderRadius: BorderRadius.circular(4),
                child: const SizedBox(
                  height: 36,
                  width: 36,
                  child: Center(
                    child: Icon(
                      Icons.open_in_browser_rounded,
                    ),
                  ),
                ),
              ),
              const SizedBox(width: 20),
              Expanded(
                child: Text(
                  BoardDateFormat('yyyy/MM/dd HH:mm').format(d),
                  style: Theme.of(context).textTheme.bodyMedium,
                ),
              ),
              Text(
                'Show Dialog',
                style: Theme.of(context).textTheme.bodySmall,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

🧑‍🎓thoughts

今回は、見た目が可愛らしい日付を扱うUIライブラリを使ってみました。普通のDatePickerだとダサいなって人は試してみてはどうですか💁

Discussion