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.
Add to pubspec.yaml:
dependencies:
zoom_widget: ^2.0.0
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 'package:zoom_widget/zoom_widget.dart';
Center flutter logo using all space of view port:
Zoom(
initTotalZoomOut: true,
child: Center(
child: FlutterLogo(
size: 1000,
),
),
);
Center text with max width and max height:
Zoom(
maxZoomWidth: 1800,
maxZoomHeight: 1800,
child: Center(
child: Text("Happy zoom!!"),
)
);
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.
Zoom(
maxZoomWidth: 1800,
maxZoomHeight: 1800,
onTap: (){
print("Widget clicked");
},
onPositionUpdate: (Offset position){
print(position);
},
onScaleUpdate: (double scale,double zoom){
print("$scale $zoom");
},
child: Center(
child: Text("Happy zoom!!"),
)
);
Customizing the properties you can get amazing results.
- width (Depreceted) double.
- height (Depreceted) double.
- maxZoomWidth double.
- maxZoomHeight double.
- backgroundColor Color.
- canvasColor Color.
- onPositionUpdate() Callaback.
- onScaleUpdate() Callaback.
- onTap() Callaback.
- scrollWeight double.
- opacityScrollBars double 0.0-1.0.
- colorScrollBars Color.
- centerOnScale bool.
- initZoom (Depreceted) double.
- initPosition Offset.
- initScale double
- enableScroll bool.
- zoomSensibility double.
- doubleTapZoom bool.
- transformationController TransformationController.
- radiusScrollBars double.
- doubleTapScaleChange double.
- doubleTapAnimDuration Duration.
- initTotalZoomOut bool.
Zoom(
maxZoomWidth: 1800,
maxZoomHeight: 1800,
canvasColor: Colors.grey,
backgroundColor: Colors.orange,
colorScrollBars: Colors.purple,
opacityScrollBars: 0.9,
scrollWeight: 10.0,
centerOnScale: true,
enableScroll: true,
doubleTapZoom: true,
zoomSensibility: 0.05,
onTap: (){
print("Widget clicked");
}
onPositionUpdate: (position){
setState(() {
x=position.dx;
y=position.dy;
});
},
onScaleUpdate: (scale,zoom){
setState(() {
_zoom=zoom;
});
},
child: Center(
child: Text("x:${x.toStringAsFixed(2)} y:${y.toStringAsFixed(2)} zoom:${_zoom.toStringAsFixed(2)}",style: TextStyle(color: Colors.deepPurple,fontSize: 50),),
),
);
It can be used for more complex things like an image gallery.
All examples of gifs are inside the example
zoom-widget's People
Forkers
happy-ferret frankxzx jobehi tarasryb winterdl foresightmobile ardcode harri2012 sanrixue khusaeriz momijimatt imajercsik redinterface descompilando nizwar korbofish mozhaiskyi trustmefelix domesticmouse mantano abdullahalasad rao-subba-venkata ashirg-ch shuheiyoshidajp qtee16 vingred tinisoft appnation guyluz11 danbrotherston grssdm xomad-mobile jon-mly demohstenszoom-widget's Issues
initPosition does't work
Initial position does not work. I tried set but it is always same position.
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?
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!
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),
),
),
],
),
),
],
),
),
),
),
);
}
}
Link in readme to pub.dev is missing
A link in readme to pub.dev page is missing.
Is there any way to set zoom widget fit with screen size?
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!
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
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!
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.
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
Is it maintened?
?
"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
Fit child exactly on initZoom
Is there a way I could fit my child widget exactly to the initZoom value?
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
Easy points on pub dev
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,
),
),
),
),
Initial zoom position
Is there any way to set initial zoom position to a certain offset of a widget inside zoom?
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'),
),
),
),
),
);
}
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?
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)
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.
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,
),
),
),
Doble tap + drag your finger bug, also the widget start with maximun zoom.
I found this two bugs:
- 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
- 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
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.
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.
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.
maximum and minimun scale
You can set maximum and minimum scale limits?
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:
- 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.
- Remove stack and use only image widget as a child, same result.
- Wrap Center/ Container over Stack, didn't work either.
- 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,
),
);
desktop using go-flutter
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ị.
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!!"),
),),
);
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>[
...
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
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
Adding Repository link to pub.dev
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
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);
}
....
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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.