fast_cache_network_image 1.0.11

A flutter package to cache network image,lottie and videos easily.You can add beautiful loaders, percentage indicators and error builder.

example/lib/main.dart

import 'package:fast_cache_network_image/fast_cached_network_image.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await FastCachedImageConfig.init();

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String url1 =
      'https://upload.wikimedia.org/wikipedia/commons/2/2d/Snake_River_%285mb%29.jpg';
  String lottieUrl =
      'https://lottie.host/2acd387a-4447-43c0-8a1f-5819777e33ef/fMNv4Pvyrx.json';

  bool isImageCached = false;
  String? log;
  FastCachedVideoController? videoController;

  @override
  void initState() {
    super.initState();
    videoController = FastCachedVideoController(
      'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      loop: true,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: 150,
                width: 150,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: FastCachedImageProvider(url1),
                  ),
                ),
              ),
              SizedBox(
                height: 150,
                width: 150,
                child: FastCachedImage(
                  url: url1,
                  fit: BoxFit.cover,
                  fadeInDuration: const Duration(seconds: 1),
                  errorBuilder: (context, exception, stacktrace) {
                    return Text(stacktrace.toString());
                  },
                  loadingBuilder: (context, progress) {
                    return Container(
                      color: Colors.yellow,
                      child: Stack(
                        alignment: Alignment.center,
                        children: [
                          if (progress.isDownloading &&
                              progress.totalBytes != null)
                            Text(
                              '${progress.downloadedBytes ~/ 1024} / ${progress.totalBytes! ~/ 1024} kb',
                              style: const TextStyle(color: Colors.red),
                            ),
                          SizedBox(
                            width: 120,
                            height: 120,
                            child: CircularProgressIndicator(
                              color: Colors.red,
                              value: progress.progressPercentage.value,
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(height: 12),
              SizedBox(
                height: 200,
                width: 300,
                child: FastCachedVideo(
                  controller: videoController!,
                  fit: BoxFit.cover,
                  loadingBuilder: (context, progress) {
                    return Center(
                      child: CircularProgressIndicator(
                        value: progress.progressPercentage.value,
                      ),
                    );
                  },
                ),
              ),
              const SizedBox(height: 12),
              SizedBox(
                height: 150,
                width: 150,
                child: FastCachedLottie(
                  url: lottieUrl,
                  fit: BoxFit.cover,
                ),
              ),
              const SizedBox(height: 12),
              Text(
                'Is image cached? = $isImageCached',
                style: const TextStyle(color: Colors.red),
              ),
              const SizedBox(height: 12),
              Text(log ?? ''),
              const SizedBox(height: 120),
              MaterialButton(
                onPressed: () async {
                  setState(
                    () async => isImageCached =
                        FastCachedImageConfig.isCached(imageUrl: url1),
                  );
                },
                child: const Text('check image is cached or not'),
              ),
              const SizedBox(height: 12),
              MaterialButton(
                onPressed: () async {
                  FastCachedImageConfig.deleteCachedImage(imageUrl: url1);
                  setState(() => log = 'deleted image $url1');
                  await Future.delayed(
                    const Duration(seconds: 2),
                    () => setState(() => log = null),
                  );
                },
                child: const Text('delete cached image'),
              ),
              const SizedBox(height: 12),
              MaterialButton(
                onPressed: () async {
                  FastCachedImageConfig.clearAllCachedImages();
                  setState(() => log = 'All cached images deleted');
                  await Future.delayed(
                    const Duration(seconds: 2),
                    () => setState(() => log = null),
                  );
                },
                child: const Text('delete all cached images'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}