Flutter Flatter如何创建右侧有两个图标的文本字段，与图像中的相同？

如何创建与图像相同的文本字段小部件，在x上我需要清除输入，在搜索图标上我需要调用一些不重要的方法。

这是目前没有x图标的代码

TextField(
              onChanged: (value) {
                userTappedSearch(value);
              },
              decoration: InputDecoration(
                  hintText: "search",
                  suffixIcon: 
                    Container(
                        padding: const EdgeInsets.symmetric(
                            horizontal: 0.0, vertical: 20),
                        decoration: new BoxDecoration(
                            color: SBColor.navyBlue,
                            borderRadius: new BorderRadius.only(
                              topRight: const Radius.circular(20.0),
                            )),
                        child: IconButton(
                            icon: Icon(Icons.search),
                            color: SBColor.white,
                            onPressed: () {})),
                  border: OutlineInputBorder(
                      borderRadius: new BorderRadius.only(
                    topRight: const Radius.circular(20.0),
                  ))),
            ),

---

将

图标按钮

包装在

行（）

中，然后将两个

图标按钮

作为子按钮，您可以自定义每个图标的背景色，以在图像中创建搜索栏（X上透明）

使用文本字段和行内的容器来实现：

TextEditingController _textController = TextEditingController();

final border = OutlineInputBorder(
  borderRadius: BorderRadius.horizontal(left: Radius.circular(5))
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: <Widget>[
            Expanded(
              child: TextField(
                controller: _textController,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10),
                  hintText: 'Search',
                  border: border,
                  errorBorder: border,
                  disabledBorder: border,
                  focusedBorder: border,
                  focusedErrorBorder: border,
                  suffixIcon: IconButton(
                    icon: Icon(Icons.clear),
                    onPressed: () {
                      _textController.clear();
                    },
                  ),
                ),
              ),
            ),
            Container(
              decoration: BoxDecoration(
                color: Colors.blue[800],
                borderRadius: BorderRadius.only(topRight: Radius.circular(10))
              ),
              child: IconButton(icon: Icon(Icons.search, color: Colors.white,), onPressed: (){}),
            )
          ],
        ),
      ),
    ),
  );
} 

TextEditingController\u textController=TextEditingController（）；
最终边框=大纲输入边框(
边界半径：边界半径。水平（左：半径。圆形（5））
);
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：中(
孩子：填充(
填充：常数边集全部（8.0），
孩子：排(
儿童：[
扩大(
孩子：TextField(
控制器：_textController，
装饰：输入装饰(
contentPadding:EdgeInsets.all（10），
hintText:'搜索'，
边界:边界,，
错误边界：边界，
禁用顺序：边界，
焦点顺序：边界，
focusedErrorBorder：边界，
后缀：图标按钮(
图标：图标（图标。清除），
已按下：（）{
_textController.clear（）；
},
),
),
),
),
容器(
装饰：盒子装饰(
颜色：颜色。蓝色[800]，
边界半径：仅限边界半径（右上角：半径。圆形（10））
),
子项：图标按钮（图标：图标（Icons.search，颜色：Colors.white，），ON按下：（）{}），
)
],
),
),
),
);
} 

结果:

---

我更喜欢使用

文本字段的内置属性。您可以轻松地使用任意多个图标

例如：

prefixIcon: IconButton(
  onPressed: () {
    print('search button pressed');
  },
  icon: Icon(Icons.search),
),
suffixIcon: Container(
  width: 100,
  child: Row(
    children: [
      IconButton(
        onPressed: () {
          print('add button pressed');
        },
        icon: Icon(Icons.add),
      ),
      IconButton(
        onPressed: () {
          print('mic button pressed');
        },
        icon: Icon(Icons.mic),
      ),
    ],
  ),
),

因此，您会得到这样的
TextField
（或
TextFormField
）

如果我这样做，则键入的文本将不可见，然后将后缀图标更改为X，并将文本字段换行，搜索按钮作为第二个子按钮（或将两个按钮都作为子按钮）