How to use provider package

Transcript

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

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

3. ࣗݾ঺հ

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

5. provider

6. provider ? •͍··ͰͷState؅ཧͷཱ໾ऀ •scoped model •BLoC •Rx •Stream → ͪΐͬͱ෺଍Γͳ͍

   → ͪΐͬͱෳࡶ͗͢Δ

7. provider ? •scoped modelʹۙ͘ɺػೳΛ૿΍ͨ͠ͷ͕provider
 Google I/O 2019Ͱprovider͕Googleެࣜਪ঑ʹ 
 ͍·ผͷํ๏Λ࢖͍ͬͯΔਓ͸
 ແཧʹม͑ͳ͍͍ͯ͘Αʂ

   ৽࢝͘͠ΊΔͳΒ
 provider͕அવΦεεϝ✨ 1SBHNBUJD
   4UBUF
   .BOBHFNFOU
   JO
   'MVUUFS
   (PPHMF
   *0 
 IUUQZPVUVCFE@NDTNSG* ."55
   46--*7"/

8. State 4UBSU
   UIJOLJOH
   EFDMBSBUJWFMZ
   c
   qVUUFSEFW
 IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUEFDMBSBUJWF એݴత

9. •ୡ੒͢΂͖໨త(ग़ྗ)Λࣔ͠
 ࣮ݱ͢Δखଓ͖͸γεςϜʹ ೚ͤΔ •ཉ͍͠σʔλ
 Λهड़ •ॲཧํ๏͸໰Θͳ͍
 એݴܕ / ໋ྩܕ •໨తΛୡ੒͢ΔͨΊͷํ๏

   Λʮखଓ͖ʯͱͯࣔ͢͠
 •ॲཧɾऔಘํ๏
 Λهड़ •࣮ߦ͢΂໋͖ྩྻͰ
 ߏ੒͞ΕΔ IUUQTKBXJLJQFEJBPSHXJLJએݴܕϓϩάϥϛϯά
 IUUQTKBXJLJQFEJBPSHXJLJ໋ྩܕϓϩάϥϛϯά 
   ͪͳΈʹ3VCZ͸

   
   
   ΦϒδΣΫτࢦ޲Λಋೖ໋ͨ͠ྩܕݴޠ How What

10. 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(...); } } એݴܕ / ໋ྩܕ

11. class AnotherWidget extends StatelessWidget { @override Widget build(BuildContext context) {

    return FlatButton( child: Text('PUSH'), onPressed: () { var widget = SomeWidget() ..value = someItem ..updateWidget(); }, ); } } એݴܕ / ໋ྩܕ

12. 4JNQMF
    BQQ
    TUBUF
    NBOBHFNFOU
    c
    qVUUFSEFW
 IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF એݴܕ / ໋ྩܕ 1SBHNBUJD
    4UBUF
    .BOBHFNFOU
    JO
    'MVUUFS
    (PPHMF
    *0 
 IUUQZPVUVCFE@NDTNSG* •AnotherWidget͕SomeWidgetΛ஌Γ͍͗ͯ͢Δ


    ΞϓϦ͕େ͖͘ͳΔͱΩπ͍ •Ͳ͜ͰState͕มߋ͞ΕΔ͔Θ͔Βͳ͍
 ΞϓϦΛcrashͤ͞ΔՄೳੑ͕͋Δ

13. એݴܕ / ໋ྩܕ 4JNQMF
    BQQ
    TUBUF
    NBOBHFNFOU
    c
    qVUUFSEFW
 IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF UI͸ΞϓϦέʔγϣϯͷঢ়ଶ(state)Λ
 Ϗϧυܾͯ͠·Δ΋ͷ

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

15. ࣮૷ͯ͠ΈΑ͏

16. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺

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

    ×2
 B୎ ϋϜΧπ ×1
 ΤϏϑϥΠ ×2
 C୎

18. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺

19. Model •OrderΫϥε
 Item(ྉཧ)΍
 ςʔϒϧ൪߸Λϝϯόʹ࣋ͭ •OrderPoolΫϥε
 Φʔμʔ͕ೖΔͱ૿͑ɺ
 Φʔμʔ͕ఏڙ͞ΕΔͱݮΔ ΦϜϨπ ×1
 εʔϓ

    ×1
 A୎ ΦϜϨπ ×1
 εʔϓ ×1
 A୎ ΤϏϑϥΠ ×2
 ϥΠε ×2
 B୎ ϋϜΧπ ×1
 ΤϏϑϥΠ ×2
 C୎

20. class Order { int id; Table tableNum; List<Item> items; Order(this.id,

    this.tableNum, this.items); } Model ΦϜϨπ ×1
 εʔϓ ×1
 A୎

21. 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୎

22. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺

23. ChangeNotifier •͍ͬͯ͏͚ͩͷਓ •Modelʹมߋ͕͋ͬͨ࣌ʹ
 มߋͨ͠Αͬͯ௨஌͢Δ •ModelͰextends͞ΕΔ Φʔμʔ͸͍Γ·ͨ͠ʔʂ ˞
    ͳ͓ɺMJTUFOFSͷొ࿥͸ʙݸ·Ͱ͕ਪ঑஋
 'MVUUFS
    4UBUF.BOBHFNFOU
    XJUI
    1SPWJEFS
    c
    ,BSUIJL
    1POOBN
    JO
    'MVUUFS
    $PNNVOJUZ
    
    .FEJVN
 IUUQTNFEJVNDPNqVUUFSDPNNVOJUZqVUUFSTUBUFNBOBHFNFOUXJUIQSPWJEFSFFCCDBD

24. 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 มߋͨ͠Αͬͯ௨஌

25. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺

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

27. class OrderApp extends StatelessWidget { @override Widget build(BuildContext context) {

    return ChangeNotifierProvider( builder: (context) => OrderPool(), child: MaterialApp( title: 'OrderManagement', home: OrderBoard(), )); } } ChangeNotifierProvider ࢖͏Ϋϥε(OrderBoard)ͷ্ҐͰએݴ ChangeNotifier͋ Λܧঝͨ͠
 ModelΛࢦఆ

28. MultiProvider •ͨ͘͞Μ͍Δ
 ChangeNotifierProvider Φʔμʔ͖ͨΑ ͓٬༷͕͖·ͨ͠

29. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺

30. •Φʔμʔ൘ •Provider͔Β
 ஋Λड͚औͬͯදࣔ •ModelΛࢦఆͯ͠࢖͏ Consumer ΦϜϨπ ×1
 εʔϓ ×1
 A୎

    ΤϏϑϥΠ ×2
 ϥΠε ×2
 B୎ ϋϜΧπ ×1
 ΤϏϑϥΠ ×2
 C୎

31. 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୎

32. •Model •ChangeNotifier •ChangeNotifierProvider •MultiProvider •Consumer ొ৔ਓ෺ → ModelͰmixin → ࢖͏Widget(Ϋϥε)Λwrap

    → දࣔWidget(෦඼)Λwrap

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

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

35. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠