[Widget]ドロップダウンで時間選択用のダイアログを作る

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Builder(builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('サンプル'),
            centerTitle: true,
            backgroundColor: Colors.green,
          ),
          body: Container(
            color: Colors.green.shade200,
            padding: const EdgeInsets.all(20.0),
            child: Center(
              child: ElevatedButton(
                child: const Text('時間を決める', style: TextStyle(fontSize: 30.0)),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) => const TimePickerDialog(
                            minTime: TimeOfDay(hour: 9, minute: 30),
                            maxTime: TimeOfDay(hour: 24, minute: 0),
                          ));
                },
              ),
            ),
          ),
        );
      }),
    );
  }
}
class TimePickerDialog extends StatefulWidget {
  const TimePickerDialog(
      {Key? key, required this.minTime, required this.maxTime})
      : super(key: key);
  final TimeOfDay minTime;
  final TimeOfDay maxTime;
  @override
  State<TimePickerDialog> createState() => _TimePickerDialogState();
}
class _TimePickerDialogState extends State<TimePickerDialog> {
  int hour = 0;
  int minute = 0;
  @override
  void initState() {
    hour = widget.minTime.hour;
    minute = widget.minTime.minute;
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
        title: const Text('時間を設定してください'),
        content: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton(
                items: selectableHours.map<DropdownMenuItem<int>>((int value) {
                  return DropdownMenuItem<int>(
                    value: value,
                    child: Text(
                      value.toString(),
                      style: const TextStyle(fontSize: 30.0),
                    ),
                  );
                }).toList(),
                value: hour,
                onChanged: (int? newValue) {
                  setState(() {
                    hour = newValue!;
                    minute = selectableMinMinute;
                  });
                }),
            const Text(
              ':',
              style: TextStyle(fontSize: 30.0),
            ),
            DropdownButton(
                items:
                    selectableMinutes.map<DropdownMenuItem<int>>((int value) {
                  return DropdownMenuItem<int>(
                    value: value,
                    child: Text(
                      value.toString(),
                      style: const TextStyle(fontSize: 30.0),
                    ),
                  );
                }).toList(),
                value: minute,
                onChanged: (int? newValue) {
                  setState(() {
                    minute = newValue!;
                  });
                }),
          ],
        ),
        actions: [
          ElevatedButton(
            child: const Text('Cancel'),
            onPressed: () => Navigator.pop(context),
          ),
          ElevatedButton(
            child: const Text('OK'),
            onPressed: () {
              print('selected time is $hour:$minute');
            },
          ),
        ]);
  }
  List<int> get selectableHours {
    return List<int>.generate((widget.maxTime.hour - widget.minTime.hour + 1),
        (int index) => widget.minTime.hour + index);
  }
  int get selectableMinMinute {
    return widget.minTime.hour == hour ? widget.minTime.minute : 0;
  }
  int get selectableMaxMinute {
    return widget.maxTime.hour == hour ? widget.maxTime.minute : 59;
  }
  List<int> get selectableMinutes {
    return List<int>.generate((selectableMaxMinute - selectableMinMinute + 1),
        (int index) => selectableMinMinute + index);
  }
}