How to make a search bar in Flutter

We will see how to make a responsive search bar in Flutter using simple widgets.

We will put everything in a Row widget. We want the search bar to take the complete width horizontally, so we will put an Expanded widget inside the Row widget.

We will make sure the search bar has distinctive color then the background of the app.

So we will put in inside a Container(), so that we can use BoxDecoration for background color with rounded border.

And another Row widget at the end, so that we can put text and icon horizontally at the same line.

 Row(
                children: [
                  Expanded(child: Container(
                      margin: EdgeInsets.only(left: 20, right: 20,
                          bottom: Dimensions.width10
                      ),
                      height: Dimensions.iconBackSize,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          color: Colors.white
                      ),
                    child: GestureDetector(
                      onTap: ()=>Get.toNamed(RouteHelper.getSearchRoute()),
                      child: Padding(
                        padding: EdgeInsets.symmetric( horizontal:10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("search_for_food"),

                            Icon(Icons.search),
                          ],
                        ),
                      ),
                    ),
                  )),


                ],
              )