ImageViewerPage #

ImageViewerPage ជួយអ្នកបង្ហាញរូបភាពជាស្រឡាយ និងអាចធ្វើចលនាប្លង់ចេញចូល (transitions) ដូចជា: flip, fade, rotate, scale និង cube!

ImageViewerPage helps you create beautiful full-screen image viewers with gesture control, zoom, swipe-to-dismiss, and animated transitions.

🧩Features #

✅ Feature	Description	Preview
Pinch to Zoom	Use two fingers to zoom in and out
Double Tap to Zoom	Quickly zoom in or out by double tapping
Swipe to Dismiss	Swipe up or down to dismiss the viewer
Transition Styles	Choose from: slide, fade, scale, flip, rotate, cube
Page Indicator Overlay	Shows current image index at the top right	—
Hero Animation Support	Smooth shared-element animation from thumbnail to fullscreen	—

Installing #

1. Depend on it #

Add this to your package's pubspec.yaml file:

dependencies:
  image_viewer_page: ^1.0.3

2. Install it #

flutter pub get

3. Import it #

import 'package:image_viewer_page/image_viewer_page.dart';

Usage #

Create a full-screen image viewer with optional animated transition:

 // Use custom Navigator of ImageViewerPage
 ImageViewerNavigator.push(
    context,
    imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
      ],
    initialIndex: 0, // index image when user tap
    transitionStyle: ImageTransitionStyle.flip,
  );
// Handle with flutter navigator
Navigator.of(context).push(
  PageRouteBuilder(
    opaque: false,
    barrierColor: Colors.black.withOpacity(0),
    pageBuilder: (_, __, ___) => ImageViewerPage(
      imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
      ],
      initialIndex: 0, // index image when user tap
      transitionStyle: ImageTransitionStyle.flip,
    ),
    transitionsBuilder:
        (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    },
  ),
);
// For Getx navigator
Get.to(
  () => ImageViewerPage(
    imageUrls: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
      ],
    initialIndex: 0, // index image when user tap
    transitionStyle: ImageTransitionStyle.flip,
  ),
  fullscreenDialog: true,
  opaque: false,
  transition: Transition.noTransition,
  popGesture: true,
  curve: Curves.easeInOut,
);

Example #

To see a full working example with grid thumbnails and different transitions:

cd example && flutter run

Creator #

ហ៊ិន រដ្ឋា
Mr. Hin Ratha
Flutter & Mobile Apps Developer
📱 096 659 2250
🌐 rathadev.site

Enjoy building animated image galleries with ImageViewerPage!