diff --git a/src/content/codelabs/index.md b/src/content/codelabs/index.md index dca96deaaf..54f1828844 100644 --- a/src/content/codelabs/index.md +++ b/src/content/codelabs/index.md @@ -51,7 +51,7 @@ one of the following codelabs: [Records and Patterns in Dart 3]: {{site.codelabs}}/codelabs/dart-patterns-records [Dart null safety in Action]: {{site.yt.watch}}?v=HdKwuHQvArY [inherited-widget-ws]: {{site.yt.watch}}?v=LFcGPS6cGrY -[low-level state management]: /data-and-backend/state-mgmt/options#inheritedwidget-inheritedmodel +[low-level state management]: /data-and-backend/state-mgmt/options#inheritedwidget-and-inheritedmodel ## Designing a Flutter UI diff --git a/src/content/data-and-backend/state-mgmt/options.md b/src/content/data-and-backend/state-mgmt/options.md index e792367a4d..6d42c61e49 100644 --- a/src/content/data-and-backend/state-mgmt/options.md +++ b/src/content/data-and-backend/state-mgmt/options.md @@ -1,6 +1,10 @@ --- -title: List of state management approaches -description: A list of different approaches to managing state. +title: Approaches to state management +short-link: State-management approaches +breadcrumb: Approaches +description: >- + An introduction to different approaches to + managing state in Flutter apps. prev: title: Simple app state management path: /data-and-backend/state-mgmt/simple @@ -11,8 +15,8 @@ If you feel that some of your questions haven't been answered, or that the approach described on these pages is not viable for your use cases, you are probably right. -Learn more at the following links, -many of which have been contributed by the Flutter community: +Learn more from the following resources, +many of which have been contributed by the Flutter community. ## General overview @@ -30,26 +34,9 @@ Things to review before selecting an approach. [Introduction to state management]: /data-and-backend/state-mgmt/intro [Pragmatic State Management in Flutter]: {{site.yt.watch}}?v=d_m5csmrf7I -## Provider +## Built-in approaches -* [Simple app state management][], the previous page in this section -* [Provider package][] - -[Provider package]: {{site.pub-pkg}}/provider -[Simple app state management]: /data-and-backend/state-mgmt/simple - -## Riverpod - -Riverpod works in a similar fashion to Provider. -It offers compile safety and testing without depending on the Flutter SDK. - -* [Riverpod][] homepage -* [Getting started with Riverpod][] - -[Getting started with Riverpod]: https://riverpod.dev/docs/introduction/getting_started -[Riverpod]: https://riverpod.dev/ - -## setState +### `setState` The low-level approach to use for widget-specific, ephemeral state. @@ -59,20 +46,24 @@ The low-level approach to use for widget-specific, ephemeral state. [Adding interactivity to your Flutter app]: /ui/interactivity [Basic state management in Google Flutter]: {{site.medium}}/@agungsurya/basic-state-management-in-google-flutter-6ee73608f96d -## ValueNotifier & InheritedNotifier + -An approach using only Flutter provided tooling to update state and notify the UI of changes. +### `ValueNotifier` and `InheritedNotifier` +An approach using only Flutter provided APIs to +update state and notify the UI of changes. * [State Management using ValueNotifier and InheritedNotifier][], by Tadas Petra [State Management using ValueNotifier and InheritedNotifier]: https://www.hungrimind.com/articles/flutter-state-management -## InheritedWidget & InheritedModel + + +### `InheritedWidget` and `InheritedModel` -The low-level approach used to communicate between ancestors and children -in the widget tree. This is what `provider` and many other approaches -use under the hood. +The low-level approach used to +communicate between ancestors and children in the widget tree. +This is what `package:provider` and many other approaches use under the hood. The following instructor-led video workshop covers how to use `InheritedWidget`: @@ -94,246 +85,43 @@ Other useful docs include: [Using Flutter Inherited Widgets Effectively]: https://ericwindmill.com/articles/inherited_widget/ [Widget - State - Context - InheritedWidget]: https://www.didierboelens.com/2018/06/widget---state---context---inheritedwidget/ -## June - -A lightweight and modern state management library that focuses on providing -a pattern similar to Flutter's built-in state management. - -* [june package][] - -[june package]: {{site.pub-pkg}}/june - - -## Redux - -A state container approach familiar to many web developers. - -* [Animation Management with Redux and Flutter][], - a video from DartConf 2018 [Accompanying article on Medium][] -* [Flutter Redux package][] -* [Redux Saga Middleware Dart and Flutter][], by Bilal Uslu -* [Introduction to Redux in Flutter][], by Xavi Rigau -* [Flutter + Redux—How to make a shopping list app][], - by Paulina Szklarska on Hackernoon -* [Building a TODO application (CRUD) in Flutter with Redux—Part 1][], - a video by Tensor Programming -* [Flutter Redux Thunk, an example][], by Jack Wong -* [Building a (large) Flutter app with Redux][], by Hillel Coren -* [Fish-Redux–An assembled flutter application framework based on Redux][], - by Alibaba -* [Async Redux–Redux without boilerplate. Allows for both sync and async reducers][], - by Marcelo Glasberg -* [Flutter meets Redux: The Redux way of managing Flutter applications state][], - by Amir Ghezelbash -* [Redux and epics for better-organized code in Flutter apps][], by Nihad Delic -* [Flutter_Redux_Gen - VS Code Plugin to generate boiler plate code][], by Balamurugan Muthusamy (BalaDhruv) -* [Flutter Animations Studio][], by Gianluca Romeo - -[Accompanying article on Medium]: {{site.flutter-medium}}/animation-management-with-flutter-and-flux-redux-94729e6585fa -[Animation Management with Redux and Flutter]: {{site.yt.watch}}?v=9ZkLtr0Fbgk -[Async Redux–Redux without boilerplate. Allows for both sync and async reducers]: {{site.pub}}/packages/async_redux -[Building a (large) Flutter app with Redux]: https://hillelcoren.com/2018/06/01/building-a-large-flutter-app-with-redux/ -[Building a TODO application (CRUD) in Flutter with Redux—Part 1]: {{site.yt.watch}}?v=Wj216eSBBWs -[Fish-Redux–An assembled flutter application framework based on Redux]: {{site.github}}/alibaba/fish-redux/ -[Flutter Redux Thunk, an example]: {{site.medium}}/flutterpub/flutter-redux-thunk-27c2f2b80a3b -[Flutter meets Redux: The Redux way of managing Flutter applications state]: {{site.medium}}/@thisisamir98/flutter-meets-redux-the-redux-way-of-managing-flutter-applications-state-f60ef693b509 -[Flutter Redux package]: {{site.pub-pkg}}/flutter_redux -[Flutter + Redux—How to make a shopping list app]: https://hackernoon.com/flutter-redux-how-to-make-shopping-list-app-1cd315e79b65 -[Introduction to Redux in Flutter]: https://blog.novoda.com/introduction-to-redux-in-flutter/ -[Redux and epics for better-organized code in Flutter apps]: {{site.medium}}/upday-devs/reduce-duplication-achieve-flexibility-means-success-for-the-flutter-app-e5e432839e61 -[Redux Saga Middleware Dart and Flutter]: {{site.pub-pkg}}/redux_saga -[Flutter_Redux_Gen - VS Code Plugin to generate boiler plate code]: https://marketplace.visualstudio.com/items?itemName=BalaDhruv.flutter-redux-gen -[Flutter Animations Studio]: {{site.github}}/gianlucaromeo/flutter-animations-studio - -## Fish-Redux - -Fish Redux is an assembled flutter application framework -based on Redux state management. -It is suitable for building medium and large applications. - -* [Fish-Redux-Library][] package, by Alibaba -* [Fish-Redux-Source][], project code -* [Flutter-Movie][], A non-trivial example demonstrating how - to use Fish Redux, with more than 30 screens, graphql, - payment api, and media player. - -[Fish-Redux-Library]: {{site.pub-pkg}}/fish_redux -[Fish-Redux-Source]: {{site.github}}/alibaba/fish-redux -[Flutter-Movie]: {{site.github}}/o1298098/Flutter-Movie - -## BLoC / Rx - -A family of stream/observable based patterns. - -* [Architect your Flutter project using BLoC pattern][], - by Sagar Suri -* [BloC Library][], by Felix Angelov -* [Reactive Programming - Streams - BLoC - Practical Use Cases][], - by Didier Boelens - -[Architect your Flutter project using BLoC pattern]: {{site.medium}}/flutterpub/architecting-your-flutter-project-bd04e144a8f1 -[BloC Library]: https://felangel.github.io/bloc -[Reactive Programming - Streams - BLoC - Practical Use Cases]: https://www.didierboelens.com/2018/12/reactive-programming---streams---bloc---practical-use-cases - -## GetIt - -A service locator based state management approach that -doesn't need a `BuildContext`. - -* [GetIt package][], the service locator. - It can also be used together with BloCs. -* [GetIt Mixin package][], a mixin that completes - `GetIt` to a full state management solution. -* [GetIt Hooks package][], same as the mixin in - case you already use `flutter_hooks`. -* [Flutter state management for minimalists][], by Suragch - -:::note -To learn more, watch this short Package of the Week video on the GetIt package: - -{% ytEmbed 'f9XQD5mf6FY', 'get_it | Flutter package of the week' %} +## Community-provided packages + +Depending on the complexity of your app and preferences of your team, +you might find adopting a state management package useful. +State management packages often help reduce boilerplate code, +provide specialized debugging tools, and can help +enable a clearer and consistent application architecture. + +The Flutter community offers a wide variety of state management packages. +The best choice for your app often depends on the app's complexity, +your team's preferences, and the specific problems you need to solve. + +To begin exploring the available options, +check out the [`#state-management`][]{: target="_blank"} topic on the pub.dev site and +refine the search to find packages that match your needs. + +
+ +
+ + State management packages + + +
+
+

Explore the variety of state-management packages built by and for the Flutter community.

+
+ +
+ +:::tip +If you've developed a state management package that +you think would be useful to the Flutter community, +consider [adding the `state-management` topic][pub-topics] and +[publishing the package][pub-publish] to pub.dev. ::: -[Flutter state management for minimalists]: {{site.medium}}/flutter-community/flutter-state-management-for-minimalists-4c71a2f2f0c1?sk=6f9cedfb550ca9cc7f88317e2e7055a0 -[GetIt package]: {{site.pub-pkg}}/get_it -[GetIt Hooks package]: {{site.pub-pkg}}/get_it_hooks -[GetIt Mixin package]: {{site.pub-pkg}}/get_it_mixin - -## MobX - -A popular library based on observables and reactions. - -* [MobX.dart, Hassle free state-management for your Dart and Flutter apps][] -* [Getting started with MobX.dart][] -* [Flutter: State Management with Mobx][], a video by Paul Halliday - -[Flutter: State Management with Mobx]: {{site.yt.watch}}?v=p-MUBLOEkCs -[Getting started with MobX.dart]: https://mobx.netlify.app/getting-started -[MobX.dart, Hassle free state-management for your Dart and Flutter apps]: {{site.github}}/mobxjs/mobx.dart - -## Dart Board - -A modular feature management framework for Flutter. -Dart Board is designed to help encapsulate and isolate -features, including examples/frameworks, -small kernel, and many ready-to-use decoupled features -such as debugging, logging, auth, redux, locator, -particle system and more. - -* [Dart Board Homepage + Demos](https://dart-board.io/) -* [Dart Board on pub.dev]({{site.pub-pkg}}/dart_board_core) -* [dart_board on GitHub]({{site.github}}/ahammer/dart_board) -* [Getting started with Dart Board]({{site.github}}/ahammer/dart_board/blob/master/GETTING_STARTED.md) - -## Flutter Commands - -Reactive state management that uses the Command Pattern -and is based on `ValueNotifiers`. Best in combination with -[GetIt](#getit), but can be used with `Provider` or other -locators too. - -* [Flutter Command package][] -* [RxCommand package][], `Stream` based implementation. - -[Flutter Command package]: {{site.pub-pkg}}/flutter_command -[RxCommand package]: {{site.pub-pkg}}/rx_command - -## Binder - -A state management package that uses `InheritedWidget` -at its core. Inspired in part by recoil. -This package promotes the separation of concerns. - -* [Binder package][] -* [Binder examples][] -* [Binder snippets][], vscode snippets to be even more - productive with Binder - -[Binder examples]: {{site.github}}/letsar/binder/tree/main/examples -[Binder package]: {{site.pub-pkg}}/binder -[Binder snippets]: https://marketplace.visualstudio.com/items?itemName=romain-rastel.flutter-binder-snippets - -## GetX - -A simplified reactive state management solution. - -* [GetX package][] -* [GetX Flutter Firebase Auth Example][], by Jeff McMorris - -[GetX package]: {{site.pub-pkg}}/get -[GetX Flutter Firebase Auth Example]: {{site.medium}}/@jeffmcmorris/getx-flutter-firebase-auth-example-b383c1dd1de2 - -## states_rebuilder - -An approach that combines state management with a -dependency injection solution and an integrated router. -For more information, see the following info: - -* [States Rebuilder][] project code -* [States Rebuilder documentation][] - -[States Rebuilder]: {{site.github}}/GIfatahTH/states_rebuilder -[States Rebuilder documentation]: {{site.github}}/GIfatahTH/states_rebuilder/wiki - -## Triple Pattern (Segmented State Pattern) - -Triple is a pattern for state management that uses `Streams` or `ValueNotifier`. -This mechanism (nicknamed _triple_ because the stream always uses three -values: `Error`, `Loading`, and `State`), is based on the -[Segmented State pattern][]. - -For more information, refer to the following resources: - -* [Triple documentation][] -* [Flutter Triple package][] -* [Triple Pattern: A new pattern for state management in Flutter][] - (blog post written in Portuguese but can be auto-translated) -* [VIDEO: Flutter Triple Pattern by Kevlin Ossada][] (recorded in English) - -[Triple documentation]: https://triple.flutterando.com.br/ -[Flutter Triple package]: {{site.pub-pkg}}/flutter_triple -[Segmented State pattern]: https://triple.flutterando.com.br/docs/intro/overview#-segmented-state-pattern-ssp -[Triple Pattern: A new pattern for state management in Flutter]: https://blog.flutterando.com.br/triple-pattern-um-novo-padr%C3%A3o-para-ger%C3%AAncia-de-estado-no-flutter-2e693a0f4c3e -[VIDEO: Flutter Triple Pattern by Kevlin Ossada]: {{site.yt.watch}}?v=dXc3tR15AoA - -## solidart - -A simple and performant fine-grained reactivity state management solution for building user interfaces. -Enjoy the automatic reactivity system with Signal, Computed, Resource and Effect. - -* [Official Documentation][] -* [solidart package][] -* [flutter_solidart package][] - -[Official Documentation]: https://solidart.mariuti.com -[solidart package]: {{site.pub-pkg}}/solidart -[flutter_solidart package]: {{site.pub-pkg}}/flutter_solidart - -## flutter_reactive_value - -The `flutter_reactive_value` library might offer the least complex solution for state -management in Flutter. It might help Flutter newcomers add reactivity to their UI, -without the complexity of the mechanisms described before. -The `flutter_reactive_value` library defines the `reactiveValue(BuildContext)` -extension method on `ValueNotifier`. This extension allows a `Widget` to -fetch the current value of the `ValueNotifier` and -subscribe the `Widget` to changes in the value of the `ValueNotifier`. -If the value of the `ValueNotifier` changes, `Widget` rebuilds. - -* [`flutter_reactive_value`][] source and documentation - -[`flutter_reactive_value`]: {{site.github}}/lukehutch/flutter_reactive_value - -## Elementary - -Elementary is a simple and reliable way to build applications with MVVM in Flutter. -It offers a pure Flutter experience with clear code separation by responsibilities, -efficient rebuilds, easy testability, and enhancing team productivity. - -* [Elementary Documentation][] -* [Elementary Repository][] -* [Elementary package][] - -[Elementary Documentation]: https://documentation.elementaryteam.dev/ -[Elementary Repository]: {{site.github}}/Elementary-team/flutter-elementary -[Elementary package]: {{site.pub-pkg}}/elementary +[`#state-management`]: {{site.pub}}/packages?q=topic%3Astate-management +[pub-topics]: {{site.dart-site}}/tools/pub/pubspec#topics +[pub-publish]: {{site.dart-site}}/tools/pub/publishing