Flutter如何将TimePicker内嵌到表单Column而非弹窗并获取选中时间

需要将图示的时间选择器作为表单页面的普通内置组件嵌入Column中，不需要弹窗/对话框形式，同时可以正常获取用户选中的时间值。直接嵌套TimePickerDialog的写法无法正常工作，因为该组件是为弹窗路由场景设计的，直接嵌入会出现布局异常、交互失效、无法获取选中值的问题。

方案1：使用公开的内嵌时间选择器组件（推荐，稳定性高） #

不要直接使用弹窗类的TimePickerDialog，选择专门为内嵌场景设计的公开组件即可，以通用的flutter_time_picker_spinner为例：

1. 在项目pubspec.yaml中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_time_picker_spinner: ^2.0.5

2. 直接在Column中嵌入组件，通过回调获取选中时间，示例代码：

// 状态类中定义变量存储选中时间
TimeOfDay selectedTime = TimeOfDay.now();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 其余表单项...
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.44,
            child: FlutterTimePickerSpinner(
              is24HourMode: false, // 按需配置12/24小时制
              normalTextStyle: const TextStyle(fontSize: 18, color: Colors.grey),
              highlightedTextStyle: const TextStyle(fontSize: 24, color: Colors.black, fontWeight: FontWeight.w600),
              itemHeight: 50,
              spacing: 40,
              isForce2Digits: true,
              onTimeChange: (TimeOfDay newTime) {
                // 直接获取用户选中的最新时间，更新状态即可
                setState(() {
                  selectedTime = newTime;
                });
              },
            ),
          ),
          // 其余表单项...
        ],
      ),
    ),
  );
}

如果需要完全匹配系统原生TimePicker的输入式UI，可以使用方案2。

方案2：复用系统TimePicker内部渲染组件 #

系统TimePickerDialog内部实际承担选择交互的组件可以单独提取嵌入页面，不需要外层Dialog包装，示例代码：

// 状态类中定义
TimeOfDay selectedTime = TimeOfDay.now();
late final TimePickerModel _timeModel = TimePickerModel(
  initialTime: TimeOfDay.now(),
  timePickerMode: TimePickerMode.input, // 对应需要的输入模式
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        SizedBox(
          width: MediaQuery.of(context).size.width * 0.44,
          child: FittedBox(
            child: TimePickerInput(
              model: _timeModel,
              onChanged: (TimeOfDay? newTime) {
                if (newTime != null) {
                  selectedTime = newTime;
                }
              },
            ),
          ),
        )
      ],
    ),
  );
}

注意：该方案使用的是Flutter框架非公开内部API，不同Flutter版本可能存在类名、参数的破坏性变更，生产环境优先选择方案1。

直接嵌套TimePickerDialog不生效的核心原因是，Dialog组件设计上需要通过showDialog触发弹出，内部依赖路由的上下文和返回值传递机制，直接嵌入普通组件树无法触发它的完整生命周期逻辑。

内容的提问来源于stack exchange，提问作者Pranay Dhongade