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

or

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(),
)

Complex Widget Example #

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 #

🎮 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:

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

📱 Platform Support #

🧪 Testing #

The package includes comprehensive unit tests. Run them with:

flutter test

🤝 Contributing #

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

1. 🐛 Report bugs and issues
2. 💡 Suggest new features
3. 📝 Improve documentation
4. 🔧 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