fluttercandies extended_image. How do I zoom in on an image with double tap of 1 finger instead of needing 2?

Question

fluttercandies extended_image. How do I zoom in on an image with double tap of 1 finger instead of needing 2? How do I get a sliding image to navigator pop back when it slides off the page?

Trying to implement a zoom/pan image with double tap by 1 finger instead of the need for 2 to expand zoom an image. Have two issues with this code and was wondering if anyone has any ideas. The class is very simple with just 2 strings: image & title passed into it.

1, I need the image to expand on double tap. I would like the user to have to power to expand the image with one finger and not two. Think I need to put this code near the very end. The good thing is that once it is expanded the double tap works to reduce the image size. How do I get it to do the opposite when it is at normal size?

2, the sliding of the image off the page results in a black screen. Thankfully, this doesn’t freeze or crash the app but it leaves the user with a blank screen and the need to press the system back button. I would like the slide to result in a navigator pop back to the original screen.

Firstly, here’s a sample code of how I’m passing an image and a title into expandimage.dart.

FlatButton(
            child: Image.asset(_kAsset5),
            onPressed: () async {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ExpandImage(
                          image: _kAsset5,
                          title: "\'go help\' 1",
                        )),
              );
            },
          ),

Here’s the code that I’m using for this ‘expandimage.dart’ and a lot of it is based on the pan/zoom example from flutter candies / extended image example.

import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

class ExpandImage extends StatelessWidget {
  final String image, title;

  ExpandImage({this.image, this.title});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red[900],
        appBar: AppBar(
          backgroundColor: Colors.red[900],
          leading: IconButton(
            icon: Icon(Icons.close),
            onPressed: Navigator.of(context).pop,
          ),
          title: Text(
            title,
            style: TextStyle(
              color: Colors.yellow,
              inherit: true,
              fontWeight: FontWeight.w300,
              fontStyle: FontStyle.italic,
              letterSpacing: 2.0, //1.2
            ),
          ),
          centerTitle: true,
        ),
        body: SizedBox.expand(
          // child: Hero(
          // tag: heroTag,
          child: ExtendedImageSlidePage(
            slideAxis: SlideAxis.both,
            slideType: SlideType.onlyImage,
            child: ExtendedImage(
              //disable to stop image sliding off page && entering dead end without back button.
              //setting to false means it won't slide at all.
              enableSlideOutPage: true,
              mode: ExtendedImageMode.gesture,
              initGestureConfigHandler: (state) => GestureConfig(
                minScale: 1.0,
                animationMinScale: 0.8,
                maxScale: 3.0,
                animationMaxScale: 3.5,
                speed: 1.0,
                inertialSpeed: 100.0,
                initialScale: 1.0,
                inPageView: false,
              ),
              // onDoubleTap: ?  zoom in on image
              fit: BoxFit.scaleDown,
              image: AssetImage(
                image,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Here is a sample image passed in. the page turns red when sliding the image around and then it goes black as the image slides off the page.

user_14872824 · Answer

Hope it will help, if have any doubt ask in the comments.

class _DetailState extends State with TickerProviderStateMixin{


@override
  Widget build(BuildContext context) {
  AnimationController _animationController = AnimationController(duration: Duration(milliseconds: 200),vsync: this);
  Function() animationListener = () {};
  Animation? _animation;
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: ExtendedImage.network(
            widget.wallpaper.path,
            fit: BoxFit.contain,
            mode: ExtendedImageMode.gesture,
            initGestureConfigHandler: (state) {
              return GestureConfig(
                minScale: 0.9,
                animationMinScale: 0.7,
                maxScale: 3.0,
                animationMaxScale: 3.5,
                speed: 1.0,
                inertialSpeed: 100.0,
                initialScale: 1.0,
                inPageView: false,
                initialAlignment: InitialAlignment.center,
              );
            },
            onDoubleTap:  (ExtendedImageGestureState state) {
              ///you can use define pointerDownPosition as you can,
              ///default value is double tap pointer down postion.
              var pointerDownPosition = state.pointerDownPosition;
              double begin = state.gestureDetails!.totalScale!;
              double end;

              _animation?.removeListener(animationListener);
              _animationController.stop();
              _animationController.reset();

              if (begin == 1) {
                end = 1.5;
              } else {
                end = 1;
              }
              animationListener = () {
                //print(_animation.value);
                state.handleDoubleTap(
                    scale: _animation!.value,
                    doubleTapPosition: pointerDownPosition);
              };
              _animation = _animationController
                  .drive(Tween(begin: begin, end: end));

              _animation!.addListener(animationListener);

              _animationController.forward();
            },
          ),
      ),
  }
}

If it helps, mark it as right.

fluttercandies extended_image. How do I zoom in on an image with double tap of 1 finger instead of needing 2?

1 Answers