zoom_widget 0.1.3

Flutter zoom widget #

With this widget you can create a customizable canvas in which you can zoom in flutter.

It is possible to customize virtually all the canvases of the canvas such as color, background color, acitvate and deactivate scrolls, change the color of scrolls, modify the sensitivity of the zoom, the initial zoom enters other aspects found in the construction of the Zoom class.

Installation #

Add to pubspec.yaml:

zoom_widget: ^0.1.3

How to use #

You only need to create an instance of the Zoom class in the child of your Scaffold or within the widget of your choice, within the child attribute, put the widget that you want to zoom in and the width and height of the canvas where it will be made zoom.

Import #

import 'package:zoom_widget/zoom_widget.dart';

Simple example #

    width: 1800,
    height: 1800,
    child: Center(
        child: Text("Happy zoom!!"),

Callbacks #

It is possible to obtain the x and y position of our canvas with respect to the scrolls and and the zoom and scale of our canvas using two simple callbacks in our Zoom instance.

    width: 1800,
    height: 1800,
    onPositionUpdate: (Offset position){


    onScaleUpdate: (double scale,double zoom){

        print("$scale  $zoom");

    child: Center(
        child: Text("Happy zoom!!"),

Customize properties #

Customizing the properties you can get amazing results.

  • width double.
  • height double.
  • backgroundColor Color.
  • canvasColor Color.
  • onPositionUpdate() Callaback.
  • onScaleUpdate() Callaback.
  • scrollWeight double.
  • opacityScrollBars double 0.0-1.0.
  • colorScrollBars Color.
  • centerOnScale bool.
  • initZoom double 0.0-1.0.
  • enableScroll bool.
  • zoomSensibility double.
  • doubleTapZoom bool.

Customized properties example #

    width: 1800,
    height: 1800,
    canvasColor: Colors.grey,
    backgroundColor: Colors.orange,
    colorScrollBars: Colors.purple,
    opacityScrollBars: 0.9,
    scrollWeight: 10.0,
    centerOnScale: true,
    enableScroll: true,
    doubleTapZoom: true,
    zoomSensibility: 2.3,
    initZoom: 0.0,
    onPositionUpdate: (position){
        setState(() {
    onScaleUpdate: (scale,zoom){
        setState(() {
    child: Center(
        child: Text("x:${x.toStringAsFixed(2)} y:${y.toStringAsFixed(2)} zoom:${_zoom.toStringAsFixed(2)}",style: TextStyle(color: Colors.deepPurple,fontSize: 50),),

Examples #

Mobile #

In the example/mobile folder you will find the example ready to run with Flutter using the commands.

flutter pub get
flutter run

Desktop #

In the example/desktop folder you will find the example ready to run with Hover.

Hover - Run Flutter apps on the desktop with hot-reload


  • ios double tap support added.


  • desktop example added.
  • documentation updated.


  • double tap zoom added.


  • example added.


  • documentation added.
  • null conditions in callbacks added.


  • initial release.

Use this package as a library

1. Depend on it

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

  zoom_widget: ^0.1.3

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:zoom_widget/zoom_widget.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 25, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health suggestions

Format lib/MultiTouchGestureRecognizer.dart.

Run flutter format to format lib/MultiTouchGestureRecognizer.dart.

Format lib/zoom_widget.dart.

Run flutter format to format lib/zoom_widget.dart.

Maintenance suggestions

Maintain an example.

None of the files in the package's example/ directory matches known example patterns.

Common filename patterns include main.dart, example.dart, and zoom_widget.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies