Managing State in Flutter

In this course, we are going to working with an app that tracks the total amount of articles on the site. To start off, we’ll track just the amount of Flutter articles on the site. Later, we’ll be tracking the articles in three categories: Flutter, Android and iOS. Although as a learning project, I suggest you try and add another category after this course.

The app itself is pretty barebones. Each image is a button that when pressed, increases the total articles for that category. Opening the app, you’ll see there’s a bunch of code already written that has setup the app.

In the lib folder, main.dart sets up the general interface. The body of the Scaffold creates a tutorials_page widget. This widget lays out all the pillars or domains. As mentioned, when we start this course, we’ll be using one domain, but in the later episodes, we’ll be using many different domains. The page also prints out the total amount of tutorials.

Finally, we have the tutorial_widget that displays the Inkwell button and the article count. The button doesn’t do anything yet. Tapping it just prints a message to the console.

So that covers all the aspects of the user interface. Now, for the actual data. This is contained in the models folder. This folder contains a file called pillar.dart. This file contains two different types of objects. We’ll start at the bottom of the file move upwards. First, there’s a pillar type enumeration. This pillar type takes advantage of Dart’s upgraded enumerations.

It has two properties: one for the image name and the other for the background color. Then it defines our three different categories: Flutter, Android, and iOS. The Pillar class itself contains an article count getter as well as a property that contains a pillar type. Finally, there is a method that increases the total article count.

We’ll use this model class as our data - that is - our state and we’ll make sure our user interface reflects this state with each ui rebuild. And we’ll get started with updating state with the first tool in our toolbox: setState(),