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,
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
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.
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
Body of the
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.