Open eduardothiesen opened 1 year ago
@eduardothiesen Thanks so much for the suggestion. Could you provide some more examples? Would this basically mean that a custom header widget and/or footer widget could be set?
Hey @jfahrenkrug! Thanks for the response. In my particular case, for example, I would need to pass a IconButton with the onPressed method to download the image to local storage. Other cases that come to mind would be a share button to send the image via email, etc.
But, basically, yes. I think being able to pass a custom widget as a header or footer would serve very well in all those cases.
Thanks in advance! :)
Another use-case would be to use the toolbar/custom widget to display a string. E.g image name or "Image 1 of 10".
@eduardothiesen @emil-dh Thank you for the ideas. It might take a bit for me to get around to it, but I'll think of something.
@eduardothiesen @emil-dh I've experimented with a few things. There are basically two types of headers/footers:
For things like image captions, you probably want option 1. For things like download buttons or a "image 1 of 10" label, you probably want option 2. Thoughts on this?
Here's a POC demo of option 1:
https://user-images.githubusercontent.com/16358/212030266-490aa564-65c1-406b-b38f-497d66d51f00.mp4
Good question! I don't think there is a clear answer here. In my opinion there is no right or wrong when looking at this from a UX perspective. Maybe make it configurable? Either fixed to container or the page (image).
This is how we use the image viewer in our app. We have customized it a little to be able to add an appbar in the top which displays the "# of #" text and the close button:
@emil-dh That looks very nice. Do you mind sharing your AppBar approach?
Sure!
This is how we create the blurred app bar:
PreferredSizeWidget _buildAppBar(BuildContext context, {bool blurEffect = true}) {
final appBar = AppBar(
title: Text(
'$_currentImage / $totalImages',
style: _titleTextStyle,
),
backgroundColor: blurEffect ? Colors.black.withOpacity(0.5) : Colors.black,
elevation: blurEffect ? 0.0 : null,
leading: CloseButton(
color: ColorPalette.white,
),
automaticallyImplyLeading: false,
);
if (!blurEffect) {
return appBar;
}
return PreferredSize(
preferredSize: const Size(
double.infinity,
56.0,
),
child: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 32, sigmaY: 32),
child: appBar,
),
),
);
}
It can then be used in a Scaffold
, like this:
final enableAppBarBlurEffect = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(context, blurEffect: enableAppBarBlurEffect),
backgroundColor: Colors.black,
extendBodyBehindAppBar: enableAppBarBlurEffect,
body: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: EasyImageViewPager(
easyImageProvider: _multiImageProvider,
pageController: _pageController,
doubleTapZoomable: true,
onScaleChanged: (scale) {
...
},
),
),
);
}
@emil-dh Ha, perfect timing! I was just looking at this ticket again. Thanks for sharing, I will experiment with this a bit.
any news? my case: IconButton to delete image
@Coin-ai No update yet, but it's a feature high up on the priority list.
Type
What kind of issue is this?
Description of the Issue
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.
Steps to Reproduce
n/a
Other Information
n/a