diff --git a/README.md b/README.md index 940cd78..fe9eb8f 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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). diff --git a/lib/main.dart b/lib/main.dart index 01d6f6f..19f3d50 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -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);