[Solved] How to add search icon to TextField in Flutter?

Question

Asked by Bat-Erdene A on November 04, 2021 (source).

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

search field

Answer

Question answered by Jim C (source).

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(() {});
                }),
              ],
            ),
FLUTTER FLUTTER-LAYOUT FLUTTER-TEXTFORMFIELD
SHARE: