The biggest challenge for me when coming to Flutter was learning state management. People were saying Provider and Bloc and ScopedModel and Redux and MobX and…I had no idea what they were talking about. As time passed the list of state management solutions continued to grow.
In my learning journey I wrote articles about Stacked (here) and Provider (here and here) and Riverpod (here and here). I went through the Bloc pattern and BlocLibrary tutorials and looked into Cubit and GetX and watched videos about Redux and MobX and Command. But with each one there was always something that I couldn’t quite wrap my brain around. There were either too many options or too much magic was happening behind the scenes. My brain needed simple and understandable. It needed minimal.
That’s where this article comes in. I’m going to introduce a way to manage your app state that doesn’t use any of the third-party state management solutions. The only third-party package it uses is GetIt, not to manage state but to provide a reference to a plain Dart class where you’ll manage your own state. For rebuilding the UI on state changes, you’ll use Flutter’s own built-in
The purpose of this article isn’t to talk you out of any state management solution you may be currently using. If it’s working for you, then there’s no reason to change. Rather, this article is a guide for people like me who don’t understand state management and just want straight-forward explanation that they can wrap their minds around.
Overview of app architecture
While it’s possible to build a Flutter app in one big file with all the UI and logic mixed together, that makes it really hard to understand how the app works. For most apps you’ll want to give yourself a little structure.
To start off with, let’s look at an overview of a typical app’s architecture. Each colored box below represents a class or a file or maybe even a folder of files. The two pages in this app are there as examples to represent the 10 or 20 pages you might have in a full app.