Carousel Slider Caching

Question

I'd like to know which is the best way to cache a carousel slider in flutter. Currently I have a CarouselSlider which is able to open a window to view the whole image. When I swipe it loads the next image and when I slide back it loads the previous image again. Which is the best approach and the best usability?

This is my code:

ClipRRect(
  borderRadius: BorderRadius.circular(25),
  child: AspectRatio(
    aspectRatio: 16 / 9, // Set the aspect ratio to 16:9
    child: CarouselSlider(
      items: widget.recipe.urlImages.map((image) {
        return Builder(
          builder: (context) {
            return Wrap(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.circular(25),
                  ),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                          MaterialPageRoute(builder: (_) {
                        return Scaffold(
                          appBar: AppBar(
                            iconTheme:
                                const IconThemeData(
                                    color: FooderColors
                                        .fooderMainGreen),
                            backgroundColor: Colors.white,
                            elevation: 0.0,
                            centerTitle: true,
                            title: ImageIcon(
                              AssetImage(
                                  'assets/icons/logo_new.png'),
                              color: FooderColors
                                  .fooderMainGreen,
                              size: 50,
                            ),
                          ),
                          body: Center(
                            child: Hero(
                              tag: widget
                                      .recipe.recipeKey +
                                  image,
                              // Ensure unique tag per image
                              child: Image.network(image,
                                  fit: BoxFit.contain),
                            ),
                          ),
                        );
                      }));
                    },
                    child: ClipRRect(
                      child: Hero(
                        tag: widget.recipe.recipeKey +
                            image,
                        // Ensure unique tag per image
                        child: Image.network(
                          image,
                          fit: BoxFit.cover,
                          loadingBuilder:
                              (BuildContext context,
                                  Widget child,
                                  ImageChunkEvent?
                                      loadingProgress) {
                            if (loadingProgress == null)
                              return child;
                            return Center(
                              child:
                                  CircularProgressIndicator(
                                value: loadingProgress
                                            .expectedTotalBytes !=
                                        null
                                    ? loadingProgress
                                            .cumulativeBytesLoaded /
                                        loadingProgress
                                            .expectedTotalBytes!
                                    : null,
                              ),
                            );
                          },
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        viewportFraction: 1.0,
        enlargeCenterPage: false,
      ),
    ),
  ),
),

Answer 1

to cache images locally on the device you can try cached_network_image package, example:

CachedNetworkImage(
       imageUrl: "http://via.placeholder.com/350x150",
       progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
       errorWidget: (context, url, error) => Icon(Icons.error),
    ),

for more details see cached_network_image package

Hope it helps you.