Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to use provider package

How to use provider package

makicamel

July 16, 2019
Tweet

More Decks by makicamel

Other Decks in Programming

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

    [email protected]*
    ."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

    [email protected]*
    •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