Flutter如何实现两个TextField组件并排布局效果

问题背景 #

我是Flutter开发新手，当前尝试实现两个文本输入框并排摆放的效果，想要达成的目标效果如下图所示：

以下是我目前编写的单行文本输入框实现代码：

Padding(
   padding: const EdgeInsets.symmetric(horizontal: 25.0),
   child: Container(
     decoration: BoxDecoration(
       color: Colors.grey[200],
       border: Border.all(color: Colors.white),
       borderRadius: BorderRadius.circular(100),
     ),
     child: Padding(
       padding: const EdgeInsets.only(left: 20.0),
       child: TextField(
         decoration: InputDecoration(
           border: InputBorder.none,
           hintText: "Contact No",
         ),
       ),
     ),
   ),
 )

请问如何基于上述现有代码进行调整，实现两个TextField并排展示的效果？

实现方法 #

核心用Row横向布局组件实现并排效果，注意TextField属于无界宽度组件，直接放进Row会报横向溢出错误，需要给每个输入框外层套Expanded组件自动分配横向可用宽度。

调整后完整代码 #

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Row(
    children: [
      // 第一个输入框
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey[200],
            border: Border.all(color: Colors.white),
            borderRadius: BorderRadius.circular(100),
          ),
          child: const Padding(
            padding: EdgeInsets.only(left: 20.0),
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "Contact No",
              ),
            ),
          ),
        ),
      ),
      // 两个输入框中间间距，可按需调整宽度
      const SizedBox(width: 16),
      // 第二个输入框，修改hintText为你需要的提示文案即可
      Expanded(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.grey[200],
            border: Border.all(color: Colors.white),
            borderRadius: BorderRadius.circular(100),
          ),
          child: const Padding(
            padding: EdgeInsets.only(left: 20.0),
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "Password",
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

自定义调整说明 #

• 如果需要两个输入框宽度不等，给Expanded设置不同的flex参数即可，比如第一个设flex: 2、第二个设flex: 1，两个输入框就会按2:1的比例分配横向宽度
• 中间间距可以修改SizedBox的width值，适配你的设计要求
• 原有输入框的样式代码完全保留，不需要修改圆角、背景色、边框等已有配置

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