How to use provider package

Slide 1

Slide 1 text

෼ͰΘ͔Δ  ΏΔ;ΘQSPWJEFSೖ໳ 2019.7.16.   Flutter Meetup Tokyo #10  @makicamel ࢖͍ํ

Slide 2

Slide 2 text

ࣗݾ঺հ •@makicamel / ઒ݪສق •גࣜձࣾGaiax •Flutterྺ3ϲ݄͘Β͍ •Ruby ͱϏʔϧɹɹͱ͓ञ͕޷͖

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

•ڥք஋ͱͯ͠ࠓ೔ਂ໷0࣌ͷDateTimeΠϯελϯε͕΄͍͠ DateCalc.now().beginningOfDay(); •aͱb͕ಉ͡೔͔Ͳ͏͔൑ఆ͍ͨ͠ a.isSameDay(b); •c͕Կϲ݄લͳͷ͔Λऔಘ͍ͨ͠ c.differenceValue(type: DateType.month); •1೥ޙͷࠓ೔ͷ೔෇Λग़͍ͨ͠ DateCalc.now().addYear(1); date_calc

Slide 5

Slide 5 text

provider

Slide 6

Slide 6 text

provider ? •͍··ͰͷState؅ཧͷཱ໾ऀ •scoped model •BLoC •Rx •Stream → ͪΐͬͱ෺଍Γͳ͍ → ͪΐͬͱෳࡶ͗͢Δ

Slide 7

Slide 7 text

provider ? •scoped modelʹۙ͘ɺػೳΛ૿΍ͨ͠ͷ͕provider  Google I/O 2019Ͱprovider͕Googleެࣜਪ঑ʹ   ͍·ผͷํ๏Λ࢖͍ͬͯΔਓ͸  ແཧʹม͑ͳ͍͍ͯ͘Αʂ ৽࢝͘͠ΊΔͳΒ  provider͕அવΦεεϝ✨ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0   IUUQZPVUVCFE@NDTNSG* ."5546--*7"/

Slide 8

Slide 8 text

State 4UBSUUIJOLJOHEFDMBSBUJWFMZcqVUUFSEFW  IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUEFDMBSBUJWF એݴత

Slide 9

Slide 9 text

•ୡ੒͢΂͖໨త(ग़ྗ)Λࣔ͠  ࣮ݱ͢Δखଓ͖͸γεςϜʹ ೚ͤΔ •ཉ͍͠σʔλ  Λهड़ •ॲཧํ๏͸໰Θͳ͍  એݴܕ / ໋ྩܕ •໨తΛୡ੒͢ΔͨΊͷํ๏ Λʮखଓ͖ʯͱͯࣔ͢͠  •ॲཧɾऔಘํ๏  Λهड़ •࣮ߦ͢΂໋͖ྩྻͰ  ߏ੒͞ΕΔ IUUQTKBXJLJQFEJBPSHXJLJએݴܕϓϩάϥϛϯά  IUUQTKBXJLJQFEJBPSHXJLJ໋ྩܕϓϩάϥϛϯά ͪͳΈʹ3VCZ͸  ΦϒδΣΫτࢦ޲Λಋೖ໋ͨ͠ྩܕݴޠ How What

Slide 10

Slide 10 text

class SomeWidget extends StatefulWidget { SomeWidgetState state; SomeItem value; @override createState() => state = SomeWidgetState(); void updateWidget() => state.updateState(); } class SomeWidgetState extends State { void updateState() { setState(() {}); } @override Widget build(BuildContext context) { return SomeAwesomeWidget(...); } } એݴܕ / ໋ྩܕ

Slide 11

Slide 11 text

class AnotherWidget extends StatelessWidget { @override Widget build(BuildContext context) { return FlatButton( child: Text('PUSH'), onPressed: () { var widget = SomeWidget() ..value = someItem ..updateWidget(); }, ); } } એݴܕ / ໋ྩܕ

Slide 12

Slide 12 text

4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW  IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF એݴܕ / ໋ྩܕ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0   IUUQZPVUVCFE@NDTNSG* •AnotherWidget͕SomeWidgetΛ஌Γ͍͗ͯ͢Δ  ΞϓϦ͕େ͖͘ͳΔͱΩπ͍ •Ͳ͜ͰState͕มߋ͞ΕΔ͔Θ͔Βͳ͍  ΞϓϦΛcrashͤ͞ΔՄೳੑ͕͋Δ

Slide 13

Slide 13 text

એݴܕ / ໋ྩܕ 4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW  IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF UI͸ΞϓϦέʔγϣϯͷঢ়ଶ(state)Λ  Ϗϧυܾͯ͠·Δ΋ͷ

Slide 14

Slide 14 text

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ͷ෼཭

Slide 15

Slide 15 text

࣮૷ͯ͠ΈΑ͏

Slide 16

Slide 16 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺

Slide 17

Slide 17 text

Ϩετϥϯͷਥ๪ͰΦʔμʔ͕ฒͿ͜Μͳ൘ Πϝʔδਤ ΦϜϨπ ×1  εʔϓ ×1  A୎ ΤϏϑϥΠ ×2  ϥΠε ×2  B୎ ϋϜΧπ ×1  ΤϏϑϥΠ ×2  C୎

Slide 18

Slide 18 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺

Slide 19

Slide 19 text

Model •OrderΫϥε  Item(ྉཧ)΍  ςʔϒϧ൪߸Λϝϯόʹ࣋ͭ •OrderPoolΫϥε  Φʔμʔ͕ೖΔͱ૿͑ɺ  Φʔμʔ͕ఏڙ͞ΕΔͱݮΔ ΦϜϨπ ×1  εʔϓ ×1  A୎ ΦϜϨπ ×1  εʔϓ ×1  A୎ ΤϏϑϥΠ ×2  ϥΠε ×2  B୎ ϋϜΧπ ×1  ΤϏϑϥΠ ×2  C୎

Slide 20

Slide 20 text

class Order { int id; Table tableNum; List items; Order(this.id, this.tableNum, this.items); } Model ΦϜϨπ ×1  εʔϓ ×1  A୎

Slide 21

Slide 21 text

class OrderPool { int _max = 0; List _orders = []; List 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୎

Slide 22

Slide 22 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺

Slide 23

Slide 23 text

ChangeNotiﬁer •͍ͬͯ͏͚ͩͷਓ •Modelʹมߋ͕͋ͬͨ࣌ʹ  มߋͨ͠Αͬͯ௨஌͢Δ •ModelͰextends͞ΕΔ Φʔμʔ͸͍Γ·ͨ͠ʔʂ ˞ͳ͓ɺMJTUFOFSͷొ࿥͸ʙݸ·Ͱ͕ਪ঑஋  'MVUUFS4UBUF.BOBHFNFOUXJUI1SPWJEFSc,BSUIJL1POOBNJO'MVUUFS$PNNVOJUZ.FEJVN  IUUQTNFEJVNDPNqVUUFSDPNNVOJUZqVUUFSTUBUFNBOBHFNFOUXJUIQSPWJEFSFFCCDBD

Slide 24

Slide 24 text

class OrderPool extends ChangeNotifier { int _max = 0; List _orders = []; List 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(...) {...} } ChangeNotiﬁer มߋͨ͠Αͬͯ௨஌

Slide 25

Slide 25 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺

Slide 26

Slide 26 text

ChangeNotiﬁerProvider •௨஌Λಧ͚ͯ൘Λߋ৽͢Δਓ •ModelΛ࢖͏ΫϥεΛwrap͢ΔܗͰઃஔ  (৭ΜͳΫϥε͔Βࢀর͞ΕΔ࣌͸  main.dartͷΑ͏ͳτοϓϨϕϧ΁) ɹɹ˞ ຊ౰ʹඞཁͱͳΔ࣌·ͰϦϏϧυ͠ͳ͍ Φʔμʔ͖ͨΑɺஔ͍ͱ͘Ͷ

Slide 27

Slide 27 text

class OrderApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( builder: (context) => OrderPool(), child: MaterialApp( title: 'OrderManagement', home: OrderBoard(), )); } } ChangeNotiﬁerProvider ࢖͏Ϋϥε(OrderBoard)ͷ্ҐͰએݴ ChangeNotiﬁer͋ Λܧঝͨ͠  ModelΛࢦఆ

Slide 28

Slide 28 text

MultiProvider •ͨ͘͞Μ͍Δ  ChangeNotiﬁerProvider Φʔμʔ͖ͨΑ ͓٬༷͕͖·ͨ͠

Slide 29

Slide 29 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺

Slide 30

Slide 30 text

•Φʔμʔ൘ •Provider͔Β  ஋Λड͚औͬͯදࣔ •ModelΛࢦఆͯ͠࢖͏ Consumer ΦϜϨπ ×1  εʔϓ ×1  A୎ ΤϏϑϥΠ ×2  ϥΠε ×2  B୎ ϋϜΧπ ×1  ΤϏϑϥΠ ×2  C୎

Slide 31

Slide 31 text

class OrderBoard extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('OrderBoard')), body: Consumer(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୎

Slide 32

Slide 32 text

•Model •ChangeNotiﬁer •ChangeNotiﬁerProvider •MultiProvider •Consumer ొ৔ਓ෺ → ModelͰmixin → ࢖͏Widget(Ϋϥε)Λwrap → දࣔWidget(෦඼)Λwrap

Slide 33

Slide 33 text

•Easy & Simple •WidgetπϦʔ͔Βͳ͘ͳΔͱσϑΥϧτͰdispose •ඞཁͳՕॴͷΈϦϏϧυ •Stream΋࢖͑Δ providerͷ͍͍ͱ͜Ζ

Slide 34

Slide 34 text

•௕Ί͚ͩͲͨͿΜΘ͔Γ΍͍͢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 ࢀߟ

Slide 35

Slide 35 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠