Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
How to use provider package
makicamel
July 16, 2019
Programming
5
740
How to use provider package
makicamel
July 16, 2019
Tweet
Share
More Decks by makicamel
See All by makicamel
makicamel
0
200
makicamel
1
280
makicamel
1
1.1k
makicamel
0
1.3k
makicamel
5
460
makicamel
7
6.1k
makicamel
1
250
makicamel
7
750
makicamel
3
1.8k
Other Decks in Programming
See All in Programming
tkow
1
120
tetsukick
0
180
makomakok
1
260
meemeelab
0
300
andpad
2
280
bk_18
2
230
martysuzuki
1
570
voyage_tech
0
130
panini
1
160
borkdude
2
220
manfredsteyer
PRO
0
160
tooppoo
0
210
Featured
See All Featured
trishagee
24
2.6k
smashingmag
230
18k
cherdarchuk
71
260k
zakiwarfel
88
3.4k
robhawkes
52
2.8k
eitanlees
112
10k
chrislema
231
16k
carmenhchung
31
1.5k
bermonpainter
342
26k
tenderlove
53
3.5k
malarkey
392
61k
sstephenson
145
12k
Transcript
ͰΘ͔Δ ΏΔ;ΘQSPWJEFSೖ 2019.7.16. Flutter Meetup Tokyo #10 @makicamel ͍ํ
ࣗݾհ •@makicamel / ݪສق •גࣜձࣾGaiax •Flutterྺ3ϲ݄͘Β͍ •Ruby ͱϏʔϧɹɹͱ͓ञ͕͖
ࣗݾհ
•ڥքͱͯ͠ࠓਂ0࣌ͷDateTimeΠϯελϯε͕΄͍͠ DateCalc.now().beginningOfDay(); •aͱb͕ಉ͔͡Ͳ͏͔ఆ͍ͨ͠ a.isSameDay(b); •c͕Կϲ݄લͳͷ͔Λऔಘ͍ͨ͠ c.differenceValue(type: DateType.month); •1ޙͷࠓͷΛग़͍ͨ͠ DateCalc.now().addYear(1); date_calc
provider
provider ? •͍··ͰͷStateཧͷཱऀ •scoped model •BLoC •Rx •Stream → ͪΐͬͱΓͳ͍
→ ͪΐͬͱෳࡶ͗͢Δ
provider ? •scoped modelʹۙ͘ɺػೳΛ૿ͨ͠ͷ͕provider Google I/O 2019Ͱprovider͕Googleެࣜਪʹ ͍·ผͷํ๏Λ͍ͬͯΔਓ ແཧʹม͑ͳ͍͍ͯ͘Αʂ
৽࢝͘͠ΊΔͳΒ provider͕அવΦεεϝ✨ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0 IUUQZPVUVCFE@NDTNSG* ."5546--*7"/
State 4UBSUUIJOLJOHEFDMBSBUJWFMZcqVUUFSEFW IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUEFDMBSBUJWF એݴత
•ୡ͖͢త(ग़ྗ)Λࣔ͠ ࣮ݱ͢Δखଓ͖γεςϜʹ ͤΔ •ཉ͍͠σʔλ Λهड़ •ॲཧํ๏Θͳ͍ એݴܕ / ໋ྩܕ •తΛୡ͢ΔͨΊͷํ๏
Λʮखଓ͖ʯͱͯࣔ͢͠ •ॲཧɾऔಘํ๏ Λهड़ •࣮ߦ໋͖͢ྩྻͰ ߏ͞ΕΔ IUUQTKBXJLJQFEJBPSHXJLJએݴܕϓϩάϥϛϯά IUUQTKBXJLJQFEJBPSHXJLJ໋ྩܕϓϩάϥϛϯά ͪͳΈʹ3VCZ ΦϒδΣΫτࢦΛಋೖ໋ͨ͠ྩܕݴޠ How What
class SomeWidget extends StatefulWidget { SomeWidgetState state; SomeItem value; @override
createState() => state = SomeWidgetState(); void updateWidget() => state.updateState(); } class SomeWidgetState extends State<SomeWidget> { void updateState() { setState(() {}); } @override Widget build(BuildContext context) { return SomeAwesomeWidget(...); } } એݴܕ / ໋ྩܕ
class AnotherWidget extends StatelessWidget { @override Widget build(BuildContext context) {
return FlatButton( child: Text('PUSH'), onPressed: () { var widget = SomeWidget() ..value = someItem ..updateWidget(); }, ); } } એݴܕ / ໋ྩܕ
4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF એݴܕ / ໋ྩܕ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0 IUUQZPVUVCFE@NDTNSG* •AnotherWidget͕SomeWidgetΛΓ͍͗ͯ͢Δ
ΞϓϦ͕େ͖͘ͳΔͱΩπ͍ •Ͳ͜ͰState͕มߋ͞ΕΔ͔Θ͔Βͳ͍ ΞϓϦΛcrashͤ͞ΔՄೳੑ͕͋Δ
એݴܕ / ໋ྩܕ 4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF UIΞϓϦέʔγϣϯͷঢ়ଶ(state)Λ Ϗϧυܾͯ͠·Δͷ
void someHandler() { final items = somehowGetMyItems(); items.add(myAwesomeItem); } class
SomeWidget extends StatelessWidget { @override Widget build(BuildContext context) { var items = somehowGetMyItems(context); return SomeAwesomeWidget(...); } } એݴܕ / ໋ྩܕ providerͷग़൪ UIͱ stateͷ
࣮ͯ͠ΈΑ͏
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ
ϨετϥϯͷਥͰΦʔμʔ͕ฒͿ͜Μͳ൘ Πϝʔδਤ ΦϜϨπ ×1 εʔϓ ×1 A ΤϏϑϥΠ ×2 ϥΠε
×2 B ϋϜΧπ ×1 ΤϏϑϥΠ ×2 C
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ
Model •OrderΫϥε Item(ྉཧ) ςʔϒϧ൪߸Λϝϯόʹ࣋ͭ •OrderPoolΫϥε Φʔμʔ͕ೖΔͱ૿͑ɺ Φʔμʔ͕ఏڙ͞ΕΔͱݮΔ ΦϜϨπ ×1 εʔϓ
×1 A ΦϜϨπ ×1 εʔϓ ×1 A ΤϏϑϥΠ ×2 ϥΠε ×2 B ϋϜΧπ ×1 ΤϏϑϥΠ ×2 C
class Order { int id; Table tableNum; List<Item> items; Order(this.id,
this.tableNum, this.items); } Model ΦϜϨπ ×1 εʔϓ ×1 A
class OrderPool { int _max = 0; List<Order> _orders =
[]; List<Order> get orders => _orders; void add(Table tableNum, List names) { var items = names.map( (name) => Item(name)).toList(); _orders.add(Order(_max, tableNum, items)); _max += 1; } void remove(...) {...} } Model ΦϜϨπ ×1 εʔϓ ×1 A ΤϏϑϥΠ ×2 ϥΠε ×2 B ϋϜΧπ ×1 ΤϏϑϥΠ ×2 C
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ
ChangeNotifier •͍ͬͯ͏͚ͩͷਓ •Modelʹมߋ͕͋ͬͨ࣌ʹ มߋͨ͠Αͬͯ௨͢Δ •ModelͰextends͞ΕΔ Φʔμʔ͍Γ·ͨ͠ʔʂ ˞ͳ͓ɺMJTUFOFSͷొʙݸ·Ͱ͕ਪ 'MVUUFS4UBUF.BOBHFNFOUXJUI1SPWJEFSc,BSUIJL1POOBNJO'MVUUFS$PNNVOJUZ.FEJVN IUUQTNFEJVNDPNqVUUFSDPNNVOJUZqVUUFSTUBUFNBOBHFNFOUXJUIQSPWJEFSFFCCDBD
class OrderPool extends ChangeNotifier { int _max = 0; List<Order>
_orders = []; List<Order> get orders => _orders; void add(Table tableNum, List names) { var items = names.map( (name) => Item(name)).toList(); _orders.add(Order(_max, tableNum, items)); _max += 1; notifyListeners(); } void remove(...) {...} } ChangeNotifier มߋͨ͠Αͬͯ௨
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ
ChangeNotifierProvider •௨Λಧ͚ͯ൘Λߋ৽͢Δਓ •ModelΛ͏ΫϥεΛwrap͢ΔܗͰઃஔ (৭ΜͳΫϥε͔Βࢀর͞ΕΔ࣌ main.dartͷΑ͏ͳτοϓϨϕϧ) ɹɹ˞ ຊʹඞཁͱͳΔ࣌·ͰϦϏϧυ͠ͳ͍ Φʔμʔ͖ͨΑɺஔ͍ͱ͘Ͷ
class OrderApp extends StatelessWidget { @override Widget build(BuildContext context) {
return ChangeNotifierProvider( builder: (context) => OrderPool(), child: MaterialApp( title: 'OrderManagement', home: OrderBoard(), )); } } ChangeNotifierProvider ͏Ϋϥε(OrderBoard)ͷ্ҐͰએݴ ChangeNotifier͋ Λܧঝͨ͠ ModelΛࢦఆ
MultiProvider •ͨ͘͞Μ͍Δ ChangeNotifierProvider Φʔμʔ͖ͨΑ ͓٬༷͕͖·ͨ͠
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ
•Φʔμʔ൘ •Provider͔Β Λड͚औͬͯදࣔ •ModelΛࢦఆͯ͠͏ Consumer ΦϜϨπ ×1 εʔϓ ×1 A
ΤϏϑϥΠ ×2 ϥΠε ×2 B ϋϜΧπ ×1 ΤϏϑϥΠ ×2 C
class OrderBoard extends StatelessWidget { @override Widget build(BuildContext context) {
return Scaffold( appBar: AppBar(title: Text('OrderBoard')), body: Consumer<OrderPool>(builder: (context, orderList, _) { return ListView(children: [ for (Order order in orderList.orders) ... [OrderCard(order: order)] ]); }), ); } } Consumer ΦϜϨπ ×1 εʔϓ ×1 A ΤϏϑϥΠ ×2 ϥΠε ×2 B ϋϜΧπ ×1 ΤϏϑϥΠ ×2 C
•Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొਓ → ModelͰmixin → ͏Widget(Ϋϥε)Λwrap
→ දࣔWidget(෦)Λwrap
•Easy & Simple •WidgetπϦʔ͔Βͳ͘ͳΔͱσϑΥϧτͰdispose •ඞཁͳՕॴͷΈϦϏϧυ •Stream͑Δ providerͷ͍͍ͱ͜Ζ
•Ί͚ͩͲͨͿΜΘ͔Γ͍͢BLoCύλʔϯͷղઆ | @kabochapo - Qiita https://qiita.com/kabochapo/items/8738223894fb74f952d3 •FlutterͷBLoC(Business Logic Component)ͷϥΠϑαΠΫϧΛ ਖ਼֬ʹཧͯ͠ఏڙ͢Δbloc_providerύοέʔδͷղઆ
| mono in Flutter ' - Medium https://medium.com/flutter-jp/bloc-provider-70e869b11b2f •[Flutter] package:provider ͷ֤ϓϩόΠμͷৄࡉ | @kabochapo - Qiita https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9 •provider | rrousselGit/provider - GitHub https://github.com/rrousselGit/provider •provider_shopper | filiph/samples - GitHub https://github.com/filiph/samples/tree/provider-shopper/provider_shopper •Pragmatic State Management in Flutter (Google I/O'19) http://youtu.be/d_m5csmrf7I ࢀߟ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠