thesmythgroup / easy_image_viewer Goto Github PK
View Code? Open in Web Editor NEWAn easy Flutter image viewer with pinch & zoom support.
License: MIT License
An easy Flutter image viewer with pinch & zoom support.
License: MIT License
When i tap close button twice (fast) it pops me back 2 times (for example from Main/Screen1/Image to Main/ instead of Main/Screen1/)
When i tap close button multiple times, it should close only dialog with image.
showImageViewerPager(
context,
multiImageProvider,
backgroundColor: Colors.black,
swipeDismissible: true,
doubleTapZoomable: true,
);
As the title says, is there a good way to allow us to swipe the image up or down (but not diagonally) to dismiss the image?
As a developer I want to go to an specific page when showImageViewerPager
is invoked.
I'm using the package on a chat page, so I want to show an specific picture (the tapped one) but also I want users to swipe rigth and left in order to show other chat images.
Add an "initialPage" property to showImageViewerPager
n/a
You should be able to pan.
See above. Notably this doesn't happen on pages that are not the first page and it doesn't happen when swipeDismissible
is false.
I am unable to scroll to the next image on Windows.
Work the same as in the demo gif.
n/a
Is it possible to add an controller to navigate to the next image with the use of a button?
Can you add a widget that does not fill the entire screen?
Hi
I'm using this in my flutter app.
However, after I click on the image, and it opens in a new window, the image works and zooms great.
However, when I exit the image (with the x in the top), from now on, on all my other screens, I'm not able to scroll to the bottom. The last few lines of the screen are cut off at the bottom
Very strange.
If you zoom in to a picture and then zoom out of a picture, then immediately go to try to swipe to dismiss the photo, nothing happens. If you try to swipe to dismiss a second time then it works properly
It seems the first try to swipe to dismiss is not responsive; perhaps it is being interpreted as a pan motion rather then a swipe to dismiss motion?
The constructor of EasyImageView
now has differently named parameters, which is considered a breaking change
in version 1.2.1:
const EasyImageView({
Key? key,
required this.imageProvider,
this.minScale = 1.0,
this.maxScale = 5.0,
this.doubleTapZoomable = false,
this.onScaleChanged,
}) : super(key: key);
in version 1.3.0
const EasyImageView({
Key? key,
required this.imageWidget,
this.minScale = 1.0,
this.maxScale = 5.0,
this.doubleTapZoomable = false,
this.onScaleChanged,
}) : super(key: key);
Todo
Rename the parameter back to the old version, or retract the current version and release it as 2.0.0
n/a
When your MaterialApp.theme
's ThemeData.useMaterial3
is set to true
the corners in the full screen image viewer are rounded off, so that the app behind is still visible.
The whole background should be black.
Set the MaterialApp.theme
's ThemeData.useMaterial3
to true
and showImageViewer()
import 'package:flutter/material.dart';
import 'package:easy_image_viewer/easy_image_viewer.dart';
void main() {
runApp(MaterialApp(
theme: ThemeData(
useMaterial3: true, // important
),
home: const MyHomePage(),
));
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => showImageViewer(
context,
Image.network("https://picsum.photos/200").image,
),
child: const Text("click")),
),
);
}
}
Hey great plugin, you rock!
Can you please tell me if I can somehow round off the image?
I'm using EasyImageViewPager
The scaling state can not slide the page, and it is hoped that the content that supports scaling can turn the page without clipping the content preview. When sliding to the content boundary, the page will be triggered by sliding again (if _pagingEnabled can slide the page, single-finger sliding preview will appear when the scaled content will be clipped and the display will be incomplete)
Adding a initialIndex
property to showImageViewerPager
Todo
Added an initialIndex
property to the showImageViewerPager
to specify from which index it needs to display images. This is useful for situations where we have a carousel of images and when an image is tapped the showImageViewerPager
is called to show the selected image but we can swipe to see other ones (like previous and next ones)
n/a
Add a loading indicator or spinner widget while the image is being loaded.
Maybe a loadingIndicator
property can be added that accepts a Widget
. This way, while the image is loading, a custom spinner widget of our choice is displayed. I think it would be awesome to have this option added.
n/a
Is it possible to have feature that can make double click to zoom in and, if it zoomed can make double click to zoom out to original fit?
I would like to describe the following problem
after launch
showImageViewerPager(
context, MultiImageProvider([Image.network(networkPath).image]),
swipeDismissible: true, doubleTapZoomable: true, useSafeArea: true);
I return to the parent screen, call showModalBottomSheet and it slides exactly halfway down (cut off), this behavior occurs precisely after using your package. So throughout the application
useSafeArea: true/false (doesn't matter)
However, the following code solves the problem, but I still wonder what exactly causes the parent widget to be rebuilt?
showModalBottomSheet( builder (....) { return SafeArea(child ...) });
When useSafeArea: true
is set, the unsafe are has different colors than the backgroundColor that was set.
Take the following code as example:
showImageViewer(
context,
image,
useSafeArea: true,
immersive: true,
swipeDismissible: true,
doubleTapZoomable: true,
);
which results in this view (
top and bottom unsafe areas have different colors):
And you might say 'just set useSafeArea: false
, but if this is done then the result is this:
which is just as bad, because the 'x' (close) button is too far up and also doesn't align well with phones that have rounded corners since it's right at the edge.
I think the ideal outcome would be to have the safe area enabled, but the unsafe area should also be the same color as the background - or even better to be able to set the color manually.
Also the ability to completely remove the 'x' (close) button could be helpful - it can now turn transparent but it's still tappable.
To improve the user experience, adding support for hero animation can be beneficial.
I'm not sure if this feature already exists. However, I couldn't find any reference to this capability in the docs.
To incorporate hero animations, the two widgets in the different routes should be extended to the Hero
widget with the corresponding tag. This can be achieved by:
showImageViewer
For more info, please refer to the official docs:
https://docs.flutter.dev/ui/animations/hero-animations
This is more of an inexperience issue than an easy_image_viewer issue. But, I do see this frequently with using code like your example, where the data is pretty much static. The example worked on my first try with a simple cut and paste. I was trying to get a filename from my server and combine it with the ImageProvider to load the images from a server.
I tried making functions that returned a List-ImageProvder>, async functions, using initState, etc. With each of these ways, I tried Futurebuilders and various async functions.
As soon as a Future or async becomes involved, I get error after error from the MultiImageProvider.
Mind sharing how someone might go about this?
I just tried stuff like this:
String hashId = await ...
final List _imageProviders = [
Image.network("https://picsum.photos/id/1001/4912/3264/" + hashId + ".png").image,
];
And putting the above in functions and trying to make them async functions, so I could be sure the filename was downloaded before the ImageProvider was returned.
Note: I came up with a hack to get my app going. What I ended up doing was getting the filename on a previous page and passing it to the page with easy_image_viewer on it. This works fine. I would be interested in how a more experienced person might go about this, though.
Also, I do think the suggesting to add a loading spinner is a good one.
I will say, outside of this, everything else was pretty easy and works as advertised.
Thanks,
What kind of issue is this?
[ ] Bug report
[X] Feature request
It would be great if there was a possibility to add custom buttons to a header or footer in the expanded image. To add a download button, for example.
n/a
n/a
This does not work in Desktop (Windows) at Flutter version 2.10.3 channel stable
Todo
I should be able to see all the images declared in MultiImageProvider
Todo
Just try it on Desktop
n/a
n/a
When the function showImageViewer()
is called, the top Bar (Status Bar) in Android is automatically dismissed. Passing the argument immersive
as false
doesn't change this behaviour.
The StatusBar shouldn't be hidden after returning from the "view image" screen.
Edit: typo
I guess we can't use it with hero. It would be nice if it could be added in the next versions.
The theme I am using for my app is white, and the black bacground color of this widget is quite a harsh contrast color for the eyes.
So the ability to overwrite the default color (black) background would be greatly appreciated
Add the color as a configurable value in the constructor for the showImageViewerPager showdialog widget
how add custom widget such as add a download button to save network image to gallery
I noticed that in the pubspec.yaml
the minimum flutter version of this package is 1.17.0
. This was until now apparently not a problem, however flutter 3.13.0
introduced the PopScope
, which this package uses.
In the package where i use this package, I get warnings that PopScope
is not defined, since i'm still using flutter 3.7.
Bump the minimum flutter version to 3.13.0 in the pubspec.yaml
n/a
n/a
../../../.pub-cache/hosted/pub.dev/easy_image_viewer-1.4.0/lib/src/easy_image_provider.dart:85:14: Error: Cannot invoke a non-'const' constructor where a const expression is expected.
Try using a constructor or factory that is 'const'.
child: Column(
^^^^^^
Todo
InkWell(
onTap: () {
showImageViewer(
context,
(workItem.image != "")
? Image.network(
"${BASE_URL_WORK_IMAGE}${workItem.image}")
.image
: Image.network(
"https://t3.ftcdn.net/jpg/04/34/72/82/360_F_434728286_OWQQvAFoXZLdGHlObozsolNeuSxhpr84.jpg")
.image,
swipeDismissible: true,
doubleTapZoomable: true,
useSafeArea: true,
immersive: false);
},
child:Icon(Icons.add)
);
Currently contains a fatal bug
Same as this
#40
Flutter 3.16.3 iOS
Can't close modal window
Just open the modal to reproduce
Todo
Todo
n/a
It will be nice if you provide params for barrierDismissible
when passing the network image
showImageViewer(
context,
isFile
? Image.file(File(imageUrl)).image
: Image.network(
imageUrl,
).image,
onViewerDismissed: onDismissed)
like above if the imageUrl is empty or somehow there is an network exception then currently an placeholder is being shown it would be great if we could add our custom error widget on it
providing an onError methon on showImageViewer would be greate
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.