A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

Related tags

Templates pinch_zoom
Overview

pinch_zoom

A widget based on Flutter's new Interactive Viewer that makes picture pinch zoom, and return to its initial size and position when released.

This package offers Instagram based pinch zooming that feels more responsive than other similar packages.

This package is based on the recent Interactive Viewer that Flutter introduced since version 1.20.

The package is designed for zooming in on images, however it can also be used to zoom in on a video.

This pinch zooming is used in my app Palbum:

Example one Example two

Installation

Add this to your pubspec.yaml dependencies:

pinch_zoom: ^1.0.0

How to use

Add the widget to your app like this (It automatically takes the size of the image you pass to it):

PinchZoom(
    child: Image.network('https://placekitten.com/640/360'),
    resetDuration: const Duration(milliseconds: 100),
    maxScale: 2.5,
    onZoomStart: (){print('Start zooming');},
    onZoomEnd: (){print('Stop zooming');},
),
You might also like...

Flutter video compress - Generate a new file by compressed video, and provide metadata. Get video thumbnail from a video path, supports JPEG/GIF. To reduce app size not using FFmpeg in IOS.

Flutter video compress - Generate a new file by compressed video, and provide metadata. Get video thumbnail from a video path, supports JPEG/GIF. To reduce app size not using FFmpeg in IOS.

flutter_video_compress Generate a new path by compressed video, Choose to keep the source video or delete it by a parameter. Get video thumbnail from

Dec 8, 2022

Picture upload widget for Flutter which helps selecting and uploading one or multiple images to firebase storage.

Picture upload widget for Flutter which helps selecting and uploading one or multiple images to firebase storage.

Flutter Firebase Picture Uploader This library offers a Picture Upload widget which can be used to upload one or multiple images to your Firebase Stor

Oct 21, 2022

News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share feature, and more.

News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share feature, and more.

Ariel News App developed with Flutter featuring beautiful UI, category-based news, story for faster news reading, inbuilt article viewer, share featur

Nov 9, 2022

Widget that gives you the size of the widget in runtime.

Tailor Flutter widget that calculates the size of a widget in runtime. Usage Just wrap your widget with Tailor and get the size in the builder. The bu

Nov 2, 2022

A new Flutter project for finding movie and its details

A new Flutter project for finding movie and its details

movie_finder A new Flutter project for finding movie and its details. Project Screenshots Home Page Movie Detail Page #Project pages Home Page - Done

May 22, 2022

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter Mapbox GL Please note that this project is community driven and is not a

Jan 31, 2022

A flutter widget which renders its child outside the original widget hierarchy.

 A flutter widget which renders its child outside the original widget hierarchy.

overlay_container A flutter widget which renders its child outside the original widget hierarchy. Demo. This demo is present as an example here. You c

Jun 10, 2022

This is a flutter plugin to detect edges in a live camera, take the picture of detected edges object, crop it, and save.

This is a flutter plugin to detect edges in a live camera, take the picture of detected edges object, crop it, and save.

edge_detection A flutter plugin to detect edges of objects, scan paper, detect corners, detect rectangles. It allows cropping of the detected object i

Dec 28, 2022
Comments
  • Size of widget when not zooming should be controllable

    Size of widget when not zooming should be controllable

    Widget works great, except for the fact that it is not usable in a dialog, as it is impossible to pop it by clicking outside as the widget takes the full screen, even though the non-zoomed image does not fill the screen.

    opened by olefasting 1
  • InteractiveViwer Error

    InteractiveViwer Error

     Error: The method 'InteractiveViewer' isn't defined for the class '_PinchZoomState'.
     - '_PinchZoomState' is from 'package:pinch_zoom/src/pinch_zoom_widget.dart' ('/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/pinch_zoom-0.0.3/lib/src/pinch_zoom_widget.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'InteractiveViewer'.
                child: InteractiveViewer(
    
    opened by bawantha 1
  • The method 'call' was called on null.

    The method 'call' was called on null.

    Hi,

    First of all, thanks for the cool plugin!

    I am facing a weird issue not sure if you can help me. I have implemented the plugin in my code and each time just press to zoom it throws this error message: The method 'call' was called on null.

    Here is my code:

     Scaffold(
              // (....)
              body: PinchZoom(
                image: Image.file(imagePath),
                zoomedBackgroundColor: Colors.black.withOpacity(0.5),
                resetDuration: const Duration(milliseconds: 100),
                maxScale: 2.5,
              ),
              // (....)
    

    Error Log:

    ════════════════════════════════════════════════════════════════════════════════
    E/flutter (12662): [ERROR:flutter/lib/ui/ui_dart_state.cc(177)] Unhandled Exception: NoSuchMethodError: The method 'call' was called on null.
    E/flutter (12662): Receiver: null
    E/flutter (12662): Tried calling: call()
    E/flutter (12662): #0      Object.noSuchMethod  (dart:core-patch/object_patch.dart:51:5)
    E/flutter (12662): #1      _PinchZoomState._show 
    package:pinch_zoom/src/pinch_zoom_widget.dart:181
    E/flutter (12662): #2      _PinchZoomState.build.<anonymous closure>.<anonymous closure> 
    package:pinch_zoom/src/pinch_zoom_widget.dart:63
    E/flutter (12662): #3      new Future.delayed.<anonymous closure>  (dart:async/future.dart:326:39)
    E/flutter (12662): #4      _rootRun  (dart:async/zone.dart:1182:47)
    E/flutter (12662): #5      _CustomZone.run  (dart:async/zone.dart:1093:19)
    E/flutter (12662): #6      _CustomZone.runGuarded  (dart:async/zone.dart:997:7)
    E/flutter (12662): #7      _CustomZone.bindCallbackGuarded.<anonymous closure>  (dart:async/zone.dart:1037:23)
    E/flutter (12662): #8      _rootRun  (dart:async/zone.dart:1190:13)
    E/flutter (12662): #9      _CustomZone.run  (dart:async/zone.dart:1093:19)
    E/flutter (12662): #10     _CustomZone.bindCallback.<anonymous closure>  (dart:async/zone.dart:1021:23)
    E/flutter (12662): #11     Timer._createTimer.<anonymous closure>  (dart:async-patch/timer_patch.dart:18:15)
    E/flutter (12662): #12     _Timer._runTimers  (dart:isolate-patch/timer_impl.dart:397:19)
    E/flutter (12662): #13     _Timer._handleMessage  (dart:isolate-patch/timer_impl.dart:428:5)
    E/flutter (12662): #14     _RawReceivePortImpl._handleMessage  (dart:isolate-patch/isolate_patch.dart:168:12)
    E/flutter (12662):
    
    ════════ Exception caught by widgets library ═══════════════════════════════════
    
    opened by loonix 1
Owner
Teun Kortekaas
Teun Kortekaas
This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc.

screen_retriever This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc. screen_retriever P

LeanFlutter 27 Dec 6, 2022
An Android app that allows you to scan Japanese words from a picture and search for its meaning from a dictionary.

Jisho Lens is an app that allows you to scan Japanese words from a picture and search for its meaning from a dictionary. In a nutshell, think of it as

elianiva 12 Sep 22, 2022
Esizer - A Flutter package provide responsive, dynamic, configurable size for each device screen size

ESizer A Flutter package provide responsive, dynamic, configurable size for each

Extreme Vietnam Public 1 Feb 15, 2022
This library allows you to create editable tables and spreadsheets with ease, either by providing initial row and column count to display an empty table or use it with predefined rows and column data sets.

Editable ⚡️ A highly customizable, editable table package for Flutter projects. Specs This package allows you to create editable tables and spreadshee

Godwin Asuquo 94 Dec 7, 2022
Exploring the newly released and updated material widgets in Flutter .... Navigation Rail and others

flutter_material_widgets A Flutter project that gives a visual representation of how the new NavigationRail Widget in Flutter works. If you appreciate

Timilehin Jegede 5 Dec 25, 2020
Return a Stream that emits null and done event when didChangeDependencies is called for the first time.

did_change_dependencies Author: Petrus Nguyễn Thái Học Return a Stream that emits null and done event when State.didChangeDependencies is called for t

Petrus Nguyễn Thái Học 5 Nov 9, 2022
TheMathU Similarity Index App will accept a mathematical problem as user input and return a list of similar problems that have memorandums.

Technologies MathU Similarity Index - Segmentation Cult The MathU Similarity Index App accepts a mathematical problem as user input and returns a list

COS 301 - 2022 7 Nov 2, 2022
Return a result ErrorOr with either a value T or an error Object.

ErrorOr Return a result ErrorOr with either a value T or an error Object. Features Always return a value ErrorOr from an async function. Let the calle

Erlend 6 Nov 6, 2022
Iridium-reader-widget - Plug and play reader widget allowing to easily integrate an Iridium viewer inside any app

Plug and play reader widget allowing to easily integrate an Iridium viewer insid

Mantano 15 Dec 31, 2022
Automatically generate profile picture with random first name and background color. But you can still provide pictures if you have them. As the default color, based on the name of the first letter. :fire: :fire: :fire:

FLUTTER PROFILE PICTURE Automatically generate profile picture with random first name and background color. But you can still provide pictures if you

Aditya Dharmawan Saputra 10 Dec 20, 2022