How to add search icon to TextField in Flutter?

Viewed 2562

Is it possible to display hint in the TextField as in the image below?

search field

6 Answers

Try below code hope its helpful to you. Used prefixIcon for that.

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

Your result screen-> image

there is no proper way to add icon in hint, but you can try this alternative, use rich text on textfield as hint text, hide when tap on textfield and show with condition when textfield is empty and keyboard is hide:

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

Make use of the Prefix icon property and content padding in the textfield widget

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

RESULT

enter image description here

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