Flutter: Understanding Counter App

Souvik Biswas

Published in

Flutter Community

6 min readJul 10, 2019

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 MyHomePagetakes 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), or Ctrl + S (for Windows)]. And you would immediately see that the color of the appBar and the FAB change to red.

Previous Article in this series of Flutter Basics

Flutter: Stateful vs Stateless Widget

In this article, I will show you what is the difference between Stateful and Stateless Widget.

medium.com

Check out my other articles

Flutter: Adding Bluetooth Functionality

This article will help you to use Bluetooth functionality with Flutter.

link.medium.com

Flutter: Building WearOS app

This article will help you to build a Flutter Wear OS (Android Wear) app from scratch.