semakers/zoom-widget

zoom-widget's Issues

Custom maximum scale support

I think it would be wonderful if you could set the scale as a custom property. I have been using other widgets to zoom, but yours is truly helpful, and I would love if this was added.

By doing some testing I have found that 1.0 is the maximum scale for every image, value given by the onScaleUpdate function.

Hope it can be added, anyhow, will try to understand the code to see if I can do a PR.

textfield on zoom_widget

Hãy giúp tôi vấn đề này, tôi xin cảm ơn!
Trong zoom_widget có chứa textfield với kích thước lớn. Khi con trỏ văn bản vượt quá kích thước màn hình, con trỏ sẽ bị ẩn. Làm thế nào để màn hình Zoom tự động cuộn để con trỏ văn bản luôn hiển thị trong màn hình thiết bị.

Would you mind adding a few examples.

I want to try to get this working with flutter desktop and web so a few examples will make cross testing more robust

Is there any way to set zoom widget fit with screen size?

The issue I'm facing right now is some device render a zoom's child fit with screen's height. (image 2) My intention of this widget is to display a zoom's child just like the image 1.

The device that have this issue is: My iPhone 7 Plus, iPhone 8 Plus simulator and Galaxy Tab Active 2.

Image 1 captured from 2022 iPhone SE and image 2 captured from iPhone 7 Plus.

I'm using Flutter Flutter 3.3.3 with Dart 2.18.2.

I've tried:

1. Change maxZoomWidth & maxZoomHeight higher, it work. But it cause a shifting pin location when save the data and it might have an unprecedented effect on other device.
2. Remove stack and use only image widget as a child, same result.
3. Wrap Center/ Container over Stack, didn't work either.
4. initScale: 1, didn't work.

This is my work code. The itemsInStack consists an image and pin that user can drag pin over the image.

      key: _zoomKey,
      maxZoomWidth: 800,
      maxZoomHeight: 600,
      initTotalZoomOut: true,
      colorScrollBars: Colors.transparent,
      scrollWeight: 0,
      child: Stack(
        children: itemsInStack,
      ),
    );

Easy points on pub dev

It seems that the package does not comply to the last null safety lint version of flutter

Can be fixed by removing the question mark.

Is it maintened?

?

Fit child exactly on initZoom

Is there a way I could fit my child widget exactly to the initZoom value?

Will you add the enableShadow property

There are always add BoxShadow around Image.
I want that can remove optionally.

'''
if (widget.enableShadow) BoxShadow(
color: Colors.black45,
blurRadius:
'''

Thank you if you like.

initPosition does't work

Initial position does not work. I tried set but it is always same position.

zoom auto changed from 0.0 to 1.0

First, you make a really nice widget.
Now is my case:
I init a page A with Zoom and initZoom = 0.0
but when the app navigate to a new page, and back to page A, Zoom got zoom value = 1.0
I tried so hard for why, but I can't figure it out
Thanks for supports

Programmatically zoom to point (feature request)

Would be nice to be able to be able to programmatically zoom to a point, or to a box area. This way certain areas could be zoomed into precisely e.g. by tapping on them.

There are quite a few of these 'pan-zoom' libraries around for Javascript, for example. I understand this is probably going to far down a rabbit hole for this zoom-widget, which does a specific job. Just throwing it out there!

Link in readme to pub.dev is missing

A link in readme to pub.dev page is missing.

How to remove left and right padding?

I have utilized the zoom widget within my application and noticed that there is padding present on the left and right sides of my app, despite assigning the maximum size to my widget. Can you assist me in eliminating this padding, represented by the red-colored area? I would like my container to occupy the entire space without any padding.

Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: zoom.Zoom(
          backgroundColor: Colors.red,
          canvasColor: Colors.blue,
          maxScale: 2,
          initTotalZoomOut: true,
          centerOnScale: true,
          doubleTapZoom: true,
          maxZoomHeight: MediaQuery.of(context).size.height,
          maxZoomWidth: (MediaQuery.of(context).size.width),
          child: Container(
            color: Colors.yellow,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Center(
              child: Text('This is Zoom widget'),
            ),
          ),
        ),
      ),
    );
  }

Widget do not seems to function

Hi

i am putting an image on the display and wanted to to be zoomable, i am using the following code:

_buildHorizontalLayout() {
return Zoom(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Center(child: Image.network(widget._picture,fit: BoxFit.fitWidth,)),
);
}

i cannot move,zoom or any other operation on the image. what am i doing worng?

Thanks much

Unwanted spaces around the zoom widget while using column widget

I have a requirement where I need to include some widgets above and below the zoom widget. I attempted to add these widgets using the Column widget, but when I placed them above and below the zoom widget, I noticed that there is some gray-colored space added on the left and right sides, as shown in the screenshot below. I have provided an example of my code for your reference. I also tried using the bottomNavigationBar, but encountered the same issue.

Screenshot

Example Code

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: LayoutBuilder(
            builder: (p0, p1) => Column(
              children: [
                Expanded(
                  child: SizedBox(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width,
                    child: Zoom(
                      initTotalZoomOut: true,
                      maxZoomHeight: MediaQuery.of(context).size.height,
                      maxZoomWidth: (MediaQuery.of(context).size.width),
                      child: SizedBox(
                        height: MediaQuery.of(context).size.height,
                        width: MediaQuery.of(context).size.width,
                        child: Center(
                            child: Container(
                                color: Colors.orange,
                                child: const Text(
                                    'Plants communicate with neighbouring plants to activate an airborne defence against aphids. However, the genetic pathway underlying this defence mechanism is unknown. A signalling cascade centred around the gaseous form of the chemical methyl salicylate was found to control this interaction between plants.'))),
                      ),
                    ),
                  ),
                ),
                Container(
                  height: 50,
                  color: Colors.green,
                  child: Row(
                    children: [
                      Expanded(child: Container()),
                      const Padding(
                        padding: EdgeInsets.only(right: 20),
                        child: Text(
                          'Click Me',
                          style: TextStyle(color: Colors.white, fontSize: 16),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Adding Repository link to pub.dev

Currently, we have a home page link in pub.dev which does not link directly to this repo page

It will be better to also have Repository (GitHub) link which will direct to this repo directly

Subcomponents are placed in Zoom and cannot be slid directly.

My subcomponent is contained within Zoom and my subcomponent is too long and won't slide. You need to put your finger on the colorScrollBars to slide. This is not what I want. How can I change it?

thanks.

onTab callback method of GestureDetector doesn't work as a child of Zoom widget

I use GestureDetector as a child of Zoom widget and onTab callback doesn't work.

Zoom(
    width: 1800,
    height: 1800,
    child: GestureDetector(
    onTap: () {
                  print("click");
                },
       child: Center(
        child: Text("Happy zoom!!"),
    ),),
);

Double tapping to zoom out doesn't center Zoom's child

As the title says, when I'm zoomed and and I double tap to zoom out, the widget doesn't center properly 9/10 times.

When it zooms out incorrectly it's always aligned too far to the left.

My code

return LayoutBuilder(builder: (context, constraints) {
    double zoomLevel = 2;
    return Zoom(
        width: constraints.biggest.width * zoomLevel,
        height: constraints.biggest.height * zoomLevel,
        initZoom: 0,
        centerOnScale: true,
            child: Image(
                width: constraints.biggest.width * zoomLevel,
                height: constraints.biggest.height * zoomLevel,
                image: this.page.image,
                fit: BoxFit.cover,
                alignment: Alignment.center,
          ),
    );
});

EDIT: After further testing it appears that it does center if I set zoomlevel to 3 or higher. I want to set it to 2 though so this is not a solution.

Can we disable mousewheel scrolling for zooming?

I want to provide the dropdown option to zoom (50% / 100% / etc.) and disable mousewheel zoom.
Is this possible? If not, could you kindly advise how to achieve it with this Widget?

Additionally I also want to add keyboard shortcuts (CMD+ / CMD-), I'll see how I can do that, otherwise that's optional

Thanks!

Initial	After clicking

P.S.: Really awesome widget, thanks for it!

Doble tap + drag your finger bug, also the widget start with maximun zoom.

I found this two bugs:

1. If you make doble tap and then you drag your finger to any direction as fastest as you can, the zoom "camera" will move to the left/top corner. Edit: If you make a "triple" tap, this bug appears
2. Also, the other bug I found seems to be related to the first one some way, it consist in that when I open the page with the zoom widget, it starts with all the zoom posible and with the "camera" in the left/top corner. I will try to add a video and some code for help you the max as possible to find the solution. :)

`
import 'package:flutter/material.dart';
import 'package:zoom_widget/zoom_widget.dart';

class Horizontalzoom{
static Zoom genericZoom(Stack child, double height, double width){
return Zoom(
centerOnScale: true,
initZoom: 0.0,
zoomSensibility: 7,
height: height,
width: width,
backgroundColor: Colors.white,
doubleTapZoom: true,
colorScrollBars: Colors.black,
opacityScrollBars: 0,
child: Material(child: child),
);
}
}
`

The height/width used is the device screen height/width converted to int and then multiplied for 6.0. So, basically im using a really big Zoom Widget but with the same ratio of the device screen. The child is a Stack Pane with many elements.

Video where you can see the two bugs:
https://youtu.be/LQ0i5BhHkqE

desktop using go-flutter

#2

Exception caught by rendering library

I wrapped my widget with Zoom widget, and getting this error:

 The following assertion was thrown during performLayout():
I/flutter (13643): BoxConstraints forces an infinite height.
I/flutter (13643): These invalid constraints were provided to _RenderColoredBox's layout() function by the following
I/flutter (13643): function, which probably computed the invalid constraints in question:
I/flutter (13643):   RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:266:13)
I/flutter (13643): The offending constraints were:
I/flutter (13643):   BoxConstraints(w=381.4, h=Infinity)
I/flutter (13643): 
I/flutter (13643): The relevant error-causing widget was:
I/flutter (13643):   Container
I/flutter (13643):   ....pub-cache/hosted/pub.dartlang.org/zoom_widget-0.1.3/lib/zoom_widget.dart:429:24
I/flutter (13643): 

I only set width, height and chiild:

            child: Zoom(
              width: 1000,
              height: 100,
              child: Stack(
                children: <Widget>[
                  ...

maximum and minimun scale

You can set maximum and minimum scale limits?

"InitPosition" and "initScale" cannot be displayed accurately

Hello. I am using Zoom_ In Widget 2.0.1 version, I encountered an issue where when I listened to "onPositionUpdate" and "onScaleUpdate" to record the scaling ratio size and position, the next time I entered the page, I used the previous history to display the scaling size and position, and the position was always incorrect, not the position of the previous history values

onPositionUpdate not working correctly when scale.

I'm working on getting the top left corner point to calculate coordinates for an additional view.
And I found that this point is only an approximation when not zoom. When you zoom, the onPositionUpdate function is returning an incorrect position.
Apparently, if true, then the red block in my code is always stationary in the top left corner of the screen.

Can you help me fix it?
Thank you!

Here is my code:

Offset offset = Offset(0, 0);

  Widget _buildDrawView() {
    return Zoom(
      initTotalZoomOut: true,
      centerOnScale: true,
      onPositionUpdate: (position) {
        setState(() {
          offset = position;
          print('onPositionUpdate ${position.dx} ${position.dy}');
        });
      },
      onScaleUpdate: (scale, zoom) {
        this.zoom = zoom;
        setState(() {
          print('onScaleUpdate scale ${scale} zoom ${zoom}');
        });
      },
      child: Stack(
        children: [
          DecoratedBox(
            decoration: BoxDecoration(border: Border.all()),
            child: Column(
              children: List.generate(20, (i) {
                return Row(
                  children: List.generate(20, (j) {
                    return Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
                      child: Center(
                        child: Text("(X:${j * 100}, Y:${i * 100})", style: const TextStyle(fontSize: 10)),
                      ),
                    );
                  }),
                );
              }),
            ),
          ),
          Positioned(
            left: offset.dx.abs(),
            top: offset.dy.abs(),
            child: Container(width: 100, height: 100, color: Colors.red),
          ),
        ],
      ),
    );
  }

Result:

Project.Name.mp4

Is there any way to set zoom widget fit with screen size?

Null check operator used on a null value

I am getting null pointer error

Stack trace

_TypeError: Null check operator used on a null value
  File "zoom_widget.dart", line 822, in _ZoomState.recalculateSizes.<fn>
  File "binding.dart", line 1284, in SchedulerBinding._invokeFrameCallback
  File "binding.dart", line 1223, in SchedulerBinding.handleDrawFrame
  File "binding.dart", line 1072, in SchedulerBinding._handleDrawFrame
  File "hooks.dart", line 142, in _invoke
  File "platform_dispatcher.dart", line 359, in PlatformDispatcher._drawFrame
  File "hooks.dart", line 112, in _drawFrame

My zoom code

Zoom(
  initScale: (videoHeight / screenWidth),
  centerOnScale: true,
  initPosition: Offset(screenWidth / -5, 0),
  enableScroll: false,
  doubleTapZoom: false,
  backgroundColor: colorScheme.primary,
  child: Opacity(
    opacity: isLoading ? 0.7 : 1,
    child: Container(
      color: colorScheme.primary,
      alignment: Alignment.center,
      height: screenWidth,
      width: screenWidth,
      child: BetterPlayer(
        controller: controller,
      ),
    ),
  ),
),

InitTotalZoomOut not working on large images

This package is very effective but initTotalZoomOut parameter not working for large images. For example when image size is 678.0, 452.0, it works fine and it initialized with full zoom out. But when image has large dimensions (2247.0, 1500.0) it initialized with a zoom. I haven't found the reason for this error yet. What can cause it?

Add minScale property

zoom_widget is great as I can find all the functions I need on it. But it doesn't have minScale.
I want to set a minimum scale value that cannot be exceeded

maxScale is not working

I've noticed that even if maxScale is set to 2.5, onDoubleTapScaleChange zoom still goes all the way to 2.5476018891697484, 2.6476018891697484 and even 2.742852587292335.

Also pinching to zoom goes above 2.5 the faster you try to zoom in.

It's really causing some undesired behaviours if you rely on maxScale being fixed.

Update package in pub.dev

@semakers recent commits like null check addition for a parameter are missing in pub.dev.

If you can kindly update, it would be great! Thanks in advance!

Initial zoom position

Is there any way to set initial zoom position to a certain offset of a widget inside zoom?

Is there shrinkWrap behavior?

In my code, I have an Image widget inside a ConstrainedBox in order to adjust the height according to the image.
When I add zoom as a parent for Image, it covers the max height of the ConstrainedBox.

Is there a way to have a dynamic height? Something like a shrinkWrap behaviour for example?

ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: screenHeight(context) ,
              minHeight: 50.0,
            ),
            child: Zoom(
              width: 500.0,
              height: 500.0,
              initZoom: 0.0,
              centerOnScale: true,
              child: Image.network(
                widget.mainImage,
                fit: BoxFit.fill,
                alignment: Alignment.center,
              ),
            ),
          ),

Having issue with zoom

zoom_widget: ^2.0.1

Fatal Exception: io.flutter.plugins.firebase.crashlytics.FlutterError: Null check operator used on a null value. Error thrown .
at _ZoomState.recalculateSizes.(zoom_widget.dart:824)
at SchedulerBinding._invokeFrameCallback(binding.dart:1297)
at SchedulerBinding.handleDrawFrame(binding.dart:1236)
at SchedulerBinding._handleDrawFrame(binding.dart:1085)

Single tap event is delayed (300ms) because onDoubleTap event is overwritten even when widget.doubleTapZoom is false

Possible solution:

....
child: InkWell(
              onDoubleTap: widget.doubleTapZoom ? () => _onDoubleTap() : null,
....

void _onDoubleTap() {
    doubleTapScale = scale;

    if (scale >= 0.99) {
      doubleTapDown = false;
    } else {
      doubleTapDown = true;
    }
    scaleAnimation.forward(from: 0.0);
  }
....

centerOnScale does not work

I am using centerOnScale like this

Zoom(
      initScale: (screenHeight / screenWidth),
      centerOnScale: true,
)    

But the position is not centered.
Does it take into account centering after initScale has been applied?

enableScroll false does not work when using a mouse

I am using Zoom like this

Zoom(
      initScale: (screenHeight / screenWidth),
      centerOnScale: true,
      initPosition: Offset(screenWidth / -5, 0),
      enableScroll: false,
)      

With the mouse on the emulator I can scroll even though enableScroll is false.

Touch on the emulator didn't scroll

It is not showing anything

I wrapped my child into Zoom widget, but it is not displaying anything
I even copied the example code still not displaying anything