Flutter is renowned for the versatility it provides to a broad range of applications, including banking apps, e-commerce sites, and educational programmes, among many others. Widgets, which serve as basic building blocks for intricate applications, enable all of this. Every app may be dissected into a number of components, some universal to all apps and others unique to each one.

This essay is based on the search bar, one of the more universal elements found in many different apps. To find a specific piece of data in a database, utilise the search bar.

Using the box decoration’s many features and Flutter’s container widget, we will be creating a search bar from scratch in this post.

The search bar-equipped app will

Setting up a sample Flutter app

The first step is to create a new project using the Flutter create command:

Next, we need to clear out the content of the main.dart file and create a new MaterialApp:

This app is designed to be easier to set up, therefore we’re utilising Material Design; instead of developing the app itself, we’ll be concentrating on making the search bar.

Let’s now construct a brand-new stateful widget called HomeScreen and assign it to the MaterialApp’s home property:

As you can see, I updated this app’s code above with an appBar and a title, among other elements. Once more, these are optional elements that we can overlook in favour of concentrating on developing the search bar, but they can be useful if you are using this tutorial to hone your app-building abilities.

Creating a search button

The next step is to create the search button. The AppBar provides us with a property named actions, a collection we can use to list various activities:

We will use the IconButton widget since we are creating a button that, when clicked, displays the search bar. When the widget is pressed, a little animation will appear to show that the app recognised the user’s choices. As you can see in the image below, I have selected the magnifying glass icon to symbolise “search.” We pass in the name to the icon parameter.

Our app as it is right now is seen in the following image:

In order to cause the state rebuild that will display the text field, we must implement the onPressed feature. Also, after the text field is displayed, the existing magnifying glass search icon has to be changed to a “cancel” icon. As its name suggests, the cancel button will be used to end the search process.

The next step entails creating an icon and a widget as two variables inside the HomeScreen widget. They will hold the AppBar’s title and the default search button.

We will pass them into variables and then pass the variables everywhere they are needed, as opposed to hard coding them as we did previously:

Managing the state

The app’s state has to be updated since we want the text field to appear in the app bar when the search button is tapped. To update the state for this article, we will use the setState({}) function.

The setState function is called in the IconButton’s onPressed function to update the state of the variables we previously declared, namely the customIcon and customSearchBar variables.

Next, in order to choose the right choice, we execute an if-else condition to verify the current icon:

At the moment, it determines whether the customIcon is a searchIcon and, if so, acts accordingly. It sets the variables to their default or initial values if it’s not a search icon:

Full Code here

Finally, our search bar has been fully implemented!

Output Here