flutterdartuser-interfacesearchbar

Flutter align hint text to center vertically and horizontally in SearchBar Widget when height is less than default

I am trying to create a search bar in my app which includes a hint text in it. However my output of it looks weird where the hint text is not align to the center vertically on the SearchBar. The img and block below is my output and my code:

img

SearchBar(
  hintText: 'Search Employee',
  hintStyle: MaterialStateProperty.all(const TextStyle(color: Color(0xFFA1A5C0), fontSize: 11)),
  constraints: const BoxConstraints(minHeight: 28),
  leading: const Icon(Icons.search, size: 15),
  elevation: const MaterialStatePropertyAll(0),
  side: MaterialStateProperty.all(const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1))),
  shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(40))),
)
Solution

  • This was known bug and flutter team fixed this, but it takes time to merge into stable channel, so you can use TextField instead like this:

      TextField(
    decoration: InputDecoration(
      hintText: 'Search Employee',
      hintStyle: const TextStyle(color: Color(0xFFA1A5C0), fontSize: 18),
      border: OutlineInputBorder(
        borderSide: const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1)),
        borderRadius: BorderRadius.circular(40),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: const BorderSide(color: Color.fromRGBO(1, 1, 1, 0.1)),
        borderRadius: BorderRadius.circular(40),
      ),
      prefixIcon: const Icon(Icons.search, size: 36),
      prefixIconColor: Colors.black,
      constraints: const BoxConstraints(minHeight: 28),
      isDense: true,
      fillColor: Colors.white,
      filled: true,
    ),
  ),