Allows widgets to be zoomed in and out by inserting a OverlayEntry which allows the widget to be on the front at all times.

Overview

zoom_pinch_overlay

    

An instagram style pinch and zoom widget for all platform completely written in pure dart!

All other "zoom_pinch" package doesnt didnt work for me because it doesnt appear on top of all other widgets which was an issue to one of my projects. This package solves that problem by introducing a OverlayEntry so that it appears on top of all other widgets.

Credit to @billylev for the contribution this package.

Getting Started

Just wrap your widget that you want to be able to zoom in a ZoomOverlay

This is the values used in the video which can be found in the example folder.

ZoomOverlay(
    minScale: 0.5, // Optional
    maxScale: 3.0, // Optional
    twoTouchOnly: true, // Defaults to false
    child: CachedNetworkImage(
        imageUrl: imageUrl,
    ),
),

Documentations

parameter documentation
minScale Specifies the minimum multiplier it can scale outwards.
maxScale Specifies the maximum multiplier the user can zoom inwards.
twoTouchOnly specifies wither the zoom is enabled only with two fingers on the screen. Defaults to false.
child A widget to make zoomable.
animationDuration Specifies the duration when the zoom has ended and is animating back to it's original place. Defaults to Duration(milliseconds: 100)

Medium blog post

Read the accompanying article here for more info about this package.

You might also like...

This package provides some widgets you can use to create a smooshy UI.

This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Dec 23, 2022

A wrapper to show a scroll to top prompt to the user on scrollable widgets.

A wrapper to show a scroll to top prompt to the user on scrollable widgets.

flutter_scroll_to_top A wrapper to show a scroll to top prompt to the user on scrollable widgets. Installing Add the following dependency to your pubs

May 16, 2022

A Flutter package that enables users to resize the internal widgets by dragging.

A Flutter package that enables users to resize the internal widgets by dragging.

resizable_widget ResizableWidget enables users to resize the internal widgets by dragging. This package contains simple APIs, but if needed, you can c

Dec 2, 2022

๐Ÿ”ฅ Flutter Widgets ๆŽ˜้‡‘ๅฏนๅบ”ไธ“ๆ ๏ผŒๆฌข่ฟŽๅ…ณๆณจ

๐Ÿ”ฅ Flutter Widgets ๆŽ˜้‡‘ๅฏนๅบ”ไธ“ๆ ๏ผŒๆฌข่ฟŽๅ…ณๆณจ

Flutter Widgets ็คบไพ‹้›†ๅˆ ๆœฌ้กน็›ฎๅŸบไบŽ Flutter 2.2.1 ็‰ˆๆœฌ๏ผŒๆ˜ฏ็ณปๅˆ— Flutter Widget ็คบไพ‹ๆบ็ ๏ผŒๆœ‰ๅฏนๅบ”็š„ๆ–‡็ซ ่ฏฆ็ป†่ฎฒ่งฃ๏ผŒๆŒ็ปญๆ›ดๆ–ฐๆ•ฌ่ฏทๅ…ณๆณจใ€‚ ๅœจ็บฟ้ข„่งˆ ๅ…จๆ™ฏ่„‘ๅ›พ ๆŒ็ปญๆ›ดๆ–ฐไธญ ๆŽ˜้‡‘ไธ“ๆ  ๆฌข่ฟŽๅ…ณๆณจ ๅทฒๅฎŒๆˆๆ–‡็ซ  AnimatedContainer ClipRRectใ€C

Dec 14, 2022

Code generation for Flutter Padding widgets based on your constants

Paddinger Paddinger is a Flutter package to generate Padding widgets. Given a set of constants like: @paddinger const double PADDING_NORMAL = 8; A set

Oct 20, 2022

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

May 15, 2022

Build Beautiful UIs with Flutter Widgets

Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Dec 31, 2021

Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layouts allows you to create responsive layout for mobile, web and desktop from a single codebase.

Fluid layout aims to help building a responsive experience through all the different screen sizes. Based in the boostrap approach, FluidLayout calculates a padding content (fluid_padding) that changes depending on the parent size. The Fluid widget uses that padding to set its size

Jan 10, 2022

A flutter package which makes it easier to display the difference between two images.

A flutter package which makes it easier to display the difference between two images.

๐Ÿ‘ Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Dec 30, 2022
Comments
  • Method 'insert' cannot be called on 'OverlayState?' because it is potentially null

    Method 'insert' cannot be called on 'OverlayState?' because it is potentially null

    Installed version: "1.3.1+1"

    : Error: Method 'insert' cannot be called on 'OverlayState?' because it is potentially null.
    ../โ€ฆ/lib/zoom_pinch_overlay.dart:232
    - 'OverlayState' is from 'package:flutter/src/widgets/overlay.dart' ('../../../flutter/packages/flutter/lib/src/widgets/overlay.dart').
    package:flutter/โ€ฆ/widgets/overlay.dart:1
        Try calling using ?. instead.
              overlayState.insert(_overlayEntry!);
                           ^^^^^^
    

    Doctor

    [โœ“] Flutter (Channel stable, 3.3.4, on macOS 12.6 21G115 darwin-arm, locale de-DE)
        โ€ข Flutter version 3.3.4 on channel stable at /Users/oliver/flutter
        โ€ข Upstream repository https://github.com/flutter/flutter.git
        โ€ข Framework revision eb6d86ee27 (5 days ago), 2022-10-04 22:31:45 -0700
        โ€ข Engine revision c08d7d5efc
        โ€ข Dart version 2.18.2
        โ€ข DevTools version 2.15.0
    
    [!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
        โ€ข Android SDK at /Users/oliver/Library/Android/sdk
        โœ— cmdline-tools component is missing
          Run `path/to/sdkmanager --install "cmdline-tools;latest"`
          See https://developer.android.com/studio/command-line for more details.
        โœ— Android license status unknown.
          Run `flutter doctor --android-licenses` to accept the SDK licenses.
          See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
    
    [โœ“] Xcode - develop for iOS and macOS (Xcode 14.0.1)
        โ€ข Xcode at /Applications/Xcode.app/Contents/Developer
        โ€ข Build 14A400
        โ€ข CocoaPods version 1.11.3
    
    [โœ“] Chrome - develop for the web
        โ€ข Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
    
    [โœ“] Android Studio (version 2021.2)
        โ€ข Android Studio at /Applications/Android Studio.app/Contents
        โ€ข Flutter plugin can be installed from:
          ๐Ÿ”จ https://plugins.jetbrains.com/plugin/9212-flutter
        โ€ข Dart plugin can be installed from:
          ๐Ÿ”จ https://plugins.jetbrains.com/plugin/6351-dart
        โ€ข Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    
    [โœ“] VS Code (version 1.72.0)
        โ€ข VS Code at /Applications/Visual Studio Code.app/Contents
        โ€ข Flutter extension version 3.50.0
    
    [โœ“] Connected device (3 available)
    xxx
    
    [โœ“] HTTP Host Availability
        โ€ข All required HTTP hosts are available
    
    
    opened by obrunsmann 2
  • feat: add modalBarrier and new color argument

    feat: add modalBarrier and new color argument

    Details:

    • This adds a modal barrier in the background (like in dialogs for example) and the user can set the color of that barrier to make it more customizable.

    In this PR I have also made a refactor of the code to make it look cleaner

    • constructors always first.
    • avoid lines longers than 80 lines.
    • add missing trailing commas.
    • use cascade.
    • use final in values that doesn't change.
    • omit type annotation.
    • async functions now has the type Future
    opened by gonzalogauto 1
  • Without twoTouchOnly set to true in Column, CastError appears

    Without twoTouchOnly set to true in Column, CastError appears

    Describe the bug I have the ZoomOverlay used in a Column widget, and when I don't set the twoTouchOnly property to true, the widget glitches quickly, bounces back to the original location and produces an error:

    I/flutter (23218): โ•โ•โ•ก EXCEPTION CAUGHT BY ANIMATION LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ• I/flutter (23218): The following _CastError was thrown while notifying listeners for AnimationController: I/flutter (23218): Null check operator used on a null value I/flutter (23218): I/flutter (23218): When the exception was thrown, this was the stack: I/flutter (23218): #0 _ZoomOverlayState.initState. (package:zoom_pinch_overlay/zoom_pinch_overlay.dart:92:36) I/flutter (23218): #1 AnimationLocalListenersMixin.notifyListeners (package:flutter/src/animation/listener_helpers.dart:136:19) I/flutter (23218): #2 AnimationController.value= (package:flutter/src/animation/animation_controller.dart:366:5) I/flutter (23218): #3 AnimationController.reset (package:flutter/src/animation/animation_controller.dart:385:5) I/flutter (23218): #4 _ZoomOverlayState.onScaleEnd (package:zoom_pinch_overlay/zoom_pinch_overlay.dart:176:22) I/flutter (23218): #5 ScaleGestureRecognizer._reconfigure. (package:flutter/src/gestures/scale.dart:465:53) I/flutter (23218): #6 GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24) I/flutter (23218): #7 ScaleGestureRecognizer._reconfigure (package:flutter/src/gestures/scale.dart:465:11) I/flutter (23218): #8 ScaleGestureRecognizer.handleEvent (package:flutter/src/gestures/scale.dart:388:36) I/flutter (23218): #9 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:93:12) I/flutter (23218): #10 PointerRouter._dispatchEventToRoutes. (package:flutter/src/gestures/pointer_router.dart:138:9) I/flutter (23218): #11 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:397:8) I/flutter (23218): #12 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:136:18) I/flutter (23218): #13 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:122:7) I/flutter (23218): #14 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:439:19) I/flutter (23218): #15 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:419:22) I/flutter (23218): #16 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:287:11) I/flutter (23218): #17 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:374:7) I/flutter (23218): #18 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:338:5) I/flutter (23218): #19 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:296:7) I/flutter (23218): #20 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:279:7) I/flutter (23218): #24 _invoke1 (dart:ui/hooks.dart:182:10) I/flutter (23218): #25 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:282:7) I/flutter (23218): #26 _dispatchPointerDataPacket (dart:ui/hooks.dart:96:31) I/flutter (23218): (elided 3 frames from dart:async) I/flutter (23218): I/flutter (23218): The AnimationController notifying listeners was: I/flutter (23218): AnimationController#e9df8(โฎ 0.000; paused) I/flutter (23218): โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•

    A workaround is to set this field to true; but the same error will appear if you then try to use 3 fingers instead of just 2.

    To Reproduce

    Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 16.0),
              child: Center(
                child: AspectRatio(
                  aspectRatio: kImageAspectRatio,
                  child: ZoomOverlay(
                    minScale: 0.5,
                    maxScale: 3.0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(6),
                      child: CachedNetworkImage(
                        imageUrl: imageUrl!,
                        fadeInCurve: Curves.easeInOutSine,
                        placeholder: (context, _) =>
                            const ImageLoadingPlaceholder(),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            caption,
          ],
        );
    

    Expected behavior The widget should zoom without an error, no matter if I set the twoTouchOnly property.

    Smartphone (please complete the following information):

    • Flutter (Channel stable, 2.2.3, on macOS 11.5 20G71 darwin-arm)
    • zoom_pinch_overlay: 1.1.2
    • Device: Samsung S21
    • OS: Android 11
    bug 
    opened by LevinGermann 1
  • Zooming should have priority over changing pages

    Zooming should have priority over changing pages

    First of all great job on this plugin. I am the developer of a similar plugin called pinch_zoom, but I was always struggling with some issues that this plugin doesn't have. Only one issue that my plugin managed to solve by using the InteractiveViewer, this plugin still has. Hopefully you might know a solution to this.

    Describe the bug When zooming in on an image in a PageView, the page will change instead of the image zooming in. Possibly this could be resolved using the OneSequenceGestureRecognizer or MultiDragGestureRecognizer. In my plugin I managed to solve this even more when using the answer provided in https://stackoverflow.com/questions/51712287/how-to-disable-multi-touch-in-mobile-application-using-flutter/56037327#56037327, which I had to use since I couldn't solve the issue using GestureRecognizer solutions, simply since my plugin uses the InteractiveViewer and not that one.

    To Reproduce Steps to reproduce the behavior:

    1. Add a PageView.builder() with multiple pages
    2. Add an image wrapped by the ZoomOverlay() to one of these pages
    3. Try zooming in on this image. Try with both more vertical and horizontal zooming.
    4. Though it works better with twoTouchOnly, you shall notice that the PageView tends to have priority over the zooming of the ZoomOverlay(). It also works better when zooming vertically.

    Expected behavior The image will zoom in instead of the page changing

    bug good first issue 
    opened by tkortekaas 4
Owner
Samuel
Samuel
Display all stand alone widgets in a nice UI

flutter_organized_widgets Display all stand alone widgets in a nice UI How to install Add to dependencies: flutter_organized_widgets: git: https

Norbert Kozsir 10 Nov 18, 2022
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jesรบs Rodrรญguez 44 Dec 6, 2022
A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

AbdulMuaz Aqeel 15 Dec 20, 2022
Scratch card widget which temporarily hides content from user.

scratcher Scratch card widget which temporarily hides content from user. Features Android and iOS support Cover content with full color or custom imag

Kamil Rykowski 405 Dec 27, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

direct-select-flutter DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is

null 582 Jan 4, 2023
HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

flutter_colorpicker HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps. Adorable color pickers out o

Dark Knight 279 Dec 30, 2022
Flutter Widgets that you can touch and feel

Flutter widgets you haven't used yet. Problems that proximity solves Currently, Flutter has a lot of useful pre-built widgets, no, too many widgets. T

Masahiro Aoki 32 Nov 8, 2022
Responsive Sizer helps implement are responsive layout by providing helper widgets and extensions

Responsive Sizer Responsive Sizer helps implement a responsive layout by providing helper widgets and extensions Content Installation Parameters Take

CoderUni 71 Jan 3, 2023
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

Evgeny Cherkasov 37 Jul 25, 2022