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. 🌐🖼️
Now supports Web! 🌍
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.
