[Flutter] Flutter Provider 看似簡單卻又不簡單的狀態管理工具

當 App 開發到一定的規模時，就需要一個狀態管理框架與工具， 用 Provider 有什麼好處？要解決什麼問題？ 用 Provider 可以大大減少冗餘的程式碼和複雜性？ 用 Bloc 狀態管理還是可以一統 Flutter 的天下嗎？ 在這場演講告訴您

#flutter #provider #bloc #development

Transcript

1. Flutter Provider 看似簡單卻⼜不簡單的 狀態管理⼯具 Kaohsiung Johnny Sung
3. Full stack developer Johnny Sung (宋岡諺) https://fb.com/j796160836 https://blog.jks.co ff ee/ https://www.slideshare.net/j796160836 https://github.com/j796160836
4. https://pub.dev/packages/provider
5. 講在 Provider 之前 — InheritedWidget Kaohsiung
6. https://www.youtube.com/watch?v=Zbm3hjPjQMk
7. 在 Flutter 的世界裡...
8. 萬物皆 Widget 在對應的狀態產⽣對應的畫⾯
9. https://abhishekdoshi26.medium.com/deep-dive-into- fl utter-trees-542f7395df5c
10. Widget 兄弟其實還少⼀個 • StatefulWidget • StatelessWidget • InheritedWidget 就是我啦！
11. InheritedWidget 想解決 
 Widget tree 跨層傳遞資料 不便的問題
12. https://docs. fl utter.dev/data-and-backend/state-mgmt/simple
13. class FrogColor extends InheritedWidget { const FrogColor({ super.key, required this.color, required super.child, }); final Color color; static FrogColor? maybeOf(BuildContext context) { return context.dependOnInheritedWidgetOfExactType<FrogColor>(); } static FrogColor of(BuildContext context) { final FrogColor? result = maybeOf(context); assert(result != null, 'No FrogColor found in context'); return result!; } @override bool updateShouldNotify(FrogColor oldWidget) => color != oldWidget.color; } https://api. fl utter.dev/ fl utter/widgets/InheritedWidget-class.html 背後宣告
14. // continuing from previous example... class MyPage extends StatelessWidget { const MyPage({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: FrogColor( color: Colors.green, child: Builder( builder: (BuildContext innerContext) { return Text( 'Hello Frog', style: TextStyle(color: FrogColor.of(innerContext).color), ); }, ), ), ); } } https://api. fl utter.dev/ fl utter/widgets/InheritedWidget-class.html 呼叫使⽤
15. Provider 就是 InheritedWidget 的延伸（與包裝） 其實
16. 不信？讓我們看看⼀⼩段 Provider 的原始碼
17. class FrogColor extends InheritedWidget { const FrogColor({ super.key, required this.color, required super.child, }); final Color color; static FrogColor? maybeOf(BuildContext context) { return context.dependOnInheritedWidgetOfExactType<FrogColor>(); } static FrogColor of(BuildContext context) { final FrogColor? result = maybeOf(context); assert(result != null, 'No FrogColor found in context'); return result!; } @override bool updateShouldNotify(FrogColor oldWidget) => color != oldWidget.color; } https://api. fl utter.dev/ fl utter/widgets/InheritedWidget-class.html （剛剛看到的段落）
18. class Provider<T> extends InheritedProvider<T> { Provider({ Key? key, required Create<T> create, Dispose<T>? dispose, bool? lazy, TransitionBuilder? builder, Widget? child, }) : super( key: key, lazy: lazy, builder: builder, create: create, dispose: dispose, debugCheckInvalidValueType: kReleaseMode ? null : (T value) => Provider.debugCheckInvalidValueType?.call<T>(value), child: child, ); static T of<T>(BuildContext context, {bool listen = true}) { assert( context.owner!.debugBuilding || listen == false || debugIsInInheritedProviderUpdate, ''' Tried to listen to a value exposed with provider, from outside of the widget tree. … 略 ''', ); final inheritedElement = _inheritedElementOf<T>(context); if (listen) { context.dependOnInheritedWidgetOfExactType<_InheritedProviderScope<T?>>(); } final value = inheritedElement?.value; if (_isSoundMode) { if (value is! T) { throw ProviderNullException(T, context.widget.runtimeType); } return value; } return value as T; } } Provider 的原始碼
20. Provider 家族 • Provider：提供遠端存取的服務 • ChangeNoti fi erProvider：它會監聽 model 的變化。當資料發⽣變更，它會重繪 Consumer 的⼦ widget。 • FutureProvider：是 FutureBuilder 的⼀個封裝，提供⼀個 Future，FutureProvider 會在 Future 完成的時候 通知 Consumer 重繪它的 Widget ⼦樹。 • StreamProvider：是 StreamBuilder 的⼀個封裝，提供⼀個 Stream，然後 Consumer 會在 Stream 收到事 件時更新它的 Widget⼦樹。
21. import 'package:flutter/foundation.dart'; class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } }
22. import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'counter.dart'; class MyHomePage extends StatefulWidget { const MyHomePage({super.key}); @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: ChangeNotifierProvider<Counter>( create: (context) => Counter(), child: Builder(builder: (context) { final counter = context.watch<Counter>().count; return Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('$counter'), ElevatedButton( onPressed: () { final counter = context.read<Counter?>(); counter?.increment(); print('count=${counter?.count ?? 0}'); }, child: const Text('Push me')), ], ), ); }), ), ); } }
23. Consumer<Counter>(builder: (context, myModel, child) { return Text('${myModel.count}'); }), 或 三種寫法都可以 註：Consumer 的部份 Text('${context.watch<Counter>().count}') Text('${Provider.of<Counter>(context).count}') 或
24. /// Exposes the [read] method. extension ReadContext on BuildContext { T read<T>() { return Provider.of<T>(this, listen: false); } } Provider 原始碼中 context.read() 對應到 Provider.of()
25. 選單按鈕 分⾴內⾴
26. import 'package:flutter/foundation.dart'; class TabProvider with ChangeNotifier { int _currentIndex = 0; int get currentIndex => _currentIndex; set currentIndex(int index) { _currentIndex = index; notifyListeners(); } }
27. mixin & with Mixins are a way of reusing a class’s code in multiple class hierarchies. 簡單來說就是： 
 我提供⼀些⽅法給你使⽤，但我不⽤成為你的⽗類別。 mixin ShowName { void showName() { print('mixin ShowName'); } } class Quadrilateral with ShowName { void showAllSideLength() { showName(); } } https://ithelp.ithome.com.tw/articles/10268368?sc=iThelpR
28. import 'package:flutter/material.dart'; import 'package:flutter_provider_tab_demo/tab_provider.dart'; import 'package:flutter_provider_tab_demo/tab_screen.dart'; import 'package:provider/provider.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => TabProvider()), ], child: TabScreen(), ), ); } }
29. import 'package:flutter/material.dart'; import 'package:flutter_provider_tab_demo/tab_provider.dart'; import 'package:provider/provider.dart'; class TabItem { final String name; final int index; TabItem(this.name, this.index); } class TabScreen extends StatelessWidget { final List<TabItem> tabItems = [ TabItem('Tab 1', 0), TabItem('Tab 2', 1), TabItem('Tab 3', 2), ]; TabScreen({super.key}); @override Widget build(BuildContext context) { // build } } return Scaffold( appBar: AppBar( title: const Text('Tab Example'), ), body: Column( children: [ ListView.builder( shrinkWrap: true, itemCount: tabItems.length, itemBuilder: (context, index) { TabItem tabItem = tabItems[index]; return ListTile( title: Text(tabItem.name), onTap: () { TabProvider p = context.read<TabProvider>(); p.currentIndex = tabItem.index; }, ); }, ), Expanded( child: IndexedStack( index: context.watch<TabProvider>().currentIndex, children: const [ Center(child: Text('Tab 1')), Center(child: Text('Tab 2')), Center(child: Text('Tab 3')), ], ), ), ], ), ); 選單按鈕 分⾴內⾴
31. Provider 使⽤情境 • 會員帳號權限管理 • 帳號登入 • Token 過期、被強迫登出 • Widget tree 平⾏傳遞資料 （例如：分⾴切換）
32. 全域的狀態機變數 Provider 我的理解：
33. 全域變數 雖可恥但有⽤
34. https://stackover fl ow.com/questions/73226745/ fl utter-many-bloc-providers-cluttering-widget-tree
35. MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: BlocProvider<SigninCubit>( create: (context) => SigninCubit(), child: BlocProvider<UpdateCubit>( create: (context) => UpdateCubit(), child: BlocProvider<ProfileBloc>( create: (context) => ProfileBloc(), child: BlocProvider<VoteBloc>( create: (context) => VoteBloc(), child: BlocProvider<MessageBloc>( create: (context) => MessageBloc(), child: BlocProvider<LeaderboardBloc>( create: (context) => LeaderboardBloc(), child: BlocProvider<CommentBloc>( create: (context) => CommentBloc(), child: BlocProvider<EditbioCubit>( create: (context) => EditbioCubit(), child: BlocProvider<CommentCubit>( create: (context) => CommentCubit(), child: BlocProvider<SearchBloc>( create: (context) => SearchBloc(), child: BlocProvider<SwipeBloc>( create: (context) => SwipeBloc(), child: Scaffold( body: Builder(builder: (context) { return const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Sample'), ], ), ); }), ), ), ), ), ), ), ), ), ), ), ), ), ); 不免俗的，Flutter 沒寫好的話，很容易寫出⼀堆波動拳 https://captown.capcom.com/zh-TW/museums/street fi ghter/5/images/125#group=0&photo=0
36. 部分的波動拳可以⽤ MultiXXXProvider 解決部分的問題 但這範例還有權責不明確問題 MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MultiBlocProvider( providers: [ BlocProvider<SigninCubit>(create: (context) => SigninCubit()), BlocProvider<UpdateCubit>(create: (context) => UpdateCubit()), BlocProvider<ProfileBloc>(create: (context) => ProfileBloc()), BlocProvider<VoteBloc>(create: (context) => VoteBloc()), BlocProvider<MessageBloc>(create: (context) => MessageBloc()), BlocProvider<LeaderboardBloc>(create: (context) => LeaderboardBloc()), BlocProvider<CommentBloc>(create: (context) => CommentBloc()), BlocProvider<EditbioCubit>(create: (context) => EditbioCubit()), BlocProvider<CommentCubit>(create: (context) => CommentCubit()), BlocProvider<SearchBloc>(create: (context) => SearchBloc()), BlocProvider<SwipeBloc>(create: (context) => SwipeBloc()), ], child: Scaffold( body: Builder(builder: (context) { return const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Sample'), ], ), ); }), ), ), );
37. 要慎⽤呀！ https://pic1.zhimg.com/80/v2-5af8d68f267c1ed3ece59d5bd919a870_1440w.webp
38. 解決波動拳⼩建議 • View 分類好封裝進 StatelessWidget • 邏輯與 View 分類分開存放 • ⽤ MultiProvider 或 MultiBlocProvider 等類似套件來拉平
39. Q: Provider 與 Bloc 有什麼差異？ 我的回答：要解決的問題不同，使⽤不同的解決⽅式
40. 當 Bloc 遇上 provider ? http://teddy-chen-tw.blogspot.com/2012/03/blog-post_20.html 爭什麼，摻在⼀起做成撒尿⽜丸啊
41. https://pub.dev/packages/ fl utter_bloc
42. https://pub.dev/packages/ fl utter_bloc 😜
43. BlocProvider = Bloc + Provider
44. BlocProvider 家族 • BlocProvider • BlocBuilder • BlocListener • BlocConsumer = BlocBuilder + BlocListener
45. BlocProvider<LoginBloc>( create: (BuildContext context) => LoginBloc()), child: …, ), 在 Widget Tree 最頂層處使⽤ BlocProvider 並宣告⾃訂的 Bloc （以下是⼀些 pseudo code） BlocProvider 使⽤⽅式 (1/4)
46. BlocBuilder<LoginBloc, LoginState>(builder: (context, state) { if (state is LoginStateLoggedIn) { return …; } if (state is LoginStateInitial) { return …; } return Container(); } 在所需 Widget 的 build() 處使⽤ BlocBuilder （以下是⼀些 pseudo code） BlocProvider 使⽤⽅式 (2/4) 這裡沒指定 bloc 參數時，預設會 Provider 往上找
47. 在需要聆聽事件的地⽅使⽤ BlocListener （以下是⼀些 pseudo code） BlocProvider 使⽤⽅式 (3/4) 這裡沒指定 bloc 參數時，預設會 Provider 往上找 BlocListener<LoginBloc, LoginState>( listener: (context, state) { if (state is LoginStateError) { // Do Something } if (state is LoginStateLoggedIn) { // Do Something } }, child: … );
48. 在需要變更狀態的地⽅使⽤ context.read() 並操作 Bloc （以下是⼀些 pseudo code） BlocProvider 使⽤⽅式 (4/4) ElevatedButton( child: const Text('Login'), onPressed: () { context.read<LoginBloc>().add(LoginEventLogin()); }, )
49. https://docs. fl utter.dev/data-and-backend/state-mgmt/simple
50. Q&A
52. 其他狀態管理比較 Kaohsiung
53. https://k.sina.cn/article_7407912364_1b98bc5ac00101jqaw.html?from=cul
54. https://pub.dev/packages/mobx
56. mobx_codegen
58. https://pub.dev/packages/scoped_model
60. https://pub.dev/packages/get
63. https://pub.dev/packages/riverpod
65. 感謝聆聽