关于flutter MultiProvider的使用答案

【问题标题】：usage about flutter MultiProvider关于flutter MultiProvider的使用
【发布时间】：2021-03-27 02:58:41
【问题描述】：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(App());
}

class Model extends ChangeNotifier {
  String id;

  Model({this.id});
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var model1 = Model(id: '111');
    var model2 = Model(id: '222');
    var model3 = Model(id: '333');

    return MaterialApp(
        home: Scaffold(
      backgroundColor: Colors.white,
      body: MultiProvider(
        providers: [
          ChangeNotifierProvider.value(value: model1),
          ChangeNotifierProvider.value(value: model2),
          ChangeNotifierProvider.value(value: model3),
        ],
        child: Center(child: Foo()),
      ),
    ));
  }
}

class Foo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (ctx, Model model, child) {
        return Text(model.id);
      },
    );
  }
}

屏幕上的结果是333，如果我想显示222，如何获得第二个模型？有什么方法可以实现这个，比如通过索引？

我的项目中真正的问题是：我有一个由组件列表组成的页面，例如横幅、轮播、音频播放器等。它们的顺序和数量是任意的，由如下 json 配置：

{
  "settings": [
    {
      "type": "ComponentA",
      "data": "..."
    },
    {
      "type": "ComponentB",
      "data": "..."
    },
    {
      "type": "ComponentA",
      "data": "..."
    }
  ]
}

我所做的是遍历 json，然后创建整个模型。组件 A 模型、组件 B 模型、组件 A 模型。然后我把所有这些都放入 multi provider

现在我有两个要渲染的 ComponentA，但我无法区分第一个 ComponentAModel 和
第二个 ComponentAModel。

【问题讨论】：

标签： flutter flutter-provider

【解决方案1】：

您不能使用 Providers 来提供多个相同类型的模型。

改用riverpod。

【讨论】：