Flutter minimalist state management: Counter app

An additional example to clarify the process

original photo from unsplash

A couple of years ago I wrote the article Flutter State Management for Minimalists. In that article, I suggested that you can handle state in your Flutter apps by simply using the built-in tools that Flutter provides rather than third-party state management packages like Provider, Bloc, or Riverpod.

I’m certainly not opposed to those packages. I admire their authors very much. In fact, I’ve considered on several occasions building an app with Bloc, but the thing is, I haven’t needed to. After two years I’m still using the minimalist approach in all my apps. What I like about it is that I know what’s happening and the API has remained stable over the years.

One of the engineers on the Flutter team also endorsed this approach:

source

The way I do it is to use a ValueNotifier to let the UI know about state changes and a ValueListenableBuilder to rebuild the UI when there’s a change. I keep the UI code in one file and put the state management logic in another file. I explained that in some detail in my original article. That article included a Timer app example, but I’d like to give a couple of additional short examples to demonstrate the process. This article will show the standard Counter app and the next article will demonstrate how to make a weather app.

Creating the counter app

Create a new Flutter project.

flutter create counter_app

Setting up the file structure

Create a new folder in lib named home_page. In that folder, create two files:

• home_page.dart
• home_page_manager.dart

Although this is only a single-page app, the pattern I follow when building multi-page apps is to create a file for the Flutter UI code named something_page.dart and a file for the state management logic named something_page_manager.dart. I keep these two files together in their own folder. This keeps them close but still separate. You can use a…