How to remove spacing between Icon and text in textfield – Flutter?

Issue

enter image description hereI 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)

Leave a Reply

Your email address will not be published. Required fields are marked *