如何将按钮放入 Textformfield 中？

Question

我正在尝试创建一个内部有按钮的文本表单字段。请检查屏幕截图。

这就是我所做的

TextField(
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                          hintText: "Search",
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(2.w),
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                          suffixIcon: ElevatedButton(
                            child: Text("Search"),
                            onPressed: () {},
                          ),
                        ),
                      ),

但这是我的脚本的结果

按钮与文本表单字段重叠，我该如何修复它？

Answer 1

尝试下面的代码希望对您有帮助。

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    hintText: "Search",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide(
        color: Colors.black,
        width: 1,
        style: BorderStyle.solid,
      ),
    ),
    suffixIcon: Container(
      margin: EdgeInsets.all(8),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: Size(100, 50),
          backgroundColor: Colors.red,
          shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(30.0),
          ),
        ),
        child: Text("Search"),
        onPressed: () {},
      ),
    ),
  ),
),

结果屏幕->

Answer 2

用填充包裹你的后缀，例如：

   suffixIcon: Padding(
                  padding: EdgeInsets.only(right: 20), //here 
                  child: ElevatedButton(
                    style: ButtonStyle(
                        shape:
                            MaterialStateProperty.all<RoundedRectangleBorder>(
                                RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(20.0),
                                    side: BorderSide(color: Colors.red)))),
                    child: Text("Search"),
                    onPressed: () {},
                  ),
                )

Answer 3

输入类型文本和一些CSS属性可以完成这项工作

input[type="text"] {
    width: 220px;
    height: 30px;
    padding-right: 50px;
    border-radius: 5px;
}

input[type="submit"] {
    margin-left: -60px;
    height: 25px;
    width: 55px;
    background: red;
    color: white;
    border: 0;
    border-radius: 5px;
}

<input type="text"><input type="submit" value="Search">