如何将按钮放入 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: () {},
                          ),
                        ),
                      ),

但这是我的脚本的结果

该按钮与 Textformfield 重叠，我该如何修复它？

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),
          primary: Colors.red,
          shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(30.0),
          ),
        ),
        child: Text("Search"),
        onPressed: () {},
      ),
    ),
  ),
),

结果屏幕->