How to add search icon to TextField in Flutter?

Question

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

search field

Ravindra S. Patil · Answer 1 · 2023-01-09T04:41:13.660

3

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

edited Jan 09 '23 at 04:41

answered Nov 04 '21 at 04:55

Ravindra S. Patil

11,757
3
13
40

I tried `prefixIcon`. But the problem is that both the icon and the hint should look in the `Center`. – Bat-Erdene Amarsaikhan Nov 04 '21 at 06:03

score 1 · Accepted Answer · answered Nov 04 '21 at 06:22

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

score 0 · Answer 3 · edited Nov 04 '21 at 08:38

0

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

edited Nov 04 '21 at 08:38

gisly

673
1
8
30

answered Nov 04 '21 at 04:20

Dammy Richie

41
5

score 0 · Answer 4 · answered Nov 04 '21 at 07:40

            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

score 0 · Answer 5 · answered May 25 '22 at 14:16

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

score 0 · Answer 6 · answered Jun 25 '22 at 11:03

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

How to add search icon to TextField in Flutter?

6 Answers6