How do I create a search Bar with outline Border in AppBar in Flutter?

Question

It returns a SearchBar in whole AppBar but I need a Search Bar with border. Please see the Example Below:

https://i.stack.imgur.com/O1NRb.png

I do need a SearchBar of this design. How can I do it?....

Answer 1

You can do this by using a TextField and styling it according to your needs.

Inside AppBar, I've used a Row for the title parameter. Inside that Row, I have the title text and the searchbar textfield.

Code:

appBar: AppBar(
    title: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        const Text("Flutter Demo"),
        const SizedBox(
          width: 120,
        ), // SizedBox
        Expanded(
          child: TextField(
            decoration: InputDecoration(
              filled: true,
              fillColor: const Color(0xFFFFFFFF),
              isDense: true,
              contentPadding: const EdgeInsets.symmetric(horizontal: 15.0),
              /* -- Text and Icon -- */
              hintText: "Search Products...",
              hintStyle: const TextStyle(
                fontSize: 18,
                color: Color(0xFFB3B1B1),
              ), // TextStyle
              suffixIcon: const Icon(
                Icons.search,
                size: 26,
                color: Colors.black54,
              ), // Icon
              /* -- Border Styling -- */
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(45.0),
                borderSide: const BorderSide(
                  width: 2.0,
                  color: Color(0xFFFF0000),
                ), // BorderSide
              ), // OutlineInputBorder
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(45.0),
                borderSide: const BorderSide(
                  width: 2.0,
                  color: Colors.grey,
                ), // BorderSide
              ), // OutlineInputBorder
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(45.0),
                borderSide: const BorderSide(
                  width: 2.0,
                  color: Colors.grey,
                ), // BorderSide
              ), // OutlineInputBorder
            ), // InputDecoration
          ), // TextField
        ), // Expanded
      ],
    ), // Row
  ), // Appbar

You can style it further according to your application.

Image:

Answer 2

What you're doing looks pretty strange to me, consider implementing the search bar the proper way, as show in this article: https://dev.to/luizeduardotj/search-bar-in-flutter-33e1

Answer 3

why can't you wrap the search icon with container and give a box decorations.

Container(width: 200,height: 200,padding: EdgeInsets.all(5),child: Text(''),decoration: BoxDecoration(color: Colors.yellow[100],border: Border.all(color: Colors.red, width: 5,)),),