Flutter search bar with SilverAppBar()

Before come to the topic, it is important to have some knowledge about SilverAppBar(). As to the flutter documentation its introduction is as follows.

Sliver app bars are typically used as the first child of a CustomScrollView, which lets the app bar integrate with the scroll view so that it can vary in height according to the scroll offset or float above the other content in the scroll view. For a fixed-height app bar at the top of the screen see AppBar, which is used in the Scaffold.appBar slot. The AppBar displays the toolbar widgets, leading, title, and actions, above the bottom (if any). If a flexibleSpace widget is specified then it is stacked behind the toolbar and the bottom widget.

So if you are planning to integrate SilverAppBar() in your application, and you are troubling from where to put the search bar of the application, then this video is for you! The final result of our tutorial will look as follows.

So Let’s Start,

Initialize required variables State object /class:

_searchIcon is an Icon type object which holds the icon on the top right corner. Initially it keep the Icons.search as its value. But when after user pressing the icon it will switch the icon to Icons.close. So the variable should initialize in the state.

isSearchClicked is a bool type variable which keeps the current behavior of the search click. (Wether search bar is visible or not).

And finally we required a TextEditingController(). Which works as the controller of the search bar.

Implements the method to control the click button

As to the result of the function we should have to change the appearance of the icon in the right corner. So we use setState(). With the help of setState() we are able to notify the framework that the internal state of the object was changed. Then the modifications will be visible. Inside the setState() method we are checking whether the current icon is equaled to the search icon or it equals to close icon. So as to the icon, further operation will be changed. If the current icon is equaled to the search icon then it will change to close icon and also isSearchClicked variable also getting update to true. As well as if the icon equals to close icon then the ìcon also getting change back to the search icon and isSearchClicked variable false updates to false.

Setup the SilverAppBar() widget

We are initializing the search button inside the actions of the Widget. Then we are setting the expandedHeight of the SilverAppBar(). Then setting floating value to false. So the app bar will not visible as soon as the user scrolls towards. By setting pinned the value to the true app bar will remain visible at the start of the scroll view.

Then we should have to initialize the flexibleSpace. This is where the real appearance occurred. Once the user clicks on the search icon FlexibleSpaceBar title will getting change to the search bar text field. As well as if the user clicks on the close icon again the app bar title will appear. It depends on the isSearchClicked variable.

SetUp the Body of the SilverAppBar()

Since this is a tutorial project, I used a hardcoded list view. So you are free to use your listview here.

Finally here is the source code for the tutorial. And write a response if you are having an issue implementing the SilverAppBar() in your projects.