Flutter Riverpodのすゝめ

2020年8月21日 Yumemi.apk #1

Transcript

1. 2020/08/21 ͸Μ·ʔ @ Flutter Riverpodͷ͢ʍΊ @Yumemi.apk #1 Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.
2. ͸Μ·ʔ • AndroidΤϯδχΞ • 2019೥8݄גࣜձࣾΏΊΈத్ೖࣾ • ݩϝΠϯϑϨʔϜΤϯδχΞ • 6݄ʹ௕ঁ஀ੜ • Twitter : @watashi_desu_82 • Qiita : @hammer0802 ࣗݾ঺հ ↑ࢲͷ෼਎
 ϋϯϚϩΠυ͘Μ 2
3. 1. RiverpodΛ஌Δ্Ͱͷલఏ஌ࣝ 2. Riverpodͱ͸ʁProviderͱൺֱͨ͠ར఺ ࠓ೔࿩͢͜ͱ 3
4. ࠓ೔ͷΰʔϧʢͱݸਓతئ๬ʣ 1. Riverpodͷར఺͕ͬ͘͟ΓΘ͔Δ 2. Provider→RiverpodҠߦͷ͖͔͚ͬʹͳΔ 3. Riverpodɺͻ͍ͯ͸FlutterʹڵຯΛ࣋ͬͯ΋Β͏ʢFlutter஥ؒΛ૿ ΍͢ʣ 4
5. લఏ஌ࣝ 5
6. Flutterɹɹͱ͸ʁ • ϚϧνϓϥοτϑΥʔϜϑϨʔϜϫʔΫʢAndroid / iOS / Web / Desktopʣ • Google੡ • એݴతUIɹ͜͏͍͏ͷˠ • ݴޠ͸Dart • JITʢJust In TimeʣͱAOTʢAhead Of Timeʣ྆ํͷίϯύΠϥΛαϙʔτ
 →Hot Reload͕ศར Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC. 6
7. એݴతUIͰ͋Γ͕ͪͳঢ়ଶ؅ཧ໰୊ Parent Level 1 Level 2 Level 3 Data Prop Drilling ͜͜Ͱࢀর͍ͨ͠ όέπϦϨʔͷΑ͏ʹ σʔλΛड͚౉ͯ͠͠ ͠·͏ʢLevel 1, 2Ͱ ඞཁͳ͍ͷʹʣ 7
8. ໰୊ղܾͷͨΊͷ༷ʑͳΞʔΩςΫνϟ BLoC Redux Provider Provide setState MobX Scoped Model 8
9. BLoC Redux Provider Provide setState MobX Scoped Model Providerਪ঑͠·͢ 9
10. Provider ʮͱΓ͋͑ͣProvider࢖͓͏ʯͷಓے͕Ͱ͖ͨ ※͋͘·Ͱਪ঑Ͱ͋Γɺۜͷ஄ؙͰ͸ͳ͍ 10
11. Providerͱ͸ʁ • ঢ়ଶ؅ཧ͓ΑͼDIͷ࢓૊ΈΛఏڙ͢ΔϥΠϒϥϦ • Widget΁DI͢Δ͜ͱ͕Ͱ͖ɺҾ਺Ͱ஋Λ౉͢ඞཁͳ͠
 →Prop Drillingճආ • ChangeNotifier΍StateNotifierΛ࢖ͬͯWidgetʹ஋Λ௨஌͠ɺUIߋ৽
 →ঢ়ଶͱϩδοΫΛWidget͔Β෼཭ • ஋Λࢀর͍ͯ͠ΔWidget͚͕ͩϦϏϧυ
 →ύϑΥʔϚϯε޲্ Foo( child: Consumer<A>( builder: (_, a, child) { return Bar(a: a, child: child); }, child: Baz(), ), ) a͕ߋ৽͞ΕͨΒ
 Bar͚ͩϦϏϧυ 11
12. Flutterք۾ʹฏԺ͕๚Εͨ…͔ʹݟ͑ͨ 12
13. ৽ͨͳࢗ٬ɺRiverpod • ࠓ೥6݄stable൛ϦϦʔεʢ20/08/21࣌఺ : v0.6.1ʣ • Providerͱಉ͡࡞ऀ • ProviderΛҰ͔Β࠶ߏஙͨ͠৽͍͠Provider • Flutter༻ɺflutter_hooks༻ɺඇFlutter༻ͷ3छྨ ProviderΑΓԿ͕ྑ͘ͳͬͨͷ͔ʁ 13
14. Riverpodͷར఺ (Ұ෦) 14
15. Flutter͡Όͳͯ͘΋࢖͑Δ • BuildContextʹґଘ
 →FlutterͰ͔͠࢖͑ͳ͍ • ࠶ߏஙͨ͜͠ͱͰBuildContext͔Β୤ґଘ
 →Pure DartͰ΋࢖͑ΔΑ͏ʹͳͬͨʂ Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.
 Dart and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC. 15
16. άϩʔόϧม਺ͰProviderΛએݴͰ͖Δ main.dart void main() { runApp( StateNotifierProvider<HogeNotifer, String>( create: (_) => HogeNotifer(), child: MyApp(), ); } • ΞϓϦͷϧʔτͰએݴ
 →ProviderΛฤू͢Δͨͼʹ main.dartΛߦ͖དྷ… • ProviderScope഑ԼͳΒͲ͜Ͱ΋એݴՄೳ
 →WidgetͱProviderΛ1ϑΝΠϧʹू໿Ͱ͖Δ main.dart void main() { runApp( ProviderScope( child: MyApp(), ), ); } app.dart final hogeProvider = StateNotifierProvider((ref) => HogeNotifier() ); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Consumer( (context, read) { final hoge = read(hogeProvider); return Text(hoge); }, ), ), ); } } 16
17. ಉ͡ܕͷProviderΛෳ਺࣋ͯΔ • ʮWidget πϦʔΛ͔͞ͷ΅ͬͯ࠷دΓ ͷ Provider<T> Λऔಘ͠ɺͦͷ஋Λฦ ͢ʯ࢓༷ͷͨΊɺಉ͡ܕͷProviderΛ ෳ਺࣋ͯͳ͍ MultiProvider( providers: [ Provider<String>.value(value: ‘Mona’), Provider<String>.value(value: ‘Lisa’), ], child: HogeWidget(context), ) Widget HogeWidget(BuildContext context) { final firstName = Provider.of<String>(context); final lastName = Provider.of<String>(context); print(firstName); // Lisa͕දࣔ͞ΕΔ print(lastName); // Lisa͕දࣔ͞ΕΔ } • ಉ͡ܕͰ΋ෳ਺ͷProviderΛಠཱͯ͠ ࣋ͭ͜ͱ͕Ͱ͖Δ final firstNameProvider = Provider<String>((ref) => ‘Mona'); final lastNameProvider = Provider<String>((ref) => ‘Lisa’); : : Consumer( (context, read) { final firstName = read(firstNameProvider); final lastName = read(lastNameProvider); print(firstName); // Mona͕දࣔ͞ΕΔ print(lastName); // Lisa͕දࣔ͞ΕΔ } 17
18. ঢ়ଶͷܭࢉ݁ՌΛProviderͱͯ࣋ͯ͠Δ • Provider͔ΒผͷProviderͷঢ়ଶΛಡΈࠐΈɺͦΕΛܭࢉͨ݁͠ՌΛProvider ͱͯ࣋ͭ͜͠ͱ͕Ͱ͖Δ • watch͍ͯ͠ΔProviderͷঢ়ଶ͕มߋ͞Εͯ΋ɺܭࢉ݁Ռͷঢ়ଶ͕มΘΒͳ͍ ৔߹͸ࢀর͍ͯ͠ΔWidget͕ϦϏϧυ͞Εͳ͍ • ϑΟϧλʔ΍ιʔτͳͲͷػೳͰ࢖͏ͱύϑΥʔϚϯε࠷దԽ͕Ͱ͖Δ final firstNameProvider = StateProvider<String>((ref) => ‘Mona'); final lastNameProvider = StateProvider<String>((ref) => ‘Lisa’); final initialsProvider = Provider((ref) { final firstName = ref.watch(firstNameProvider).state; final lastName = ref.watch(lastNameProvider).state; return '${firstName[0]}${lastName[0]}'; }); home: Scaffold( body: Center( child: Consumer( (context, read) { final initials = read(initialsProvider); return Text(initials); // ML͕දࣔ͞ΕΔ }, ), ), 18
19. ֎෦ύϥϝʔλ͔ΒProviderΛ࡞੒Ͱ͖Δ • Ҿ਺ʹ஋Λ෇༩ͯ͠providerʹ౉͢͜ͱ͕Ͱ͖Δ • ࢖༻͢Δʹ͸ .family Λ࢖͏ // userIdΛ౉͠ɺUserRepository.fetch()Λ࢖ͬͯඇಉظͰϢʔβʔ৘ใΛऔಘ͢ΔͱԾఆ final userProvider = FutureProvider.family<User, int>((ref, userId) async { final userRepository = ref.read(userRepositoryProvider); return await userRepository.fetch(userId); }); 19
20. ෆཁͳProviderΛࣗಈͰഁغͰ͖Δ • લϖʔδͷίʔυͩͱɺUserΛऔಘ͢ΔͨͼUserͷProvider͕૿͍͑ͯͬͯ͠ ·͏ • ෆཁʹͳͬͨΒࣗಈతʹഁغͰ͖ΔΦϓγϣϯ͕͋Δʢ.autoDisposeʣ • .familyͱ.autoDispose͸ಉ࣌ʹ࢖͑Δ final userProvider = FutureProvider.family.autoDispose<User, int>((ref, userId) async { final userRepository = ref.read(userRepositoryProvider); return await userRepository.fetch(userId); }); 20
21. ͜ΕҎ֎ʹ΋Riverpodͷར఺͸ͨ͘͞Μ 21
22. Α͠ɺૣ଎Provider͔Β৐Γ׵͑Δͧʂ 22
23. ஫ҙɿഁյతมߋ͕·ͩଟ͍ ྫ͑͹ɺv0.6.0ͩͱ͜Ε͚ͩมߋʢbreaking changeؚΉʣ͋Γ ʢݸਓతʹ͸ʣ͜ΕΛߟྀͯ͠΋৐Γ׵͑Λݕ౼͢Δͷ͸͋Γ 23
24. ·ͱΊ 24
25. Riverpodɺࢼ͠ʹ࢖ͬͯΈΔͷ͸ ͍͔͕Ͱ͠ΐ͏͔ʁ • Riverpod͸Flutterঢ়ଶ؅ཧͷςούϯͰ͋ΔProviderΛ͞ΒʹਐԽͤͨ͞΋ͷ • Provider͕ಧ͍͍ͯͳ͔ͬͨᙱ͍ͱ͜Ζʹख͕ಧ͍͍ͯΔ • ·ͩ·ͩഁյతมߋ༗Γ͕ͩɺProvider͔ΒͷҠߦΛݕ౼ͯ͠΋ྑͦ͞͏ 25
26. ͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ 26
27. ࢀߟURL • RiverpodެࣜϖʔδLink • flutter_riverpod library • [Flutter] package:provider ͷ֤ϓϩόΠμͷৄࡉ • [Flutter]RiverpodΛ࢖ͬͯToDoΞϓϦΛ࡞ͬͯΈͨ (ࣗஶ) 27