[Feature request] Add custom buttons to expanded image

[eduardothiesen]

Type

What kind of issue is this?

[ ] Bug report
[X] Feature request

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

[jfahrenkrug]

@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?

[eduardothiesen]

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! :)

[emil-dh]

Another use-case would be to use the toolbar/custom widget to display a string. E.g image name or "Image 1 of 10".

[jfahrenkrug]

@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.

[jfahrenkrug]

@eduardothiesen @emil-dh I've experimented with a few things. There are basically two types of headers/footers:

1. Ones that move with the image when you swipe
2. Ones that are static and don't move while you swipe the image

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:

Simulator.Screen.Recording.-.iPhone.14.Pro.-.2023-01-12.at.10.27.01.mp4

[emil-dh]

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:

RPReplay_Final1673555221.mp4

[jfahrenkrug]

@emil-dh That looks very nice. Do you mind sharing your AppBar approach?

[emil-dh]

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) {
          ...
        },
      ),
    ),
  );
}

[jfahrenkrug]

@emil-dh Ha, perfect timing! I was just looking at this ticket again. Thanks for sharing, I will experiment with this a bit.

[Coin-ai]

any news?
my case: IconButton to delete image

[jfahrenkrug]

@Coin-ai No update yet, but it's a feature high up on the priority list.