You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中如何让Dialog/Form内的TextFormField占满可用空间?

Flutter Web Dialog中TextFormField占满可用空间问题及错误排查

我在Flutter 3.0.5(Web Chrome环境)中实现了如下Dialog/Form:

Future<void> showInformationDialog(BuildContext context) async {
    double screenWidth = MediaQuery.of(context).size.width;
    double screenHeight = MediaQuery.of(context).size.height;
    return await showDialog(
        context: context,
        builder: (context) {
          return StatefulBuilder(builder: (context, setState) {
            return AlertDialog(
              insetPadding: const EdgeInsets.all(10),
              content: Row(children: [
                SizedBox(
                    width: screenWidth * 0.6,
                    height: screenHeight * 0.5,
                    child: Form(
                      key: _formKey,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          TextFormField(
                            controller: _titleEditingController,
                            validator: (value) {
                              return value!.isNotEmpty ? null : "Title";
                            },
                            decoration: const InputDecoration(hintText: "Title"),
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                child:
                                    TextField(
                                      enabled: false,
                                      controller: _dateController,
                                    ),
                              ),
                              ElevatedButton(
                                onPressed: () {
                                  _restorableDatePickerRouteFuture.present();
                                },
                                child: const Icon(Icons.calendar_month),
                              )
                            ],
                          ),
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Expanded(
                                child:
                                TextField(
                                  enabled: false,
                                  controller: _timeController,
                                ),
                              ),
                              ElevatedButton(
                                onPressed: () {
                                  _displayTimeDialog();
                                },
                                child: const Icon(Icons.access_time_outlined),
                              )
                            ],
                          ),
                          const SizedBox(height: 30,),
                          TextFormField(
                            controller: _detailsEditingController,
                            keyboardType: TextInputType.multiline,
                            maxLines: null,
                            decoration: const InputDecoration(
                                hintText: "Enter Task Details",
                                border: OutlineInputBorder(
                                    borderSide: BorderSide(width: 2)
                                ),
                            ),
                          ),
                        ],
                  )))]),
              title: const Text('Create Task'),
              actions: <Widget>[
                InkWell(
                  child: const Text('OK'),
                  onTap: () {
                    if (_formKey.currentState!.validate()) {
                      Navigator.of(context).pop();
                    }
                  },
                ),
              ],
            );
          });
        });
  }

问题1:TextFormField无法占满可用空间

为该Dialog设置了百分比宽高,但其中的TextFormField无法自动占满全部可用空间,且预定义行数的方式无法适配所有场景。请问如何让TextFormField能够占满可用空间?

问题2:尝试解决方案后出现的错误

尝试相关解决方案后,出现如下错误:

hitTest()方法被调用在RenderBox: RenderConstrainedBox#c7750 relayoutBoundary=up1上:
需要合成
创建者: ConstrainedBox ← Align ← MediaQuery ← Padding ← AnimatedPadding ← Dialog ← AlertDialog ← StatefulBuilder ← Builder ← DefaultTextStyle ← CaptureAll ← MediaQuery ← ⋯
父数据: offset=Offset(0.0, 0.0) (可使用尺寸)
约束条件: BoxConstraints(0.0<=w<=1491.0, 0.0<=h<=1311.0)
尺寸: 缺失
附加约束: BoxConstraints(280.0<=w<=Infinity, 0.0<=h<=Infinity)
尽管此节点未标记为需要布局,但其尺寸未设置。
RenderBox对象在进行点击测试前必须有明确的尺寸。确保相关RenderBox在布局期间设置其尺寸。
at Object.throw
[as throw] (http://localhost:38447/dart_sdk.js:5080:11)


内容的提问来源于stack exchange,提问作者Randomize

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.23 13:27:18