Skip to content

doc(README): add more in-depth info about state management approaches #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 85 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,35 @@

## Overview

State Management Examples
> State is information that (1) can be read synchronously when the widget is
> built and (2) might change during the lifetime of the widget.
>
> — [State-class](https://api.flutter.dev/flutter/widgets/State-class.html)

Simple application with several state managements approaches.
**State Management**: it is the management of the state of one or more user
interface controls such as text fields, OK buttons, radio buttons, etc. in a
graphical user interface.

This project is heavily inspired by the Bachelor's thesis of [Dmitrii Slepnev](https://github.com/sdim2016/flutter-state-management)

## Contents

- [Overview](#overview)
- [Getting Started](#getting-started)
- [Group of State Managements](#group-of-state-managements)
- [State Management Approaches](#state-management-approaches)
- [setState](#setstate)
- [inheritedWidget](#inherited-widget)
- [Provider](#provider)
- [GetX](#getx)
- [Bloc/Rx](#bloc-rx)
- [MobX](#mobx)

## Getting Started

The State Management Example is a simple application with several state
managements approaches.

The application has 3 features:

- Some pages with bottom navigation; the Settings page allows us to
Expand All @@ -29,14 +50,72 @@ The application has 3 features:
- Local persistence.
- Simple remote API calls — GET requests are enough for the showcase.

In this way, the application does not need to solve any real-world problems, it
aims to demonstrate how some state management approaches work from a technical
point of view.
In this way, the application does not need to solve any real-world problems; it
is aimed to demonstrate how some state management approaches work from a
technical point of view.

The UI is created once for all apps, as well as the classes from the data access
layer (local persistence, remote API calls). The only thing that will change is
the state management approach.

## Group of State Managements

According to [Dmitrii Slepnev](https://github.com/sdim2016/flutter-state-management),
state management approaches can be roughly categorized within 3 groups:

- "**Wrappers**": implementations on top of the Flutter SDK's built-in classes.
- **Redux**: functional programming paradigm.
- **Reactive**: based on the reactive programming paradigm; that is, events
trigger the execution of some code (reaction).

## State Management Approaches

### setState

It is also known as local state.

This is the low-level approach for ephemeral widget state; that is, the state
contained in a single Widget; other widgets almost never need to access this
kind of state.

Examples of ephemeral state:

- the current page in a PageView.
- the current value of a counter widget.
- the progress of a complex animation.

### Inherited Widget

[Inherited Widget](https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html)
is a low-level approach used to communicate between ancestors and children in
the widget tree. It is used in many other approaches under the hood.

### Provider

[Provider](https://pub.dev/packages/provider)
is the recommended approach by the Flutter's development team.

### GetX

[GetX](https://pub.dev/packages/get)
is a simplified reactive state management solution.

### Bloc Rx

[Bloc](https://pub.dev/packages/flutter_bloc)
is a family of stream/observable based patterns.

### MobX

[Mobx](https://pub.dev/packages/mobx)
is a popular library based on observables and reactions.

### Redux

[Redux](https://pub.dev/packages/redux)
is a state container approach brought to Flutter from the web development world.

## References

[State Management in Flutter — Dmitrii Slepnev](https://www.theseus.fi/handle/10024/355086).
- [State Management in Flutter — Dmitrii Slepnev](https://www.theseus.fi/handle/10024/355086).
- [Flutter's State Management Docs](https://docs.flutter.dev/development/data-and-backend/state-mgmt).
4 changes: 3 additions & 1 deletion lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ void main() {
runApp(const MyApp());
}

/// Root widget.
/// The Topmost Root Widget.
///
/// This is the container holding the whole Flutter Application.
class MyApp extends StatelessWidget {
/// Ctor.
const MyApp({Key? key}) : super(key: key);
Expand Down