Flutter: Understanding Counter App
Introduction
In this article, I will show you how the pre-built demo Flutter app, i.e., the “Counter App” works.
In my previous article, I had discussed the difference between Stateful and Stateless Widgets. You have to apply that concept to understand the working of this Counter App.
You will find a lot of comments in the demo Counter App, if you are a beginner then you should surely go through these comments as they are very well written and would help you in understanding the basics of a Flutter app.
So, let’s get started.
Import
First, we have the import statement. This imports the material.dart
package which helps in implementing the Material Design throughout the app and for most of the Dart files that are used for UI design you have to import this package.
Main
Then you have the main function which has the runApp
method containing the first Widget as its argument, in this case, it is called MyApp
.
Stateless Widget (MyApp)
This widget is the root of the app. Here, inside the build method, it returns a Material App
widget containing the three properties: title
, theme
& home
.
title
A one-line description used by the device to identify the app for the user.
On Android, the titles appear above the task manager’s app snapshots which are displayed when the user presses the “recent apps” button. On iOS, this value cannot be used.
theme
This property defines the ThemeData
widget containing information about different colors, fonts and other theme data that would be used throughout the app. Here, only one property is defined, primarySwatch
which stores the color blue. But, in your app, you can define any number of theme properties you want.
home
This property contains a Stateful Widget, MyHomePage
to which the title
is passed on. When you start this app for the first time this is the widget that will be displayed as the first screen on your device.
Stateful Widget (MyHomePage)
This Stateful Widget MyHomePage
takes a constructor containing a key and a title. Here, the title
is passed on from the previous class. You can see that the String title
is marked final, this is done because the fields in a Widget subclass are always marked final
if you do not mark this as a final you will get a warning.
Now, we have the overridden createState
method which returns the instance of the class_MyHomePageState
.
State class (_MyHomePageState)
In this class at first, a private integer variable _counter
is initialized to zero. After that, we have a private void method defined called _incrementCounter
.
_incrementCounter
This method calls the setState
method, as I had discussed in my previous article this setState
is used to rebuild the widget tree. In this counter app, we have incremented the _counter
variable within this setState
. If we just increment the _counter
variable without defining any setState
method, then this variable would get updated behind the scene but we will not see any UI changes as the widget tree would not be rebuilt.
build method
Now, we have the overridden build
method. As I had already discussed in my previous article, this build
method is responsible for the UI design of the app.
In this app, the build method returns a Scaffold
widget containing three properties: appBar
, body
& floatingActionButton
.
appBar
This property takes the AppBar
widget containing a Text
widget which displays the title of the app.
body
This property contains a Column
widget which is centered using the Center
widget. The column widget contains two Text
widgets, one displaying a text and another displaying the number of counts. The second text widget contains a property, style
which defines the text style for this text widget.
floatingActionButton
This property takes the FloatingActionButton
widget which displays a FAB at the bottom right corner of the screen. The FAB widget takes three properties: onPressed
, tooltip
& child
.
onPressed
The onPressed
property is used to call the _incrementCounter
method which increments the counter by 1 and rebuilds the widget tree.
tooltip
This property can take a String. The text is displayed when the user long-presses on the button and is used for accessibility, which means that it won’t be displayed in normal circumstances.
child
As you know, this child widget is used to show anything inside the parent widget. Here, it is used to show a add
icon.
Conclusion
So in simple words, the working of this app is that, when the FAB (Floating Action Button) is pressed the _incrementCounter
method is called which increments the counter and rebuilds the widget tree.
We have come to the end of this short article, I hope that this article has helped you in understanding the working of the Counter App.
One thing you should try out in Flutter is the Hot Reload. Let’s try that out before ending this article.
Hot Reload
If you have gone through the comments, you might have noticed that there is a comment within the ThemeData
widget which tells you how to use the hot reload in Flutter. Let’s try it out.
- Run the app on the emulator or a real device.
- Let’s change the
primarySwatch
color to red. - Save the file [
Command + S
(for MAC), orCtrl + S
(for Windows)]. And you would immediately see that the color of theappBar
and theFAB
change to red.
Previous Article in this series of Flutter Basics
Check out my other articles
If you want to support me and want me to continue writing Flutter articles and building some interesting Flutter projects, please contribute to my Patreon page below:
You can follow me on Twitter and find some of my projects on GitHub. Also, don’t forget to checkout my Website. Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!
Happy coding…
Souvik Biswas