Flutter报错RenderCustomMultiChildLayoutBox无限尺寸，如何修复？

问题原因 #

报错源于Row内的TextField未设置水平约束，导致它试图占用无限宽度，进而让布局系统无法计算出合理的尺寸。另外，嵌套在SingleChildScrollView内的固定高度SizedBox属于冗余设置，可能引发内容溢出问题。

修复步骤 #

1. 为Row内的TextField添加Expanded包裹：让TextField占据Row的剩余水平空间，限制其宽度为有限值。
2. 移除SingleChildScrollView内的固定高度SizedBox：SingleChildScrollView本身支持内容超出视口时滚动，无需额外固定高度约束。

修正后的完整代码 #

import 'package:flutter/material.dart';

import '../mediaquery.dart';

class DropdownTextfield extends StatefulWidget {
  @override
  _DropdownTextfieldState createState() => _DropdownTextfieldState();
}

class _DropdownTextfieldState extends State<DropdownTextfield> {

  var properties = [
    'kg',
    'yd',
    'm',
  ];

  String dropdownvalue = 'kg';
  String _property1 = '';
  String _property2 = '';
  String _property3 = '';
  bool _isOptionSelected = false;

  TextEditingController quantitycontroller = TextEditingController();

  var selectedOption;
  TextEditingController textfieldValue = TextEditingController();
  final List<String> options = [];

  @override
  void initState() {
    super.initState();
    selectedOption = options.isNotEmpty ? options[0] : null;
  }

  @override
  Widget build(BuildContext context) {

    final screenHeight = ScreenInfo.screenHeight(context);
    final screenWidth = ScreenInfo.screenWidth(context);

    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            TextField(
              onChanged: (value) {
                setState(() {
                  textfieldValue.text = value;
                });
              },
            ),
            DropdownButton<String>(
              value: selectedOption,
              onChanged: (value) {
                setState(() {
                  selectedOption = value!;
                  _isOptionSelected = true;
                });
              },
              hint: const Text('Input from Text Field Above'),
              items: options.map((option) {
                return DropdownMenuItem<String>(
                  value: option,
                  child: Text(option),
                );
              }).toList(),
            ),
            TextButton(
              onPressed: () {
                setState(() {
                  options.add(textfieldValue.text);
                });
              },
              child: const Text("Add Option"),
            ),
            Visibility(
              visible: _isOptionSelected,
              child: Column(
                children: <Widget>[
                  Row(
                    children: [
                      // 添加Expanded包裹TextField
                      Expanded(
                        child: TextField(
                          controller: quantitycontroller,
                          decoration: const InputDecoration(labelText: "Quantity"),
                          onChanged: (value) {
                            setState(() {
                              _property1 = value;
                            });
                          },
                        ),
                      ),
                      const SizedBox(width: 10,),
                      DropdownButton(
                        value: dropdownvalue,
                        items: properties.map((properties) {
                          return DropdownMenuItem(
                            value: properties,
                            child: Text(properties),
                          );
                        }).toList(),
                        onChanged: (String? newValue){
                          setState(() {
                            dropdownvalue = newValue!;
                          });
                        },
                      )
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Bryant Anthony