cached_network_svg_image 1.2.0 copy "cached_network_svg_image: ^1.2.0" to clipboard
cached_network_svg_image: ^1.2.0 copied to clipboard

A Flutter package for caching SVG images.

Cached Network SVG Image #

cached_network_svg_image is a Flutter package that allows you to easily load and cache SVG images from the network. It provides a simple and efficient way to display SVG images with caching, placeholders, and error handling. 🌐🖼️

Features ✨ #

  • Load SVG images from the network. 🌍
  • Cache images for offline use. 📦
  • Display a placeholder while the image is loading. ⏳
  • Show an error widget if the image fails to load. ❌
  • Customize the fade-in duration for the image. ⏱️

Installation 🛠️ #

Add the following to your pubspec.yaml file:

dependencies:
  cached_network_svg_image: any

Then, run flutter pub get to install the package. 🚀

Usage 📖 #

Import the package in your Dart file:

import 'package:cached_network_svg_image/cached_network_svg_image.dart';

Use the CachedNetworkSVGImage widget to display an SVG image from the network:

CachedNetworkSVGImage(
    imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg',
    placeholder: const CircularProgressIndicator(color: Colors.green),
    errorWidget: const Icon(Icons.error, color: Colors.red),
    width: 250.0,
    height: 250.0,
    fadeDuration: const Duration(milliseconds: 500),
),

Parameters 📋 #

  • imageUrl: The URL of the SVG image. 🌐
  • cacheKey: A custom cache key to use for the image. 🔑
  • placeholder: A widget to display while the image is loading. ⏳
  • errorWidget: A widget to display if the image fails to load. ❌
  • width: The width of the image. 📏
  • height: The height of the image. 📏
  • fadeDuration: The duration of the fade-in animation when the image loads. ⏱️
  • headers: A map of headers to pass with the network request. 🗂️
  • cacheManager: A custom cache manager to use for caching the image, Default is DefaultCacheManager(). 📦
  • fit: How the image should be inscribed into the space allocated for it. 🔲
  • alignment: How the image should be aligned within its bounds. 📐
  • matchTextDirection: Whether to paint the image in the direction of the TextDirection. ↔️
  • allowDrawingOutsideViewBox: Whether to allow the image to draw outside its view box. 📏
  • color: The color to apply to the image. 🎨
  • colorBlendMode: The blend mode to apply to the image color. 🎨
  • semanticsLabel: A description of the image for accessibility tools. 🏷️
  • excludeFromSemantics: Whether the image should be excluded from semantics. 🚫
  • colorFilter: A color filter to apply to the image. 🎨
  • placeholderBuilder: A builder function to create the placeholder widget. 🛠️
  • theme: The theme to apply to the image. 🎨

Functions 🔧 #

  • preCache: A function to pre-cache the image. 📦
  • clearCacheForUrl: A function to clear the cache for a specific URL. 🗑️
  • clearCache: A function to clear the entire cache. 🗑️

Example 💡 #

Here is a complete example of how to use the cached_network_svg_image package:

import 'package:flutter/material.dart';
import 'package:cached_network_svg_image/cached_network_svg_image.dart';

void main() {
    runApp(MyApp());
}

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar: AppBar(
                    title: Text('Cached Network SVG Image Example'),
                ),
                body: Center(
                    child: CachedNetworkSVGImage(
                        imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg',
                        placeholder: const CircularProgressIndicator(color: Colors.green),
                        errorWidget: const Icon(Icons.error, color: Colors.red),
                        width: 250.0,
                        height: 250.0,
                        fadeDuration: const Duration(milliseconds: 500),
                    ),
                ),
            ),
        );
    }
}

License 📄 #

This project is licensed under the MIT License. See the LICENSE file for more details.