Flutter Firebase 提供程序架构答案

【问题标题】：Flutter firebase provider architectureFlutter Firebase 提供程序架构
【发布时间】：2020-07-29 01:49:12
【问题描述】：

我有一个有状态的小部件，它有一个动画容器。在那个动画容器内，我有一个连接到 firebase 的 streamProvider。我的问题是，当我使用 setState 制作动画时，整个小部件都会重建，并且会再次调用 firebase。我的解决方案是提升 streamProvider 并包装使用该流构建器动画的小部件。但这意味着我需要创建另一个小部件，因此需要更多样板。

我觉得我做错了，但我有点卡住了，因为所有提供者资源都与身份验证有关......

有没有人知道如何以干净的方式解决这个问题？ setState 是在有状态小部件中触发动画的正确方法吗？

【问题讨论】：

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

对于动画，尝试使用AnimatedBuilder 这是最简单的动画方法，但我想它不会解决您的问题。

我个人一直都是用Provider包，不知道你是不是也在用。

所以通常firebase会为您提供数据流（如果您将它与云功能一起使用，则不同）

现在您可以使用 StreamBuilder 与 Stream firebase 为您提供并使用流的数据。在此版本中，重建 Widget 不会导致应用连接到服务器并获取新数据。

如果您真的喜欢使用ChangeNotifier，您可以在ChangeNotifier 中使用该流，收听它并始终通知侦听器此实现发生的更改，也不会有任何不必要的网络调用。

第二版的一些例子：

class SomeNotifier extends ChangeNotifier {
  List<MyData> dataList = [];

  SomeNotifier() {
    Firestore.instance.collection("MyCollection").snapshots().listen((data) {
      dataList = data.documents.map((doc) => MyData.fromDoc(doc));
      notifyListeners();
    });
  }
}

class _MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<SomeNotifier>(
      create: (context) => SomeNotifier(),
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          var notifier = Provider.of<SomeNotifier>(context);
          return Container(); //Here you can use your animated widget, it will be rebuilt to animate propperly
          //It will also rebuild every time data in firebase changes
        },
      ),
    );
  }
}

我希望这能回答你的问题。

【讨论】：

不是我直接需要的，而是从您的解决方案中得到启发，创建了我自己的解决方案