Extended_image

  • What function does a Flutter have Image
  • A Flutter can zoom in and out of dragged images
  • The effect of Flutter on wechat image slides to exit the page
  • Flutter picture clipping rotation flip editor

2019/06/16 update:

1. Added the onSlidingPage callback to set the state of other elements on the page while swiping

2. Add Chinese documents

This requirement was mentioned by the god customer when making extended_image, and there was no time to consider implementation. Recently, I thought about it and realized the effect.

First, turn on the effect of sliding out of the page

ExtendedImage

parameter description default
enableSlideOutPage Whether to enable the slide to exit page effect false

Package your page with ExtendedImageSlidePage

Note: The onSlidingPage callback, which you can use to set the state of other elements on the page when sliding. Be careful not to refresh directly with setState, because this will reset the state of ExtendedImage, and you should only notify the Widgets that need to refresh to refresh

    return ExtendedImageSlidePage(
      child: result,
      slideAxis: SlideAxis.both,
      slideType: SlideType.onlyImage,
      onSlidingPage: (state) {
        ///you can change other widgets' state on page as you want
        ///base on offset/isSliding etc
        //var offset= state.offset;
        varshowSwiper = ! state.isSliding;if(showSwiper ! = _showSwiper) {// do not setState directly here, the image state will change,
          // you should only notify the widgets which are needed to change
          // setState(() {
          // _showSwiper = showSwiper;
          // });_showSwiper = showSwiper; rebuildSwiper.add(_showSwiper); }});Copy the code

The parameters of the ExtendedImageGesturePage

parameter description default
child Pages that need to be wrapped –
slidePageBackgroundHandler Customize the background color of the entire page according to Offset when sliding the page defaultSlidePageBackgroundHandler
slideScaleHandler Customize the zoom value of the entire page according to Offset when sliding the page defaultSlideScaleHandler
slideEndHandler At the end of the slide page, calculate whether the pop page is required defaultSlideEndHandler
slideAxis Slide page orientation (both,horizontal,vertical), nuggets is vertical, wechat is both both
resetPageDuration Slide to the end, if not pop the page, the entire page bounces back to animation time milliseconds: 500
slideType Swipe the wholePage or just images (wholePage/onlyImage) SlideType.onlyImage
onSlidingPage Slide the page callback, where you can change the state of other elements on the page –

The following is the default implementation, and you can customize it to your liking

Color defaultSlidePageBackgroundHandler(
    {Offset offset, Size pageSize, Color color, SlideAxis pageGestureAxis}) {
  double opacity = 0.0;
  if (pageGestureAxis == SlideAxis.both) {
    opacity = offset.distance /
        (Offset(pageSize.width, pageSize.height).distance / 2.0);
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    opacity = offset.dx.abs() / (pageSize.width / 2.0);
  } else if (pageGestureAxis == SlideAxis.vertical) {
    opacity = offset.dy.abs() / (pageSize.height / 2.0);
  }
  return color.withOpacity(min(1.0, max(1.0 - opacity, 0.0)));
}

bool defaultSlideEndHandler(
    {Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {
  if (pageGestureAxis == SlideAxis.both) {
    return offset.distance >
        Offset(pageSize.width, pageSize.height).distance / 3.5;
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    return offset.dx.abs() > pageSize.width / 3.5;
  } else if (pageGestureAxis == SlideAxis.vertical) {
    return offset.dy.abs() > pageSize.height / 3.5;
  }
  return true;
}

double defaultSlideScaleHandler(
    {Offset offset, Size pageSize, SlideAxis pageGestureAxis}) {
  double scale = 0.0;
  if (pageGestureAxis == SlideAxis.both) {
    scale = offset.distance / Offset(pageSize.width, pageSize.height).distance;
  } else if (pageGestureAxis == SlideAxis.horizontal) {
    scale = offset.dx.abs() / (pageSize.width / 2.0);
  } else if (pageGestureAxis == SlideAxis.vertical) {
    scale = offset.dy.abs() / (pageSize.height / 2.0);
  }
  return max(1.0 - scale, 0.8);
}
Copy the code

Make sure your page has a transparent background

If you set slideType to slidetype. onlyImage, make sure your page is transparent. After all, you can’t control the color on your page

Push a transparent page

Here I put the official MaterialPageRoute and CupertinoPageRoute copy out, TransparentMaterialPageRoute/TransparentCupertinoPageRoute instead, Because their opaque cannot be set to false

  Navigator.push(
    context,
    Platform.isAndroid
        ? TransparentMaterialPageRoute(builder: (_) => page)
        : TransparentCupertinoPageRoute(builder: (_) => page),
  );
Copy the code

Well, it’s easy to use, isn’t it? The friends in the group made fun of too many emojis. They couldn’t let them go, blue thin mushroom.

Some potholes in the implementation

1. The relationship and conflict between gestures, zooming and dragging and PageView

My initial idea was to register the gesture listener event in ExtendedImageSlidePage, and then in ExtendedImageGesture, notify ExtendedImageSlidePage when the condition is met (reaches the boundary/can’t drag). Can block the hittest of ExtendedImageSlidePage’s child.

However, in practice, the ExtendedImageSlidePage does not fetch any gestures until the gesture is completed (finger raised), and IgnorePointer does not take effect

ExtendedImageSlidePage translate and scale. ExtendedImageSlidePage translate and Scale

2. Transparent pages

TransparentMaterialPageRoute/TransparentCupertinoPageRoute because they need the whole page is transparent, so rewrite the official.

However, I was still not satisfied with the pop page. For example, there is a left-to-right Shadow on ios and a Shadow on the entire page on Android.

Dart extended_image_slide_page_route. Dart extended_image_slide_page_route. Dart extended_image_slide_page_route.

Readme for extended_image

The readme has been retooled recently to help you make better use of this component. Thank you for your help in formatting the readme.

Finally put onextended_imagePlease let me know if there is anything you don’t understand or how to improve the program. Welcome to join usFlutter CandiesTogether to make cute little Flutter candiesQQ group: 181398081

And finally, put Flutter Candies on it. It smells sweet.