πŸ“Έ Photo Opener

A Flutter package for a Telegram-style full-screen image viewer. Open images with smooth pinch-to-zoom, swipe navigation, thumbnails, and swipe-down-to-dismissβ€”ready to use with a single function call.

Supports: network URLs β€’ local assets β€’ device files β€’ web (assets & network only)


✨ Features

  • πŸ–Ό Full-screen viewer β€” Immersive image viewing
  • πŸ” Pinch to zoom β€” Smooth gestures with configurable min/max scale
  • πŸ“œ Gallery mode β€” Swipe between multiple images
  • πŸ‘† Swipe down to dismiss β€” Natural closing gesture (when not zoomed)
  • πŸ–± Tap to toggle UI β€” Show/hide header, footer, and thumbnails
  • 🎨 Customizable β€” Colors, padding, close button, loader, error widget
  • πŸ“± Platform support β€” Android, iOS, Web, Windows, macOS, Linux

πŸ“· Preview

Demo

Run the example app to see the viewer in action.


πŸš€ Installation

Add to your pubspec.yaml:

dependencies:
  photo_opener: ^0.2.8

Or use:

flutter pub add photo_opener

πŸ“– Quick Start

Minimal exampleβ€”open a gallery with one line:

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

// Inside your widget (e.g. onTap of an image):
onOpenPhoto(
  context: context,
  images: [
    'https://picsum.photos/id/1/1024/768',
    'https://picsum.photos/id/2/1024/768',
  ],
  type: PhotoType.network,
);

πŸ“– Full Example (Assets)

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

onOpenPhoto(
  context: context,
  images: [
    'assets/images/photo1.png',
    'assets/images/photo2.png',
    'assets/images/photo3.png',
  ],
  type: PhotoType.asset,
  initialIndex: 1,
  closeText: 'Back',
  minScale: 1,
  maxScale: 5,
);

πŸ” Authorization (JWT / Bearer Token)

Pass headers for authenticated image URLs:

onOpenPhoto(
  context: context,
  images: imageUrls,
  type: PhotoType.network,
  httpHeaders: {
    'Authorization': 'Bearer your_token_here',
  },
);

⚠️ Error Handling

Show a custom widget when image loading fails (e.g. in thumbnails):

onOpenPhoto(
  context: context,
  images: imageUrls,
  type: PhotoType.network,
  errorWidget: (context, url, error) => Icon(
    Icons.broken_image,
    size: 32,
    color: Colors.white70,
  ),
);

πŸ“± Platform Notes

Platform Network Assets Local Files
Android βœ… βœ… βœ…
iOS βœ… βœ… βœ…
Web βœ… βœ… ❌
Desktop βœ… βœ… βœ…

Web: Use PhotoType.network or PhotoType.asset. PhotoType.file is not supported on web.


πŸ“œ License

MIT License β€” use freely in your projects.