How to use provider package

How to use provider package

Cfbe23392787cb3ad4689c5f72463fcc?s=128

makicamel

July 16, 2019
Tweet

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͕அવΦεεϝ✨ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0 
 IUUQZPVUVCFE@NDTNSG* ."5546--*7"/
  8. State 4UBSUUIJOLJOHEFDMBSBUJWFMZcqVUUFSEFW
 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. 4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW
 IUUQTqVUUFSEFWEPDTEFWFMPQNFOUEBUBBOECBDLFOETUBUFNHNUTJNQMF એݴܕ / ໋ྩܕ 1SBHNBUJD4UBUF.BOBHFNFOUJO'MVUUFS (PPHMF*0 
 IUUQZPVUVCFE@NDTNSG* •AnotherWidget͕SomeWidgetΛ஌Γ͍͗ͯ͢Δ


    ΞϓϦ͕େ͖͘ͳΔͱΩπ͍ •Ͳ͜ͰState͕มߋ͞ΕΔ͔Θ͔Βͳ͍
 ΞϓϦΛcrashͤ͞ΔՄೳੑ͕͋Δ
  13. એݴܕ / ໋ྩܕ 4JNQMFBQQTUBUFNBOBHFNFOUcqVUUFSEFW
 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ͷొ࿥͸ʙݸ·Ͱ͕ਪ঑஋
 'MVUUFS4UBUF.BOBHFNFOUXJUI1SPWJEFSc,BSUIJL1POOBNJO'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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠