Flutter：如何将 TextField 放入行和容器中答案

【问题标题】：Flutter: How to fit TextField inside row and containerFlutter：如何将 TextField 放入行和容器中
【发布时间】：2021-11-10 03:30:43
【问题描述】：

如何将 TextFiled 放入 row > 容器中。我不知道为什么 TextField 它超出了容器，而且 textField 的高度也没有正确调整。谁能帮忙...

 child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 30),
              child: Container(
                decoration: BoxDecoration(
                    color: Colors.pink,
                    borderRadius: BorderRadius.circular(50)),
                child: Row(
                  children: [
                    Icon(Icons.verified_user_outlined),
                    SizedBox(width: 5),
                    Container(
                      width: 200,
                      height: 30,
                      color: Colors.orange,
                      child: TextField(
                        decoration: InputDecoration(
                          hintText: 'Enter Your Mobile Number',
                          errorText: '',
                          fillColor: Colors.white,
                          border: OutlineInputBorder(),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            TextButton(onPressed: () => {}, child: Text("Continue")),
          ],[![enter image description here][1]][1]

【问题讨论】：

标签： flutter

【解决方案1】：

我认为这是因为您对容器的宽度和高度进行了硬编码。尽量不要设置容器的宽度和高度，这将根据容器的子级动态改变容器的宽度和高度。欲了解更多信息，您可以访问这里dynamic container

【讨论】：

【解决方案2】：

尝试在子级上使用 Expanded 小部件和 flex

child: Row(
  children: [
    Expanded(
      flex: 1,
      child: Icon(Icons.verified_user_outlined)),
    Expanded(
      flex: 1,
      child: SizedBox(width: 5)),
    Expanded(
      flex: 4,
      child: Container(

【讨论】：

【解决方案3】：

Use SizedBox widget to your textfiled
Or use Expand widget with flex property

例如：

SizedBox(
width:20.0,
heigh : 30.0,
child: //text field 
),

Expanded(
flex:1,
child: //text field 
),

【讨论】：