layerx_20241129.pdf

Transcript

1. UI ίϯϙʔωϯτ͔Βߟ͑Δ ΞʔΩςΫνϟ Flutter ΞʔΩςΫνϟઃܭͷ࠷લઢ
2. About Me ҏ౻ ګฏ גࣜձࣾαΠόʔΤʔδΣϯτ Github: KyoheiG3 X: KyoheiG3
3. MVVM BLoC Redux MVC Flux Provider
4. MVVM BLoC Redux MVC Flux Provider
5. Flutter ެࣜυΩϡϝϯτ https://docs. fl utter.dev/app-architecture
6. MVVM • Ͳ͏͍͏୯ҐͰ໾ׂΛ෼͚Δ΂͖͔ʁ
7. Service • ઀ଓ͢΂͖σʔλιʔεͷ୯ҐͰଘࡏ͢Δ͜ͱ͕๬·͍͠
8. Repository • ΞϓϦͰѻ͏σʔλͷछྨ͝ͱʹ༻ҙ͢Δ
9. Data layer • σʔλ΍σʔλιʔεͷ୯ҐͰ໾ׂΛ෼͚ͯѻ͏͜ͱ͕Ͱ͖ͦ͏
10. ViewModel • View 1ͭʹ͖ͭ ViewModel ΋ 1ͭʹͳΔ
11. View • Widget 1ͭʹ͖ͭ ViewModel 1ͭͰ͸ͳ͍ • ΞϓϦͷػೳʹରͯ͠ 1ͭଘࡏ͢Δʢʁʣ
12. UI layer • ΞϓϦͷػೳʹରͯ͠ 1ͭଘࡏ͢Δʢʁʣ
13. ͓஌Βͤը໘ 1ը໘ʹ 1ػೳ
14. ͓ؾʹೖΓҰཡը໘ ಉ͡ػೳͷཏྻ
15. ϗʔϜը໘ ༷ʑͳػೳͷू߹ମ
16. ϗʔϜը໘ UI layer ͸ UI ίϯϙʔωϯτ ͷ୯ҐͰ࡞Δ
17. Flutter ެࣜυΩϡϝϯτ https://docs. fl utter.dev/cookbook/ architecture/optimistic-state
18. Example feature: a subscribe button ը૾ग़లɿOptimistic State / https://docs. fl utter.dev/cookbook/architecture/optimistic-state
19. FlutterKaigi 2024
20. FlutterKaigi 2024
21. ొ৔ਓ෺
22. ্Ґͷ ViewModel ͕഑Լͷ ViewModel Λ࡞Δύλʔϯ
23. ্Ґͷ ViewModel ͕഑Լͷ ViewModel Λ࡞Δύλʔϯ @riverpod Future<HomeViewModel> homeViewModel(HomeViewModelRef ref) async { final favorites = await ref.watch(favoriteListStateNotifierProvider.future); final notifications = await ref.watch(notificationListStateNotifierProvider.future); return HomeViewModel( favorite: HomeFavoriteViewModel(favorites: favorites), notification: HomeNotificationViewModel(notifications: notifications), ); }
24. ্Ґͷ ViewModel ͕഑Լͷ ViewModel Λ࡞Δύλʔϯ class HomePage extends ConsumerWidget { const HomePage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final homeViewModel = ref.watch(homeViewModelProvider); return homeViewModel.when( data: (viewModel) { return Column( children: [ HomeFavoriteList(model: viewModel.favorite), HomeNotificationList(model: viewModel.notification), ], ); }, ); } }
25. ίϯϙʔωϯτຖʹ ViewModel Λ࡞Δύλʔϯ
26. ίϯϙʔωϯτຖʹ ViewModel Λ࡞Δύλʔϯ class HomeNotificationList extends ConsumerWidget { const HomeNotificationList({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final notificationListViewModel = ref.watch(notificationListViewModelProvider); return notificationListViewModel.when( data: (viewModel) { return Column( children: [ HomeNotificationItem(item: viewModel.notifications[0]), HomeNotificationItem(item: viewModel.notifications[1]), ], ); }, ); } }
27. ίϯϙʔωϯτຖʹ ViewModel Λ࡞Δύλʔϯ class HomeFavoriteList extends ConsumerWidget { const HomeFavoriteList({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final favoriteListViewModel = ref.watch(favoriteListViewModelProvider); return favoriteListViewModel.when( data: (viewModel) { return Column( children: [ HomeFavoriteItem(item: viewModel.favorites[0]), HomeFavoriteItem(item: viewModel.favorites[1]), ], ); }, ); } }
28. ίϯϙʔωϯτຖʹ ViewModel Λ࡞Δύλʔϯ class HomePage extends StatelessWidget { const HomePage({super.key}); @override Widget build(BuildContext context) { return const Column( children: [ HomeFavoriteList(), HomeNotificationList(), ], ); } }
29. Provider Λ্Ґʹ఻͑Δ
30. Provider Λ্Ґʹ఻͑Δ @riverpod Future<HomeFavoriteListViewModel> favoriteListViewModel(FavoriteListViewModelRef ref) async { final state = await ref.watch(favoriteListStateNotifierProvider.future); return HomeFavoriteListViewModel( favorites: state.favorites, ); } @riverpod Future<HomeNotificationListViewModel> notificationListViewModel(NotificationListViewModelRef ref) async { final state = await ref.watch(notificationListStateNotifierProvider.future); return HomeNotificationListViewModel( notifications: state.notifications, ); }
31. @riverpod Future<HomeFavoriteListViewModel> favoriteListViewModel(FavoriteListViewModelRef ref) async { final state = await ref.watch(favoriteListStateNotifierProvider.future); return HomeFavoriteListViewModel( favorites: state.favorites, ); } @riverpod Future<HomeNotificationListViewModel> notificationListViewModel(NotificationListViewModelRef ref) async { final state = await ref.watch(notificationListStateNotifierProvider.future); return HomeNotificationListViewModel( notifications: state.notifications, ); } favoriteListStateNotifierProvider.future notificationListStateNotifierProvider.future Provider Λ্Ґʹ఻͑Δ 4UBUF
    ΛϦϑϨογϡ Ͱ͖Δͱྑͦ͞͏
32. Provider Λ্Ґʹ఻͑Δ class HomePage extends ConsumerWidget { const HomePage({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { return RefreshIndicator( onRefresh: () => ( ref.refresh(favoriteListStateNotifierProvider.future), ref.refresh(notificationListStateNotifierProvider.future), ).wait, child: const Column( children: [ HomeFavoriteList(), HomeNotificationList(), ], ), ); } }
33. ϗʔϜը໘ ௨৴΍ͦͷଞͷॲཧ͕׬ྃ ͨ͠ॱʹߋ৽͞Εͯ͠·͏
34. Provider Λ Override ͢Δύλʔϯ
35. Provider Λ Override ͢Δύλʔϯ @riverpod Future<NotificationListViewModel> homeNotificationListViewModel(_) => throw UnimplementedError(); class HomeNotificationList extends ConsumerWidget { const HomeNotificationList({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final notificationListViewModel = ref.watch(homeNotificationListViewModelProvider); return notificationListViewModel.when( data: (viewModel) { return Column( children: [ HomeNotificationItem(item: viewModel.notifications[0]), HomeNotificationItem(item: viewModel.notifications[1]), ], ); }, ); } }
36. Provider Λ Override ͢Δύλʔϯ @riverpod Future<FavoriteListViewModel> homeFavoriteListViewModel(_) => throw UnimplementedError(); class HomeFavoriteList extends ConsumerWidget { const HomeFavoriteList({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final favoriteListViewModel = ref.watch(homeFavoriteListViewModelProvider); return favoriteListViewModel.when( data: (viewModel) { return Column( children: [ HomeFavoriteItem(item: viewModel.favorites[0]), HomeFavoriteItem(item: viewModel.favorites[1]), ], ); }, ); } }
37. Provider Λ Override ͢Δύλʔϯ return FutureBuilder( future: ( ref.watch(favoriteListViewModelProvider.future), ref.watch(notificationListViewModelProvider.future), ).wait, builder: (context, snapshot) { final data = snapshot.data!; return ProviderScope( overrides: [ homeFavoriteListViewModelProvider.overrideWith((_) => data.$1), homeNotificationListViewModelProvider.overrideWith((_) => data.$2), ], child: const Column( children: [ HomeFavoriteList(), HomeNotificationList(), ], ), ); }, );
38. Provider Λ Override ͢Δύλʔϯ return FutureBuilder( future: ( ref.watch(favoriteListViewModelProvider.future), ref.watch(notificationListViewModelProvider.future), ).wait, builder: (context, snapshot) { final data = snapshot.data!; return ProviderScope( overrides: [ homeFavoriteListViewModelProvider.overrideWith((_) => data.$1), homeNotificationListViewModelProvider.overrideWith((_) => data.$2), ], child: const Column( children: [ HomeFavoriteList(), HomeNotificationList(), ], ), ); }, );
39. ·ͱΊ • UI layer ΛͲͷΑ͏ͳ୯ҐͰ෼͚Δͷ͔Λߟ͑ͳ͕Βઃܭ͢Δ • View ಉ࢜Ͱ ViewModel ΛόέπϦϨʔ͠ͳ͍ํ๏ʹ௅ઓ͢Δ • UI ͷίϯϙʔωϯτԽͷ࢓૊Έ͕Ͱ͖ͨΒɺෳࡶͰ͸ͳ͍ը໘Ͱ΋ͳΔ΂ ͘ಉ͡࢓૊ΈΛར༻࣮ͨ͠૷ʹ͢Δ
40. Thanks !