200 Architecting a Flutter App

Page Table of Contents

Introduction
State Management vs Architecture
Types of State
Contents of this Chapter

Introduction

The Most central topic of architecting a Flutter (Flutter Dev Team 2018h) app is State Management (Flutter Dev Team 2019b). Where does my State sit, who needs access to it and how do parts of the app access it? This chapter aims to answer those questions. You will learn about the two types of State, you will be introduced to the three most popular State Management solutions and you will learn one of those State Management solutions (BLoC (Soares 2018)) in detail. You will also learn how to use the BLoC State Management solution in a clean and scalable 3-Layered architecture.

State Management vs Architecture

I want to differentiate these two terms. Within the Flutter community, State Management and Architecture are often used synonymously, but I think we should be careful to do so. State Management is a set of tools or a pattern with which we can manage the State within our app. Architecture, on the other hand, is the overarching structure of our app. A set of rules that our app conforms to. Any architecture for a Flutter application will have some sort of State Management, but State Management is not an architecture by itself. I just want you to keep this in mind for the following chapters.

Types of State

The Flutter documentation (Flutter Dev Team 2019b) differentiates between two types of State: Ephemeral State & App State. Ephemeral State is State that is only required in one location IE inside of one Widget. Examples would be: scroll position in a list, highlighting of selected elements or the color change of a pressed button. This is the type of State that we don’t need to worry about that much or in other words, there is no need for a fancy State Management solution for Ephemeral State. We can simply use a Stateful Widget with some variables and manage Ephemeral State that way (Flutter Dev Team 2019b). The more interesting type of State is App State. This is information that is required in multiple locations / by multiple Widgets. Examples would be user data, a list of favorites or a shopping car. App State management is going to be the focus of this chapter.

Ephemeral State vs App State Decision Tree