首页 > 解决方案 > ShowTimePicker 我需要在文本字段上显示时间选择器

问题描述

defultFormField(
                          controller: timeController,
                          onSubmit: () {},
                          onTap: () {
                            showTimePicker(
                              useRootNavigator: true,
                              context: context,
                              initialTime: TimeOfDay.now(),
                            ).then((value) {
                              print(value);
                            });
                          },

and this is the components 

   Widget defultFormField({
  required  Function onTap,
  required Function onSubmit,
  required TextEditingController controller,
  // required TextInputType type,
  required String text,
  required IconData prefix,
  required Function valedate,
}) =>
    TextFormField(
      controller: controller,
      // keyboardType: type,
      onTap: () {},
      onFieldSubmitted: (s) {},
      validator: (s) {
        valedate();
      },
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: text,
        prefixIcon: Icon(prefix),
      ),
    );

标签: fluttermobile

解决方案


试试下面的代码希望它对你有帮助。或者你也可以使用这个包。

声明 TimeOfDay 类

TimeOfDay _time = TimeOfDay(hour: 00, minute: 00);

为 TimePicker 创建函数

void _selectTime() async {
    final TimeOfDay? newTime = await showTimePicker(
      context: context,
      initialTime: _time,
    );
    if (newTime != null) {
      setState(() {
        _time = newTime;
      });
    }
  }

你的小部件

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextFormField(
            decoration: InputDecoration(
              hintText: 'Select Time',
              border: OutlineInputBorder(),
            ),
            onTap: _selectTime,
          ),
        ),
        SizedBox(height: 8),
        Text(
          'Selected time: ${_time.format(context)}',
        ),
      ],
    ),

推荐阅读