Issue
I am new to flutter and I am creating a search bar, for that, I have used TextField and added prefix icon but I am getting some extra spaces in between icon and input texts.
Please let me know how can I remove or reduce the space ?
Below is my code:
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
icon: IconButton(
icon: Icon(Icons.search),
color: Colors.pink,
onPressed: () {},
),
hintText: "Search for restaurant",
hintStyle: TextStyle(fontSize: 15),
onChanged: (input){
print(input);
},
)
Solution
You can use prefixIcon
instead of icon
, by default it won’t occupy space in between text and icon.
TextField(
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: IconButton(
icon: Icon(
Icons.search,
color: Colors.pink,
),
onPressed: () {},
),
hintText: "Search for restaurant",
hintStyle: TextStyle(fontSize: 15),
),
onChanged: (input) {
print(input);
},
),
Answered By – Roshini
Answer Checked By – Jay B. (FlutterFixes Admin)