⏰

Flutter TimePicker の使い所　

に公開
Flutter
Dart
tech

使ってみたら意外とよかった

最近時間を扱うアプリの開発に携わっているのですが、毎回、ドラムロールとか使ってましたね。
でもTimePicker使ったらいい感じのが作れた。

official
時間のチートシートで参考になった記事

なぜ使おうと思ったのか？

Cloud Firestoreに、DateTime -> Timestampでデータを保存したが、日付が必要ないことに気づいた。確かに入らないな💡

数字だけでいいなら、Dartだと、Int、Firestoreだと、numberになる。

DateTime.now().hourにすれば、9:00を　９にできる。正確な時間は出せないけど。

void main() {
  // 例えば、今9:00。正確には9:15だけど。
  DateTime? now = DateTime.now();
  print(now.hour);
}

雑なコードですが、こんな感じで保存してやればできます。

🔧ロジック

// open_time
  TimeOfDay open_time = TimeOfDay.now();
  // close_time
  TimeOfDay close_time = TimeOfDay.now();
  DateTime? now = DateTime.now();

  // open_time TimePicker
  Future<void> _selectOpenTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: open_time,
    );
    if (picked != null && picked != open_time) {
      setState(() {
        open_time = picked;
      });
    }
  }

  // close_time TimePicker
  Future<void> _selectCloseTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: close_time,
    );
    if (picked != null && picked != close_time) {
      setState(() {
        close_time = picked;
      });
    }
  }

UI側はこんな感じですね。とあるソースコードを削って作りました。お店の開店時間と閉店時間を保存する管理画面で使ったロジックですね。

Row(
              children: <Widget>[
                const Text('営業時間'),
                const SizedBox(width: 16.0),
                ElevatedButton(
                  onPressed: () {
                    _selectOpenTime(context);
                  },
                  child: const Text('開店時間'),
                ),
                const SizedBox(width: 16.0),
                Text('${open_time.hour}:${open_time.minute}'),
              ],
            ),
            const SizedBox(height: 16.0),
            Row(
              children: <Widget>[
                const Text('営業時間'),
                const SizedBox(width: 16.0),
                ElevatedButton(
                  onPressed: () {
                    _selectCloseTime(context);
                  },
                  child: const Text('閉店時間'),
                ),
                const SizedBox(width: 16.0),
                Text('${close_time.hour}:${close_time.minute}'),
              ],
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () async {
                if (_formKey.currentState!.validate()) {
                  // フォームが有効な場合の処理
                  // 例: データベースにデータを送信
                  try {
                    final db = FirebaseFirestore.instance;
                    await db.collection('shop').add({
                      'open_time':  open_time.hour,
                      'close_time': close_time.hour,
                      'created_at': Timestamp.fromDate(now!),
                      'updated_at': Timestamp.fromDate(now!),
                    });
                    if(mounted) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(
                        content: Text('送信が完了しました'),
                      ),
                    );
                    }
                  } on Exception catch (e) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text('エラーが発生しました: $e'),
                      ),
                    );
                  }
                }
              },
              child: const Text('送信'),
            ),

[ボタン押すと表示されるUI]

感想

時間を扱うロジックを色々考えているが、TimePicker使ってみて、これはいいなと思い他にも機能の試作で使ってみたいなと思いました。

Discussion