GT Image Viewer

pub package License: MIT

A universal Flutter image viewer package supporting network images with caching, SVG rendering, and Lottie animations with configurable containers.

Features

  • 🖼️ Cached Network Images - Automatic caching via cached_network_image
  • 📐 SVG Support - Asset and network SVG rendering
  • 🎬 Lottie Animations - Asset and network Lottie files
  • ⚙️ Configurable Containers - Width, height, border, shadow, padding
  • Circular Images - Easy circular image support
  • 🎨 Custom Widgets - Error and loading widget customization
  • 💾 Cache Management - Built-in cache manager helper

Installation

Add to your pubspec.yaml:

dependencies:
  gt_image_viewer: ^1.0.0

Then run:

flutter pub get

Quick Start

Network Image (Cached)

import 'package:gt_image_viewer/gt_image_viewer.dart';

UniversalImageViewer.network(
  url: 'https://example.com/image.png',
  config: ImageContainerConfig(
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

Asset Image

UniversalImageViewer.asset(
  assetPath: 'assets/images/logo.png',
  config: ImageContainerConfig(
    width: 100,
    height: 100,
  ),
)

Circular Image

UniversalImageViewer.network(
  url: 'https://example.com/avatar.png',
  config: ImageContainerConfig(
    width: 80,
    height: 80,
    isCircle: true,
  ),
)

SVG Image

// Asset SVG
UniversalSvgViewer.asset(
  svgPath: 'assets/icons/logo.svg',
  config: ImageContainerConfig(width: 48, height: 48),
  color: Colors.blue, // Optional tint
)

// Network SVG
UniversalSvgViewer.network(
  url: 'https://example.com/icon.svg',
)

Lottie Animation

// Asset Lottie
UniversalLottieViewer.asset(
  assetPath: 'assets/animations/loading.json',
  config: ImageContainerConfig(width: 100, height: 100),
)

// Network Lottie
UniversalLottieViewer.network(
  url: 'https://example.com/animation.json',
)

ImageContainerConfig Options

ImageContainerConfig(
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  alignment: Alignment.center,
  isCircle: false,
  borderRadius: BorderRadius.circular(12),
  backgroundColor: Colors.grey[200],
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(4),
  border: Border.all(color: Colors.black),
  boxShadow: [BoxShadow(blurRadius: 4)],
  clipBehavior: Clip.antiAlias,
)

Cache Management

// Get cache manager
final cacheManager = CacheManagerHelper().cacheManager;

// Clear all cache
await CacheManagerHelper().clearCache();

// Remove specific file from cache
await CacheManagerHelper().removeFile('https://example.com/image.png');

License

MIT License - see LICENSE for details.