Stateful Widgets in flutter and Implementing basic search
Widgets in flutter are one of the two kinds — stateless or stateful. Most developers who are new to flutter don’t have any problem in understading the stateless widget but often get confused grasping the stateful widget. Through this article, I would try to explain stateful widgets in flutter as simple as possible and we would also develop a basic search bar and a list that changes each time the user query changes just like the suggessions on the google search that changes on each key you press.
Understanding the state
Just by observing the names, its evident that stateless widgets are the ones that don’t have state while stateful widgets possess some state. But, what exactly is this state? I will draw the analogy by taking two very common objects from the real life — a chair and a bulb.
A chair doesn’t have a state in a way that it doesn’t change its appearance or anything. A light bulb, on the other hand has states — ON and OFF. It glows when switch is turned ON. Thus, a light bulb changes its state when its switch is toggled. Thus, a chair is a stateless object while a light bulb is a stateful object in real life. Similarly, there are stateless and stateful widgets in flutter. A stateless widget needs to be built only once since it stays the same afterwards while a stateful widget is rebuilt each time their state changes. Its important to notice that they are rebuilt not changed when the state changes. This is because widgets in flutter are immutable i.e once built they don’t change. Thus when even a single property of a stateful widget changes , the entire widget is built again with updated properties.
Stateful widgets in action
I hope you know have some idea of state and get the basic difference between the stateless and the stateful widgets. With that, let’s just dive into code and see the stateful widgets in action. The boilerplate code of stateful widgets look something like this. As you can see, we have made our HomePage as a stateful widget since the list it would display would change when the query in the search changes.
As you can see, here we have two classes unlike the stateless widget. One is the HomePage widget object and the other is the state object. HomePage widget also overrides a method createState which returns the instance of our HomePageState. Its the state object build method that would be called every time something in the state is changed. Now, we have to make two things — one is the searchbar where we would type the query and second is the list that would change according to the query. Let’s first make the searchbar.
This is the code for our searchbar. Much of this code is easy to understand. We would be passing a few things to this widget. hint, to tell the user what to type, an optional suffix icon and onSearch function. Remember, in dart, functions can be passed just like any other object. The TextField widget in flutter gives us an onChanged callback function that is called everytime the text in the text field is changed. It also gives us the updated text as the argument to the callback function. So, we are taking the updated text and calling the onSearch function with that updated text. See, its a good idea in flutter to make your own custom widgets in a seperate file rather than just writing their code in the HomePage. That way, we are keeping the HomePage code consise and also this MySearchBar widget can be used at multiple locations within our app.
Now, with that searchbar done, let’s just finish up our HomePage by making the ListView. For now, to illustrate the things, I have taken a sample list of fruits that I would display.
And, here is the complete code of the HomePageState class.
I have displayed MySearchBar and the list of fruits in a column. MySearchBar has been wrapped by some padding. ListView.builder(), if you don’t already know builds the list of widgets. For that, we have to implement two functions — itembuilder and itemcount. itemBuilder method comes with two arguments — context and pos. pos(position) is important for us since it tells the position of the item to be displayed. itemBuilder returns the widget/item to be displayed at the given pos in the list. itemCount method should return the length of the list to be displayed. shrinkwrap has been set to true. Had it not been set to true, we would have encountered errors since our ListView would try take infinite space in vertical direction.
I have taken a state variable ‘query’ which contains the text in the searchbar and changes everytime user presses a key through the onSearch callback. Inside of build method, I have first filtered the list based on the current query using the List.where() method. It iterates the entire list element by element and returns the list of those elements which returns true for certain criteria. Here, we have returned true if the listitem contains the query string. But, how does the flutter know that the query has changed and UI needs to be rebuilt? This has been done through the State.setState() method(look carefully in the onSearch function body). setState method takes a function in which we have updated the query variable. setState triggers the State object to rebuild the UI. Thus, everytime a user types something, the query gets changed through our onSearch callback with a call to setState that rebuilds the UI considering the updated query. As simple as that!
Here is the working demo of our code,
I know that this is not the best of UI’s😅 but I hope you have understood stateful widgets in flutter and our basic search project. With that much understanding, you are ready to build your own stateful widgets in your own projects. Hope you liked the article.
Happy coding! 😉