CachedNetworkImage() takes much time

Question

I'm trying to create a flutter app. I use swiping cards that have images, but I'm facing a problem that the first swiping card takes much time displaying the CircularProgressIndicator until it displays the image, but the other images are displayed much faster.

This is my code:

Widget createSwipingImageCard(String imageUrl, Function(bool) handleSwipe) {
    return Container(
      color: AppColors.backgroundColor,
      width: SwipingCardsConstants.photoWidth,
      height: SwipingCardsConstants.photoHeight,
      child: Dismissible(
          key: Key(imageUrl), // Unique key for the card
          onDismissed: (direction) {
            if (direction == DismissDirection.endToStart) {
              // Swiped to the left (dislike)
              handleSwipe(false);
            } else if (direction == DismissDirection.startToEnd) {
              // Swiped to the right (like)
              handleSwipe(true);
            }
          },
          child: Card(
            elevation: 5,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30),
            ),
            child: CachedNetworkImage(
              imageUrl: imageUrl,
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                  ),
                ),
              ),
              placeholder: (context, url) => Center(
                child: CircularProgressIndicator(
                  color: ButtonConstants.primaryButtonColor,
                ),
              ),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          )),
    );
  }

And here is the build function that I use it in:

@override
  Widget build(BuildContext context) {
    return appLib.createPage(
        context,
        Center(
            child: FutureBuilder<void>(
                future: myFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return SizedBox(
                      width: 200,
                      child: Center(
                        child: appLib.insertPhoto(
                            path:
                                "/Users/admin/Desktop/Development/wonder_wrap/images/logo.png"),
                      ),
                    );
                  } else if (snapshot.hasError) {
                    return Text('Error: ${snapshot.error}');
                  } else {
                    return Center(
                        child: Stack(
                      children: [
                        for (int i = stackIndex; i < questionsList.length; i++)
                          IgnorePointer(
                            ignoring: i != stackIndex,
                            child: Opacity(
                              opacity: i == stackIndex ? 1.0 : 0.0,
                              child: SizedBox(
                                width: 300,
                                height: 600,
                                child: appLib.createSwipingImageCard(
                                  questionsList[i]['image'],
                                  handleSwipe,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));
                  }
                })));
  }

Why is that? and how can I solve this problem?

Answer 1

first of all, you should not use function, reasons. you should make separate widget for the widget that is returned from method createSwipingImageCard(...). and second, there is a suspicion that on first time something long time taking is going on in your 'myFuture':

child: FutureBuilder<void>(
                future: myFuture,
    ...

but then you use nothing from the snapshot data here:

return Center(
                        child: Stack(
                      children: [
                        for (int i = stackIndex; i < questionsList.length; i++)
                          IgnorePointer(
                            ignoring: i != stackIndex,
                            child: Opacity(
                              opacity: i == stackIndex ? 1.0 : 0.0,
                              child: SizedBox(
                                width: 300,
                                height: 600,
                                child: appLib.createSwipingImageCard(
                                  questionsList[i]['image'],
                                  handleSwipe,
                                ),
                              ),
                            ),
                          ),
                      ],
                    ));