如何在 Flutter 中将搜索图标添加到 TextField？

Question

是否可以在TextField中显示如下图所示的提示？

Answer 1

在文本字段小部件中使用 Prefix icon 属性和内容填充

Answer 2

试试下面的代码希望对你有帮助。为此使用 prefixIcon。

   TextField(
        decoration: InputDecoration(
          prefixIcon: Icon(Icons.search),
          border: OutlineInputBorder(),
          hintText: 'Search Tech Talk',
        ),
      ),

您的结果屏幕->

Answer 3

没有在提示中添加图标的正确方法，但您可以尝试这种替代方法，使用文本字段上的富文本作为提示文本，点击文本字段时隐藏，当文本字段为空且键盘隐藏时显示条件：

            Stack(
              alignment: AlignmentDirectional.center,
              children: [
                Offstage(
                  offstage: _isHide,
                  child: IgnorePointer(
                    ignoring: true,
                    child: Text.rich(
                      TextSpan(
                        children: [
                          WidgetSpan(
                            child: Icon(
                              Icons.search,
                              color: Colors.grey,
                            ),
                          ),
                          TextSpan(
                            text: "blablablablabla",
                            style: TextStyle(color: Colors.grey),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                TextField(onTap: () {
                  _isHide = true;
                  setState(() {});
                }),
              ],
            ),

Answer 4

            TextField(
                onChanged: (value){
               searchData(st = value.trim().toLowerCase());
                 // Method For Searching 
                           },
                    decoration: InputDecoration(
                    hintText: "Search Data",
                    prefixIcon: Icon(Icons.search),
                    border: OutlineInputBorder(
                     borderRadius:
                    BorderRadius.all(Radius.circular(7.0)),
                              ),
                            ),
                          ),

结果

Answer 5

SizedBox(
              height: 40.h,
              child: TextField(
                decoration: InputDecoration(
                  fillColor: ColorUtils.COLOR_GRAY_AAAAAA[12],
                  filled: true,
                  contentPadding: EdgeInsets.symmetric(vertical: 6.h, horizontal: 12.w),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(8.r)),
                    borderSide: BorderSide.none,
                  ),
                  hintText: 'input_order_code'.tr,
                  hintStyle: TextStyleUtils.sizeText15Weight400().copyWith(color: ColorUtils.COLOR_GRAY_AAAAAA),
                  prefixIcon: Icon(Icons.search),
                ),
                style: TextStyleUtils.sizeText15Weight400().copyWith(color: ColorUtils.COLOR_GRAY_363636),
              ),
            ),

如何在 Flutter 中将搜索图标添加到 TextField？

How to add search icon to TextField in Flutter?

flutter

flutter-layout

flutter-textformfield