Flutter firebase 供应商架构

Question

I have a stateful widget that has an animated container. Inside that animated container I have a streamProvider connected to firebase. My problem is that when I animate using setState the entire widget rebuilds and another call to firebase is made. My solution was to lift the streamProvider up and wrap the widget that's animated with that streambuilder. But that means I need to create another widget and hence more boilerplate.

I feel like what I'm doing is wrong but I'm kind of stuck because all provider resources are related to authentication...

Does anyone have any ideas how I can get around this in a clean way? and is setState the right way to trigger animations in a stateful widget?

Answer 1

For animating, try using AnimatedBuilder its the easiest way to animate, but I guess it won't fix your issue.

Personally I always use the Provider package, I don't know if you are doing it too.

So usually firebase provides you with a stream of data (if you are using it with cloud functions its different)

Now you could use a StreamBuilder with the Stream firebase provides you and use the data of the stream. With this version rebuilding the Widget won't lead to the app connecting to the server and fetching new data.

If you really like to use a ChangeNotifier you can use that stream inside the ChangeNotifier , listen to it and always notifying listeners of changes to occur with this implementation there won't be any unnecessary network calls either.

Some examples for the second version:

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
        },
      ),
    );
  }
}

I hope this answers your question.