How to use provider package

Transcript

1. ෼ͰΘ͔Δ

   ΏΔ;ΘQSPWJEFSೖ໳
   2019.7.16.
   

   Flutter Meetup Tokyo #10

   @makicamel
   ࢖͍ํ
   

   View Slide

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

   View Slide

3. ࣗݾ঺հ
   

   View Slide

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

   View Slide

5. provider
   

   View Slide

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

   View Slide

7. provider ?
   •scoped modelʹۙ͘ɺػೳΛ૿΍ͨ͠ͷ͕provider

   Google I/O 2019Ͱprovider͕Googleެࣜਪ঑ʹ
   
 ͍·ผͷํ๏Λ࢖͍ͬͯΔਓ͸

   ແཧʹม͑ͳ͍͍ͯ͘Αʂ
   ৽࢝͘͠ΊΔͳΒ

   provider͕அવΦεεϝ✨
   1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0
   

   IUUQZPVUVCFE@NDTNSG*
   ."5546--*7"/
   

   View Slide

8. State
   4UBSUUIJOLJOHEFDMBSBUJWFMZcqVUUFSEFW

   IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUEFDMBSBUJWF
   એݴత
   

   View Slide

9. •ୡ੒͢΂͖໨త(ग़ྗ)Λࣔ͠

   ࣮ݱ͢Δखଓ͖͸γεςϜʹ
   ೚ͤΔ
   •ཉ͍͠σʔλ

   Λهड़
   •ॲཧํ๏͸໰Θͳ͍

   એݴܕ / ໋ྩܕ
   •໨తΛୡ੒͢ΔͨΊͷํ๏
   Λʮखଓ͖ʯͱͯࣔ͢͠

   •ॲཧɾऔಘํ๏

   Λهड़
   •࣮ߦ͢΂໋͖ྩྻͰ

   ߏ੒͞ΕΔ
   IUUQTKBXJLJQFEJBPSHXJLJએݴܕϓϩάϥϛϯά

   IUUQTKBXJLJQFEJBPSHXJLJ໋ྩܕϓϩάϥϛϯά
   ͪͳΈʹ3VCZ͸

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

   View Slide

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

    View Slide

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

    View Slide

12. 4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW

    IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF
    એݴܕ / ໋ྩܕ
    1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0
    

    IUUQZPVUVCFE@NDTNSG*
    •AnotherWidget͕SomeWidgetΛ஌Γ͍͗ͯ͢Δ

    ΞϓϦ͕େ͖͘ͳΔͱΩπ͍
    •Ͳ͜ͰState͕มߋ͞ΕΔ͔Θ͔Βͳ͍

    ΞϓϦΛcrashͤ͞ΔՄೳੑ͕͋Δ
    

    View Slide

13. એݴܕ / ໋ྩܕ
    4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW

    IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF
    UI͸ΞϓϦέʔγϣϯͷঢ়ଶ(state)Λ

    Ϗϧυܾͯ͠·Δ΋ͷ
    

    View Slide

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

    View Slide

15. ࣮૷ͯ͠ΈΑ͏
    

    View Slide

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

    View Slide

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

    εʔϓ ×1

    A୎
    ΤϏϑϥΠ ×2

    ϥΠε ×2

    B୎
    ϋϜΧπ ×1

    ΤϏϑϥΠ ×2

    C୎
    

    View Slide

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

    View Slide

19. Model
    •OrderΫϥε

    Item(ྉཧ)΍

    ςʔϒϧ൪߸Λϝϯόʹ࣋ͭ
    •OrderPoolΫϥε

    Φʔμʔ͕ೖΔͱ૿͑ɺ

    Φʔμʔ͕ఏڙ͞ΕΔͱݮΔ
    ΦϜϨπ ×1

    εʔϓ ×1

    A୎
    ΦϜϨπ ×1

    εʔϓ ×1

    A୎
    ΤϏϑϥΠ ×2

    ϥΠε ×2

    B୎
    ϋϜΧπ ×1

    ΤϏϑϥΠ ×2

    C୎
    

    View Slide

20. class Order {
    int id;
    Table tableNum;
    List items;
    Order(this.id, this.tableNum, this.items);
    }
    Model
    ΦϜϨπ ×1

    εʔϓ ×1

    A୎
    

    View Slide

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

    View Slide

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

    View Slide

23. ChangeNotifier
    •͍ͬͯ͏͚ͩͷਓ
    •Modelʹมߋ͕͋ͬͨ࣌ʹ

    มߋͨ͠Αͬͯ௨஌͢Δ
    •ModelͰextends͞ΕΔ
    Φʔμʔ͸͍Γ·ͨ͠ʔʂ
    ˞ͳ͓ɺMJTUFOFSͷొ࿥͸ʙݸ·Ͱ͕ਪ঑஋

    'MVUUFS4UBUF.BOBHFNFOUXJUI1SPWJEFSc,BSUIJL1POOBNJO'MVUUFS$PNNVOJUZ.FEJVN

    IUUQTNFEJVNDPNqVUUFSDPNNVOJUZqVUUFSTUBUFNBOBHFNFOUXJUIQSPWJEFSFFCCDBD
    

    View Slide

24. 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(...) {...}
    }
    ChangeNotifier
    มߋͨ͠Αͬͯ௨஌
    

    View Slide

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

    View Slide

26. ChangeNotifierProvider
    •௨஌Λಧ͚ͯ൘Λߋ৽͢Δਓ
    •ModelΛ࢖͏ΫϥεΛwrap͢ΔܗͰઃஔ

    (৭ΜͳΫϥε͔Βࢀর͞ΕΔ࣌͸

    main.dartͷΑ͏ͳτοϓϨϕϧ΁)
    ɹɹ˞ ຊ౰ʹඞཁͱͳΔ࣌·ͰϦϏϧυ͠ͳ͍
    Φʔμʔ͖ͨΑɺஔ͍ͱ͘Ͷ
    

    View Slide

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Λࢦఆ
    

    View Slide

28. MultiProvider
    •ͨ͘͞Μ͍Δ

    ChangeNotifierProvider
    Φʔμʔ͖ͨΑ
    ͓٬༷͕͖·ͨ͠
    

    View Slide

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

    View Slide

30. •Φʔμʔ൘
    •Provider͔Β

    ஋Λड͚औͬͯදࣔ
    •ModelΛࢦఆͯ͠࢖͏
    Consumer
    ΦϜϨπ ×1

    εʔϓ ×1

    A୎
    ΤϏϑϥΠ ×2

    ϥΠε ×2

    B୎
    ϋϜΧπ ×1

    ΤϏϑϥΠ ×2

    C୎
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    ࢀߟ
    

    View Slide

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

    View Slide