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

Question

是否可以在TextField中像下图一样显示提示信息？

- Bat-Erdene Amarsaikhan

Answer 1

尝试下面的代码，希望对你有所帮助。使用 prefixIcon 实现该功能。

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

您的结果屏幕->

- Ravindra S. Patil

---

我尝试了 prefixIcon。但问题是图标和提示都应该在中心位置。 - Bat-Erdene Amarsaikhan

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(() {});
                }),
              ],
            ),

- Jim

Answer 3

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

- Aneesh A

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

结果

- Awais Rehman

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

- Mr N

Answer 6

利用文本字段部件中的“前缀图标”属性和内容填充。

- Dammy Richie