Is it possible to display hint in the TextField
as in the image below?
Add a comment
|
4 Answers
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(() {});
}),
],
),
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',
),
),
-
I tried
prefixIcon
. But the problem is that both the icon and the hint should look in theCenter
. Nov 4, 2021 at 6:03
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