easy_zoom_widget

pub package license

A simple and easy-to-use Flutter package that makes any widget zoomable with pinch, double-tap, and pan gestures. Perfect for images, custom widgets, and any content that needs zoom functionality!

✨ Features

  • 🔍 Pinch to Zoom - Use two fingers to zoom in and out smoothly
  • 👆 Double Tap - Double tap to zoom in, tap again to zoom out
  • 🖐️ Pan & Move - Drag around when zoomed in
  • 🎛️ Fully Customizable - Configure min/max zoom, animation speed, and more
  • 🎮 Programmatic Control - Control zoom programmatically with ZoomController
  • 🎨 Works with Any Widget - Images, containers, custom widgets, anything!
  • ⚡ Smooth Animations - Beautiful, fluid zoom animations
  • 🪶 Lightweight - No external dependencies

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  easy_zoom_widget: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start

Basic Usage

Wrap any widget with EasyZoomWidget:

import 'package:easy_zoom_widget/easy_zoom_widget.dart';

EasyZoomWidget(
  child: Image.network('https://picsum.photos/800/600'),
)

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

With Custom Settings

EasyZoomWidget(
  minScale: 0.8,
  maxScale: 5.0,
  doubleTapScale: 2.5,
  child: Container(
    width: 300,
    height: 300,
    color: Colors.blue,
    child: Center(child: Text('Zoom me!')),
  ),
)

With Controller (Programmatic Control)

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final ZoomController _controller = ZoomController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: EasyZoomWidget(
            controller: _controller,
            child: Image.asset('assets/photo.jpg'),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => _controller.zoomIn(),
              child: Text('Zoom In'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => _controller.zoomOut(),
              child: Text('Zoom Out'),
            ),
            SizedBox(width: 10),
            ElevatedButton(
              onPressed: () => _controller.reset(),
              child: Text('Reset'),
            ),
          ],
        ),
      ],
    );
  }
}

Listen to Scale Changes

EasyZoomWidget(
  onScaleChanged: (scale) {
    print('Current zoom scale: $scale');
  },
  child: YourWidget(),
)

🎨 Customization Options

Parameter Type Default Description
child Widget required The widget to make zoomable
minScale double 0.5 Minimum zoom level
maxScale double 4.0 Maximum zoom level
initialScale double 1.0 Initial zoom level
doubleTapScale double 2.0 Zoom level when double tapped
enableDoubleTap bool true Enable/disable double tap zoom
enablePinch bool true Enable/disable pinch zoom
enablePan bool true Enable/disable panning
animationDuration Duration 300ms Animation speed
animationCurve Curve Curves.easeInOut Animation curve
controller ZoomController? null Optional controller
onScaleChanged ValueChanged<double>? null Callback when scale changes
backgroundColor Color? null Background color

🎮 ZoomController Methods

Method Description
zoomIn({double factor = 1.5}) Zoom in by factor
zoomOut({double factor = 0.75}) Zoom out by factor
setScale(double scale) Set specific zoom level
reset() Reset to scale 1.0
currentScale Get current zoom scale
isAttached Check if controller is attached

💡 Tips & Best Practices

  1. For Images: Wrap your Image widget with EasyZoomWidget for instant zoom functionality
  2. For Custom Widgets: Works perfectly with any Flutter widget - Container, Column, Stack, etc.
  3. Performance: The package is optimized and lightweight - no performance issues even with large images
  4. Gesture Priority: Double-tap has priority over single tap, pinch works alongside pan gestures
  5. Controller Usage: Use controller when you need buttons or programmatic zoom control

🐛 Troubleshooting

Q: Widget doesn't zoom?
A: Make sure the parent widget has defined size (height/width) or uses Expanded/Flexible

Q: Zoom feels sluggish?
A: Adjust animationDuration to make it faster: Duration(milliseconds: 200)

Q: Want to disable certain gestures?
A: Use enableDoubleTap: false, enablePinch: false, or enablePan: false

📄 License

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

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

💬 Support

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

For bugs or feature requests, please create an issue on GitHub.

Happy Zooming! 🔍✨

Libraries

easy_zoom_widget