關於 flutter MultiProvider 的用法

Question

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 ，如何獲得第二個 model？ 有沒有辦法通過索引來實現這一點？

---

我項目中的真正問題是：我有一個由組件列表組成的頁面，例如橫幅、輪播、音頻播放器等。它們的順序和數量是任意的，由 json 配置，例如：

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

我所做的是遍歷 json 然后創建整個模型。 組件 A 模型、組件 B 模型、組件 A 模型。 然后我把所有這些都放到了多提供商中

現在我有兩個要渲染的 ComponentA，但我無法區分第一個 ComponentAModel 和
第二個 ComponentAModel。

Answer 1

您不能使用 Providers 來提供相同類型的多個模型。

改用riverpod 。