draggable_image

A Flutter widget for dragging & pinch-to-zoom images with a smooth snap-back animation using Overlay.

Quick Start

import 'package:draggable_image/draggable_image.dart';

Network Image (with caching)

DraggableImageWidget.network(
  'https://picsum.photos/900',
  imageWidth: double.infinity,
  imageHeight: 300,
  borderRadius: BorderRadius.circular(12),
  fit: BoxFit.cover,
)

Asset Image

DraggableImageWidget.asset(
  'assets/images/photo.png',
  imageWidth: 200,
  imageHeight: 200,
)

Memory Image (Uint8List)

// From file picker, camera, etc.
final bytes = await file.readAsBytes();

DraggableImageWidget.memory(
  bytes,
  imageWidth: 300,
  imageHeight: 200,
)

File Image

final file = File('/path/to/image.jpg');

DraggableImageWidget.file(
  file,
  imageWidth: 300,
  imageHeight: 200,
)

Custom ImageProvider

DraggableImageWidget.provider(
  ResizeImage(
    NetworkImage('https://example.com/image.jpg'),
    width: 200,
  ),
  imageWidth: 300,
  imageHeight: 200,
)

Features

• 🖼️ Multiple Image Sources: Network (cached), Asset, Memory, File, and custom ImageProvider
• 🔍 Pinch-to-Zoom: Smooth zoom gesture with configurable min/max scale
• 🖐️ Drag: Freely drag the image with overlay rendering for performance
• 🔙 Snap-back Animation: Smooth spring-like animation back to original position
• 👆 Callbacks: onTap, onLongPress, onGestureActiveChanged
• 🎨 Customizable: Overlay color/opacity, placeholder, error widget, border radius
• 📐 Double-tap: Toggle between fit modes with animation

Parameters