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

Question

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

Answer 1

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

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

您的结果屏幕->

Answer 2

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

            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 3

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

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),
              ),
            ),

Answer 6

               SizedBox(
              
                height: 50,
                child: TextField(
                
                  cursorHeight: 25,
                  decoration: InputDecoration(
                      prefixIcon: Icon(Icons.search),
                      fillColor: Colors.white,
                      filled: true,
                      border: OutlineInputBorder(
                        
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                        
                      ),
                      hintText: 'Search Here...'),
                ),
              )