Introduction

Overview

The following is an overview of Flutter Forge and how the various pieces work together.


Flutter Forge is built up of a number of concepts all built to support the concept of Components. A Component is built up from a Widget, a Store, State, an Environment, Actions, Effects, and a Reducer.

To understand how all these pieces fit together. We can take a look at the following diagram.

Flutter Forge Overview

In this diagram we can see that a Component owns a Widget that has a Store which manages State and business logic via a Reducer and Effects.

To understand how these pieces work together we can walk through the following flow.

  1. User taps the button in the Widget
  2. The button handler creates an Action and sends it to the Store via the send method
  3. The Reducer receives the Action and the current State
  4. The Reducer evaluates the Action and computes and returns a new State and zero or more Effects
  5. The Store takes the new State and updates the managed State, notifying any observers if the State changed. It also fires off the Effects and feeds any Actions the Effects return back into the Store. Likely mutating State again via the Reducer.
  6. The updating of State can then trigger the User to perform another Action and start the process all over again.

This process and design is largely based on the Redux pattern. However, it is applied within the Components and layed out in a composable manner. We have Swift Composable Architecture to thank for a lot of these ideas.

Previous
Getting started