description bug_report

狀態 (State) 管理參考

狀態管理是一個相當複雜的話題。如果你在瀏覽後發現一些問題並未得到解答，或者並不適用於你的具體需求場景，自信些，你的實現就是對的。

透過下面的連結瞭解更多的訊息，其中有很多訊息都是由社群（第三方）提供。

總體概覽

在選擇一個具體內容前，你可以先檢視以下幾項。

• 狀態管理的介紹。這是本篇內容的總起。（當你直接跳轉到了該頁面，但錯過了其他頁面時，可以先從這裡開始閱讀）

• Flutter 實用狀態管理 (Pragmatic State Management in Flutter)，來自 Google I/O 2019 的介紹影片。

• Flutter 架構實例 (Flutter Architecture Samples)， Brian Egan 著。

Provider

• 簡易的應用狀態管理 (Simple app state management)，這是本節內容的上篇。

• 使用 Provider package

Riverpod

Riverpod 是另一個不錯的選擇，它類似於 Provider，並且是編譯安全和可測試的。 Riverpod 不依賴於 Flutter SDK。

• Riverpod 專案首頁

• 開始上手使用 Riverpod

setState

The low-level approach to use for widget-specific, ephemeral state.

• 為你的 Flutter 應用新增互動 (Adding interactivity to your Flutter app)，一篇 Flutter 的教程。

• Flutter 中的基礎狀態管理 (Basic state management in Google Flutter)， Agung Surya 著。

InheritedWidget & InheritedModel

Widget tree 中不同層級間的 widget 通訊的基礎方法。這是諸如 provider 等眾多方法的底層實現。

以下講師指導的影片 workshop 介紹瞭如何使用 InheritedWidget：

其他有用的文件包括：

• InheritedWidget 文件 (InheritedWidget docs)

• 使用 InheritedWidgets 管理 Flutter 應用狀態 (Managing Flutter Application State With InheritedWidgets)， Hans Muller 著。

• 繼承 Widgets (Inheriting Widgets)， Mehmet Fidanboyly 著。

• 高效地使用 Flutter 繼承 Widgets (Using Flutter Inherited Widgets Effectively)，Eric Windmill 著。

• Widget - State - Context - InheritedWidget，Didier Bolelens 著。

June

一個輕量級的現代狀態管理函式庫，專注於提供與 Flutter 內建狀態管理類似的模式。

• june package

Redux

前端開發者較為熟悉的狀態容器實現。

• 使用 Redux 在 Flutter 中管理動畫 (Animation Management with Redux and Flutter)，來自 DartConf 2018 的影片， 以及 Medium 的配套文章 (Accompanying article on Medium)。

• Flutter Redux 依賴套件

• Dart 與 Flutter 中的 Redux 中間件 Saga，Bilal Uslu 著

• Flutter 中的 Redux 介紹， Xavi Rigau 著。

• Flutter + Redux—建立一個購物清單 APP (Flutter + Redux—How to make a shopping list app)，發布於 Hackernoon，Paulina Szklarska 著。

• 用 Flutter Redux 建立一個任務應用 (CRUD) —第一部分 (Building a TODO application (CRUD) in Flutter with Redux—Part 1)，由 Tensor Programming 製作的影片。

• Flutter Redux Thunk 範例 (Flutter Redux Thunk, an example)，Jack Wong 著。

• 使用 Redux 建立（大型）Flutter 應用 (Building a (large) Flutter app with Redux)，Hillel Coren 著。

• Fish-Redux—基於 Redux 封裝的 Flutter 應用框架 (Fish-Redux–An assembled flutter application framework based on Redux)，阿里巴巴著。

• 非同步 Redux—沒有樣板的 Redux，允許同步和非同步 reducers (Async Redux–Redux without boilerplate. Allows for both sync and async reducers)，Marcelo Glasberg 著。

• 當 Flutter 遇見 Redux：以 Redux 的風格管理 Flutter 應用的狀態 (Flutter meets Redux: The Redux way of managing Flutter applications state)，Amir Ghezelbash 著。

• 使用 Redux 和 redux_epics 更好的管理 Flutter 程式碼，Nihad Delic 著。

• 使用 Redux 更好地組織 Flutter 應用的程式碼以管理專案目標 (Redux and epics for better-organized code in Flutter apps)，Nihad Delic 著。

Fish-Redux

Fish Redux 是一個基於 Redux 狀態管理的組合式 Flutter 應用框架，適用於建立中型和大型應用。

• 由阿里巴巴開發的 Fish-Redux-Library package

• Fish-Redux-Source，工程程式碼

• Flutter-Movie 展示如何使用 Fish Redux 的簡單範例應用，包含 30 多個頁面、graphql、支付 api 和媒體播放器等。

BLoC / Rx

基於流/觀察者模式的系列。

• 使用 BLoC 模式建立你的 Flutter 專案 (Architect your Flutter project using BLoC pattern)， Sagar Suri 著。

• BLoC 函式庫 (BLoC Library)，Felix Angelov 著。

• 回應式程式設計 - 流 - BLoC - 用例 (Reactive Programming - Streams - BLoC - Practical Use Cases)， Didier Boelens 著。

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

MobX

一個基於觀察及回應的狀態管理常用函式庫。

• MobX.dart 輕鬆管理你的 Dart 及 Flutter 應用狀態 (MobX.dart, Hassle free state-management for your Dart and Flutter apps)

• 開始使用 MobX.dart (Getting started with MobX.dart)

• Flutter：使用 MobX 進行狀態管理 (Flutter: State Management with Mobx)

Flutter Commands

基於 ValueNotifiers 的指令式的狀態管理，能與 GetIt 完美結合使用，也可以與 Provider 或者其他 locators 配合使用。

• Flutter Command package
• RxCommand package, Stream based implementation.

Binder

一個使用 InheritedWidget 作為核心實現的狀態管理函式庫。受到 recoil 的啟發，該函式庫提供了分治的解決方式。

• Binder package

• Binder 範例

• Binder snippets 是一個 vscode 外掛，能夠將程式碼拆分以獲得更高的生產力

GetX

一個簡單的回應式狀態管理解決方案。

• GetX package
• GetX Flutter Firebase Auth Example, by Jeff McMorris

states_rebuilder

一種將狀態管理與依賴注入解決方案和整合路由器相結合的方法。更多訊息，請參閱以下訊息：

• States Rebuilder 專案程式碼

• States Rebuilder documentation

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)

solidart

A simple but powerful state management solution inspired by SolidJS.

• Official Documentation
• solidart package
• flutter_solidart package

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