ZoomViewer

A powerful and easy-to-use Flutter package that makes any widget zoomable with pinch and pan gestures, just like zooming images in a gallery. Perfect for image viewers, charts, diagrams, and any interactive content that needs zoom functionality.

✨ Features

🔍 Universal Zoom - Works with ANY Flutter widget (Images, Containers, Custom Widgets, Charts, etc.)
👌 Pinch Gesture - Intuitive pinch to zoom in/out
🖐️ Pan Support - Smoothly pan around when zoomed
👆 Double Tap - Quick zoom toggle with double tap
⚙️ Highly Customizable - Configure min/max scale, animations, and more
🎨 Smooth Animations - Beautiful, configurable animations
📊 Real-time Callbacks - Get notified when zoom level changes
🎯 Production Ready - Well-tested and documented
📱 Cross Platform - Works on iOS, Android, Web, Windows, macOS, and Linux

📦 Installation

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

dependencies:
  zoom_viewer: ^1.0.3

flutter pub add zoom_viewer

Then run:

flutter pub get

🚀 Quick Start

Import the package:

import 'package:zoomable_widget/zoomable_widget.dart';

Wrap any widget with ZoomViewer:

ZoomViewer(
  child: Image.network('https://example.com/image.jpg'),
)

That's it! Your widget is now zoomable. 🎉

📖 Usage Examples

Basic Image Viewer

ZoomViewer(
  minScale: 0.5,
  maxScale: 4.0,
  child: Image.asset('assets/photo.jpg'),
)

Custom Container

ZoomViewer(
  minScale: 0.5,
  maxScale: 4.0,
  backgroundColor: Colors.black,
  child: Container(
    width: 300,
    height: 300,
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(20),
    ),
    child: Center(
      child: Text(
        'Zoom Me!',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ),
)

With Zoom Callback

ZoomViewer(
  minScale: 0.5,
  maxScale: 5.0,
  onScaleChanged: (scale) {
    print('Current zoom level: ${scale.toStringAsFixed(2)}x');
  },
  child: YourCustomWidget(),
)

ZoomViewer(
  minScale: 0.3,
  maxScale: 3.0,
  initialScale: 1.0,
  enablePan: true,
  resetOnDoubleTap: true,
  backgroundColor: Colors.grey[200],
  animationDuration: Duration(milliseconds: 300),
  clipBehavior: true,
  onScaleChanged: (scale) {
    setState(() {
      currentZoom = scale;
    });
  },
  child: YourComplexWidget(),
)

Image Gallery Viewer

PageView.builder(
  itemCount: images.length,
  itemBuilder: (context, index) {
    return ZoomViewer(
      minScale: 0.5,
      maxScale: 4.0,
      child: Image.network(images[index]),
    );
  },
)

🎛️ Configuration Parameters

Parameter	Type	Default	Description
`child`	`Widget`	required	The widget to make zoomable
`minScale`	`double`	`0.5`	Minimum zoom scale (must be > 0 and ≤ 1.0)
`maxScale`	`double`	`4.0`	Maximum zoom scale (must be ≥ 1.0)
`initialScale`	`double`	`1.0`	Initial zoom scale (between min and max)
`enablePan`	`bool`	`true`	Enable/disable panning gesture
`backgroundColor`	`Color?`	`null`	Background color behind the widget
`onScaleChanged`	`ValueChanged<double>?`	`null`	Callback fired when zoom level changes
`resetOnDoubleTap`	`bool`	`true`	Reset zoom on double tap
`animationDuration`	`Duration`	`300ms`	Duration for zoom animations
`clipBehavior`	`bool`	`true`	Whether to clip the child widget

🎮 Gestures

Pinch: Zoom in/out with two fingers
Pan: Move around when zoomed in (single finger drag)
Double Tap: Toggle between zoomed and initial state

💡 Real-World Use Cases

📸 Photo Galleries - Create Instagram-like image viewers
📊 Charts & Graphs - Allow users to zoom into data visualizations
🗺️ Maps & Diagrams - Interactive map exploration
📄 Document Viewers - PDF-like zoom functionality
🎨 Design Tools - Zoom into design mockups or blueprints
🎓 Educational Apps - Zoom into detailed diagrams and illustrations
🏗️ Floor Plans - Interactive building plan viewers
🧩 Puzzle Games - Zoom interface for detailed game boards

🏃 Running the Example

The package includes a complete example app with three different demos:

cd example
flutter pub get
flutter run

The example includes:

Simple Container - Basic zoomable colored box
Gradient Box - Beautiful gradient design with zoom
Complex Widget - Full user profile card with zoom

📱 Platform Support

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

🧪 Testing

The package includes comprehensive unit tests. Run them with:

flutter test

🤝 Contributing

Contributions are welcome! Here's how you can help:

🐛 Report bugs and issues
💡 Suggest new features
📝 Improve documentation
🔧 Submit pull requests

Please read CONTRIBUTING.md for details on our code of conduct and development process.

📋 Changelog

See CHANGELOG.md for a detailed list of changes in each version.

🐛 Issues

If you encounter any issues, please file them on our issue tracker.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Abubakar (AbubakrFlutter)

GitHub: @AbubakrFlutter

⭐ Show Your Support

If you like this package, please give it a ⭐ on GitHub and a 👍 on pub.flutter-io.cn!

🙏 Acknowledgments

Thanks to the Flutter team for creating such an amazing framework and to all contributors who help make this package better!

Made with ❤️ for the Flutter community