\n\nProviderは色々機能(各種Providerの種類)はありつつも、主に以下の用途で使え、状態管理をこれだけに頼ってアプリを組むことも可能です。
\n\n
\n\n- (不変な)インスタンスを受け渡す(DI・サービスロケーター的な用途)
\n- 状態の変更を伝える
\n
\n\nInheritedWidget を使いやすくしてミスを防ぐためのシンタックスシュガー\nDI の仕組みを提供\nインスタンスの生成と破棄を助ける（StatelessWidget でも dispose() が可能になる等）\nその他何でも（Scoped Model、BLoC 等による状態管理、ValueNotifier 等による Widget 更新など）\n(https://qiita.com/kabochapo/items/a90d8438243c27e2f6d9)
\n
https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple\nhttps://github.com/flutter/samples/blob/c6f6b5b757/provider_shopper/lib/main.dart
\n\nclass CatalogModel {\n static const _itemNames = [\n 'Code Smell',\n ...\n ...CatalogModelはChangeNotifierを実装していない。
\n\nclass CartModel extends ChangeNotifier { //★★★\n /// The private field backing [catalog].\n CatalogModel _catalog;\n\n /// Internal, private state of the cart. Stores the ids of each item.\n final List<int> _itemIds = [];\n\n /// The current catalog. Used to construct items from numeric ids.\n CatalogModel get catalog => _catalog;\n\n set catalog(CatalogModel newCatalog) {\n assert(newCatalog != null);\n assert(_itemIds.every((id) => newCatalog.getById(id) != null),\n 'The catalog $newCatalog does not have one of $_itemIds in it.');\n _catalog = newCatalog;\n // Notify listeners, in case the new catalog provides information\n // different from the previous one. For example, availability of an item\n // might have changed.\n notifyListeners();\n }\n\n /// List of items in the cart.\n List<Item> get items => _itemIds.map((id) => _catalog.getById(id)).toList();\n\n /// The current total price of all items.\n int get totalPrice =>\n items.fold(0, (total, current) => total + current.price);\n\n /// Adds [item] to cart. This is the only way to modify the cart from outside.\n void add(Item item) {\n _itemIds.add(item.id);\n // This line tells [Model] that it should rebuild the widgets that\n // depend on it.\n notifyListeners(); //★★★\n }\n}CartModelはChangeNotifierを実装している。\n内容が変わったときにnotifyListenersを呼ぶことになっている(おやくそく)。
\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n // Using MultiProvider is convenient when providing multiple objects.\n return MultiProvider(\n providers: [\n // In this sample app, CatalogModel never changes, so a simple Provider\n // is sufficient.\n Provider(create: (context) => CatalogModel()), //★★★\n // CartModel is implemented as a ChangeNotifier, which calls for the use\n // of ChangeNotifierProvider. Moreover, CartModel depends\n // on CatalogModel, so a ProxyProvider is needed.\n ChangeNotifierProxyProvider<CatalogModel, CartModel>( //★★★\n create: (context) => CartModel(),\n update: (context, catalog, cart) {\n cart.catalog = catalog;\n return cart;\n },\n ),\n ],\n child: MaterialApp(\n title: 'Provider Demo',\n theme: appTheme,\n initialRoute: '/',\n routes: {\n '/': (context) => MyLogin(),\n '/catalog': (context) => MyCatalog(),\n '/cart': (context) => MyCart(),\n },\n ),\n );\n }\n}Widgetツリーの一番上あたりでCatalogModelとCartModelのインスタンスを生成している。
\nCartModelはCatalogModelに依存しているので、上で生成したCatalogModelを取ってきて(内部でProvider.of
Provider.of<ほしいクラス>(context)で、contextを上に登って見つかった『ほしいクラス』のインタンスを取れる。
\n\nclass _CartList extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var itemNameStyle = Theme.of(context).textTheme.title;\n var cart = Provider.of<CartModel>(context); //★★★\n\n return ListView.builder(\n itemCount: cart.items.length,\n itemBuilder: (context, index) => ListTile(\n leading: Icon(Icons.done),\n title: Text(\n cart.items[index].name,\n style: itemNameStyle,\n ),\n ),\n );\n }\n}cart.itemsを使ってリスト表示を作っている。
\n\nclass _AddButton extends StatelessWidget {\n final Item item;\n\n const _AddButton({Key key, @required this.item}) : super(key: key);\n\n @override\n Widget build(BuildContext context) {\n var cart = Provider.of<CartModel>(context); //★★★\n\n return FlatButton(\n onPressed: cart.items.contains(item) ? null : () => cart.add(item),\n splashColor: Theme.of(context).primaryColor,\n child: cart.items.contains(item)\n ? Icon(Icons.check, semanticLabel: 'ADDED')\n : Text('ADD'),\n );\n }\n}class _MyListItem extends StatelessWidget {\n final int index;\n\n _MyListItem(this.index, {Key key}) : super(key: key);\n\n @override\n Widget build(BuildContext context) {\n var catalog = Provider.of<CatalogModel>(context); //★★★\n var item = catalog.getByPosition(index);\n var textTheme = Theme.of(context).textTheme.title;\n\n return Padding(\n padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),\n child: LimitedBox(\n maxHeight: 48,\n child: Row(\n children: [\n AspectRatio(\n aspectRatio: 1,\n child: Container(\n color: item.color,\n ),\n ),\n SizedBox(width: 24),\n Expanded(\n child: Text(item.name, style: textTheme),\n ),\n SizedBox(width: 24),\n _AddButton(item: item),\n ],\n ),\n ),\n );\n }\n}「model=Provider.ofを呼んだbuildが属するWidgetはmodelが更新されたらリビルドされます」\nむずかしい。。。
\n具体的には。。。
\nCartList,AddButtonのbuildの中で『var cart = Provider.of
CartModel(extends ChangeNotifier)のaddでnotifyListenersが呼ばれる。
\nTODO
\nclass _CartTotal extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n var hugeStyle = Theme.of(context).textTheme.display4.copyWith(fontSize: 48);\n\n return SizedBox(\n height: 200,\n child: Center(\n child: Row(\n mainAxisAlignment: MainAxisAlignment.center,\n children: [\n Consumer<CartModel>(\n builder: (context, cart, child) =>\n Text('\\$${cart.totalPrice}', style: hugeStyle)),\n SizedBox(width: 24),\n FlatButton(\n onPressed: () {\n Scaffold.of(context).showSnackBar(\n SnackBar(content: Text('Buying not supported yet.')));\n },\n color: Colors.white,\n child: Text('BUY'),\n ),\n ],\n ),\n ),\n );\n }\n}contextが無い場合にConsumer<ほしいクラス>でProvider.ofのようにインスタンスを取れるWidget。\nBuilder Widget使うかWidgetを切り出すかすれば同じこと、かな？\n複数取りたいときはどうするのかな？
\nと思ってたら、
\ncontext.select()
\nfinal value = context.select((Foo foo) => foo.value);\nText(value.toString());大きなクラスのある一部だけの変化だけを検知→リビルドできる。これは良さそう。\nChangeNotifierProviderに大きなモデルを乗っけてselectで指定したところが変わったときだけrebuildされる。\n「モデルの『どこ』が変わったら〜」の『どこ』をWidget側に寄せることができる。
\nいろんななんとかProviderがあるけど、データソースによっていろいろ使えるよってことみたい。\n基本はChangeNotifierってことでいいのかな。
\nWidgetと変更検知範囲の粒度をうまくやって、コードの可読性と変更検知＆リビルドのパフォーマンスのバランスを取るってことかな。\nはじめは荒く、問題になったら最適化、で。
","frontmatter":{"title":"Providerってなんですか？","date":"October 27, 2020","description":null}},"previous":{"fields":{"slug":"/2020-10/2020-10-26-1600/"},"frontmatter":{"title":"ブログ更新!!"}},"next":{"fields":{"slug":"/2020-11/2020-11-08-0448-Flutter状態管理/"},"frontmatter":{"title":"『状態管理』ってなんですか？"}}},"pageContext":{"id":"3b6878e4-f637-5e27-a014-90614ec6ac4c","previousPostId":"32a5dfcc-e5e2-5074-a19f-2ee5505094c7","nextPostId":"0f43bcdf-5a15-5086-a2e7-26ff8c0bb30e"}},"staticQueryHashes":["2841359383","3257411868"]}