0

My FutureBuilder rebuilds unnecessarily when navigate between screens. Each time I have to get the download URL from the Firebase Storage and this results in extremely flickering. How can I prevent that the FutureBuilder rebuilds everytime I navigate between screens?

I already tried the following solutions:

https://medium.com/saugo360/flutter-my-futurebuilder-keeps-firing-6e774830bc2

Flutter Switching to Tab Reloads Widgets and runs FutureBuilder

But without success. With both the FutureBuilder get always rebuild.

This is my code (Attempt 1):

class _GuestbookCardImageState extends State<GuestbookCardImage> {
  final AsyncMemoizer _memoizer = AsyncMemoizer();

  _getFeaturedImages() {
    return this._memoizer.runOnce(() async {
      return await MyStorage().getDownloadUrl(widget.guestbook.imagePath);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 2,
      margin: EdgeInsets.all(5),
      child: FutureBuilder(
          future: _getFeaturedImages(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return GuestbookPlaceholder();
            } else {
              if (snapshot.data != null) {
                return Hero(
                  tag: "to_single_guestbook_" + widget.guestbook.entryCode,
                  child: Container(
                    width: Get.width / 1.7,
                    height: Get.height / 3.5,
                    child: Image.network(
                      snapshot.data,
                      fit: BoxFit.cover,
                    ),
                  ),
                );
              } else {
                return Hero(
                    tag: "to_single_guestbook_" + widget.guestbook.entryCode,
                    child: GuestbookPlaceholder());
              }
            }
          }),
    );
  }
}

Attempt 2

class _GuestbookCardImageState extends State<GuestbookCardImage> {
  Future<String> _future;

  @override
  void initState() {
    _future = MyStorage().getDownloadUrl(widget.guestbook.imagePath);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      semanticContainer: true,
      clipBehavior: Clip.antiAliasWithSaveLayer,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      elevation: 2,
      margin: EdgeInsets.all(5),
      child: FutureBuilder(
          future: _future,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return GuestbookPlaceholder();
            } else {
              if (snapshot.data != null) {
                return Hero(
                  tag: "to_single_guestbook_" + widget.guestbook.entryCode,
                  child: Container(
                    width: Get.width / 1.7,
                    height: Get.height / 3.5,
                    child: CachedNetworkImage(
                        imageUrl: snapshot.data, fit: BoxFit.cover),
                  ),
                );
              } else {
                return Hero(
                    tag: "to_single_guestbook_" + widget.guestbook.entryCode,
                    child: GuestbookPlaceholder());
              }
            }
          }),
    );
  }
}

What I expect

I expect that after changing the screen and return to the initial screen my images still appearing without the need of reload. I am using Hero animation for the images. This loading behavior destroys my animation because while loading the image urls it shows a placeholder.

A small video how this looks: (And this happens also if I push to the detail screen and pop back to the initial screen)

enter image description here

What could I do to solve this issue?

5
  • Please share your attempts. It doesn't appear that you have tried the answers of the linked questions. Commented Oct 14, 2020 at 12:10
  • I´ve edited my code with both attempts. Thank you :)
    – Vueer
    Commented Oct 14, 2020 at 12:12
  • Please shared the behavior for both and how it's undesirable. There is no way to stop builds. They're necessary for flutter to function properly. Commented Oct 14, 2020 at 12:15
  • I´ve edited my question again with the additional information which behavior I expect.
    – Vueer
    Commented Oct 14, 2020 at 12:19
  • Where is your attempt with AutomaticKeepAliveClientMixin? You need to share more code. Commented Oct 14, 2020 at 12:22

2 Answers 2

2

I think you need to go higher in the widget tree and preserve the state of your page. you can try this solution. The solution is to use PageView widget to display your screen through the navigation bar, and the PageView allowing you to save the page state easily.

6
  • But the Futurebuilder also rebuilds if I push to another page and go back to the initial. It is not only the bottom navigation..
    – Vueer
    Commented Oct 14, 2020 at 12:13
  • your page state should be preserved because of the 'PageView'. You assign a page controller to the pageview widget and set the 'keep page' argument to true inside the page controller instance. I think this is the best approach , try this solution Commented Oct 14, 2020 at 12:31
  • Just an additional question... what if for example I change some values on the object for which I am using the FutureBuilder? Then I want manually trigger a rebuild.... with the pageView solution I have forever the initial state. Is there a workaround for this? Thank you very much in advance!
    – Vueer
    Commented Oct 15, 2020 at 15:55
  • you can setState the future itself Commented Oct 15, 2020 at 17:20
  • Thanks, but how can I add a condition? By default I don’t want that the future builder rebuilds, but only if there is an update in the database... so if the value changes... is there a best way to to this?
    – Vueer
    Commented Oct 15, 2020 at 19:15
0

What helped me was setting the memCacheWidth property to be screen width x devicePixelRatio, so the image is cached in the highest resolution that will ever be necessary.

Note: if you want to do zooming, consider doing width x 10 (or some other number which works for your case).

CachedNetworkImage(
      imageUrl: url,
      memCacheWidth: mediaQuery.size.width.ceil() * mediaQuery.devicePixelRatio.ceil(),
      // ... other properties ...
),

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.