opt: 图片预览

lib/plugin/pl_gallery/custom_dismissible.dart

@@ -0,0 +1,156 @@
+import 'package:flutter/material.dart';
+
+/// A widget used to dismiss its [child].
+///
+/// Similar to [Dismissible] with some adjustments.
+class CustomDismissible extends StatefulWidget {
+  const CustomDismissible({
+    required this.child,
+    this.onDismissed,
+    this.dismissThreshold = 0.2,
+    this.enabled = true,
+    Key? key,
+  }) : super(key: key);
+
+  final Widget child;
+  final double dismissThreshold;
+  final VoidCallback? onDismissed;
+  final bool enabled;
+
+  @override
+  State<CustomDismissible> createState() => _CustomDismissibleState();
+}
+
+class _CustomDismissibleState extends State<CustomDismissible>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _animateController;
+  late Animation<Offset> _moveAnimation;
+  late Animation<double> _scaleAnimation;
+  late Animation<Decoration> _opacityAnimation;
+
+  double _dragExtent = 0;
+  bool _dragUnderway = false;
+
+  bool get _isActive => _dragUnderway || _animateController.isAnimating;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _animateController = AnimationController(
+      duration: const Duration(milliseconds: 300),
+      vsync: this,
+    );
+
+    _updateMoveAnimation();
+  }
+
+  @override
+  void dispose() {
+    _animateController.dispose();
+
+    super.dispose();
+  }
+
+  void _updateMoveAnimation() {
+    final double end = _dragExtent.sign;
+
+    _moveAnimation = _animateController.drive(
+      Tween<Offset>(
+        begin: Offset.zero,
+        end: Offset(0, end),
+      ),
+    );
+
+    _scaleAnimation = _animateController.drive(Tween<double>(
+      begin: 1,
+      end: 0.5,
+    ));
+
+    _opacityAnimation = DecorationTween(
+      begin: const BoxDecoration(color: Color(0xFF000000)),
+      end: const BoxDecoration(color: Color(0x00000000)),
+    ).animate(_animateController);
+  }
+
+  void _handleDragStart(DragStartDetails details) {
+    _dragUnderway = true;
+
+    if (_animateController.isAnimating) {
+      _dragExtent =
+          _animateController.value * context.size!.height * _dragExtent.sign;
+      _animateController.stop();
+    } else {
+      _dragExtent = 0.0;
+      _animateController.value = 0.0;
+    }
+    setState(_updateMoveAnimation);
+  }
+
+  void _handleDragUpdate(DragUpdateDetails details) {
+    if (!_isActive || _animateController.isAnimating) {
+      return;
+    }
+
+    final double delta = details.primaryDelta!;
+    final double oldDragExtent = _dragExtent;
+
+    if (_dragExtent + delta < 0) {
+      _dragExtent += delta;
+    } else if (_dragExtent + delta > 0) {
+      _dragExtent += delta;
+    }
+
+    if (oldDragExtent.sign != _dragExtent.sign) {
+      setState(_updateMoveAnimation);
+    }
+
+    if (!_animateController.isAnimating) {
+      _animateController.value = _dragExtent.abs() / context.size!.height;
+    }
+  }
+
+  void _handleDragEnd(DragEndDetails details) {
+    if (!_isActive || _animateController.isAnimating) {
+      return;
+    }
+
+    _dragUnderway = false;
+
+    if (_animateController.isCompleted) {
+      return;
+    }
+
+    if (!_animateController.isDismissed) {
+      // if the dragged value exceeded the dismissThreshold, call onDismissed
+      // else animate back to initial position.
+      if (_animateController.value > widget.dismissThreshold) {
+        widget.onDismissed?.call();
+      } else {
+        _animateController.reverse();
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget content = DecoratedBoxTransition(
+      decoration: _opacityAnimation,
+      child: SlideTransition(
+        position: _moveAnimation,
+        child: ScaleTransition(
+          scale: _scaleAnimation,
+          child: widget.child,
+        ),
+      ),
+    );
+
+    return GestureDetector(
+      behavior: HitTestBehavior.translucent,
+      onVerticalDragStart: widget.enabled ? _handleDragStart : null,
+      onVerticalDragUpdate: widget.enabled ? _handleDragUpdate : null,
+      onVerticalDragEnd: widget.enabled ? _handleDragEnd : null,
+      child: content,
+    );
+  }
+}

lib/plugin/pl_gallery/hero_dialog_route.dart

@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+
+/// A [PageRoute] with a semi transparent background.
+///
+/// Similar to calling [showDialog] except it can be used with a [Navigator] to
+/// show a [Hero] animation.
+class HeroDialogRoute<T> extends PageRoute<T> {
+  HeroDialogRoute({
+    required this.builder,
+    this.onBackgroundTap,
+  }) : super();
+
+  final WidgetBuilder builder;
+
+  /// Called when the background is tapped.
+  final VoidCallback? onBackgroundTap;
+
+  @override
+  bool get opaque => false;
+
+  @override
+  bool get barrierDismissible => true;
+
+  @override
+  String? get barrierLabel => null;
+
+  @override
+  Duration get transitionDuration => const Duration(milliseconds: 300);
+
+  @override
+  bool get maintainState => true;
+
+  @override
+  Color? get barrierColor => null;
+
+  @override
+  Widget buildTransitions(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+    Widget child,
+  ) {
+    return FadeTransition(
+      opacity: CurvedAnimation(parent: animation, curve: Curves.easeOut),
+      child: child,
+    );
+  }
+
+  @override
+  Widget buildPage(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+  ) {
+    final Widget child = builder(context);
+    final Widget result = Semantics(
+      scopesRoute: true,
+      explicitChildNodes: true,
+      child: child,
+    );
+    return result;
+  }
+}

lib/plugin/pl_gallery/index.dart

@@ -0,0 +1,6 @@
+library pl_gallery;
+
+export './hero_dialog_route.dart';
+export './custom_dismissible.dart';
+export './interactiveviewer_gallery.dart';
+export './interactive_viewer_boundary.dart';

lib/plugin/pl_gallery/interactive_viewer_boundary.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+
+/// A callback for the [InteractiveViewerBoundary] that is called when the scale
+/// changed.
+typedef ScaleChanged = void Function(double scale);
+
+/// Builds an [InteractiveViewer] and provides callbacks that are called when a
+/// horizontal boundary has been hit.
+///
+/// The callbacks are called when an interaction ends by listening to the
+/// [InteractiveViewer.onInteractionEnd] callback.
+class InteractiveViewerBoundary extends StatefulWidget {
+  const InteractiveViewerBoundary({
+    required this.child,
+    required this.boundaryWidth,
+    this.controller,
+    this.onScaleChanged,
+    this.onLeftBoundaryHit,
+    this.onRightBoundaryHit,
+    this.onNoBoundaryHit,
+    this.maxScale,
+    this.minScale,
+    Key? key,
+  }) : super(key: key);
+
+  final Widget child;
+
+  /// The max width this widget can have.
+  ///
+  /// If the [InteractiveViewer] can take up the entire screen width, this
+  /// should be set to `MediaQuery.of(context).size.width`.
+  final double boundaryWidth;
+
+  /// The [TransformationController] for the [InteractiveViewer].
+  final TransformationController? controller;
+
+  /// Called when the scale changed after an interaction ended.
+  final ScaleChanged? onScaleChanged;
+
+  /// Called when the left boundary has been hit after an interaction ended.
+  final VoidCallback? onLeftBoundaryHit;
+
+  /// Called when the right boundary has been hit after an interaction ended.
+  final VoidCallback? onRightBoundaryHit;
+
+  /// Called when no boundary has been hit after an interaction ended.
+  final VoidCallback? onNoBoundaryHit;
+
+  final double? maxScale;
+
+  final double? minScale;
+
+  @override
+  InteractiveViewerBoundaryState createState() =>
+      InteractiveViewerBoundaryState();
+}
+
+class InteractiveViewerBoundaryState extends State<InteractiveViewerBoundary> {
+  TransformationController? _controller;
+
+  double? _scale;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = widget.controller ?? TransformationController();
+  }
+
+  @override
+  void dispose() {
+    _controller!.dispose();
+
+    super.dispose();
+  }
+
+  void _updateBoundaryDetection() {
+    final double scale = _controller!.value.row0[0];
+
+    if (_scale != scale) {
+      // the scale changed
+      _scale = scale;
+      widget.onScaleChanged?.call(scale);
+    }
+
+    if (scale <= 1.01) {
+      // cant hit any boundaries when the child is not scaled
+      return;
+    }
+
+    final double xOffset = _controller!.value.row0[3];
+    final double boundaryWidth = widget.boundaryWidth;
+    final double boundaryEnd = boundaryWidth * scale;
+    final double xPos = boundaryEnd + xOffset;
+
+    if (boundaryEnd.round() == xPos.round()) {
+      // left boundary hit
+      widget.onLeftBoundaryHit?.call();
+    } else if (boundaryWidth.round() == xPos.round()) {
+      // right boundary hit
+      widget.onRightBoundaryHit?.call();
+    } else {
+      widget.onNoBoundaryHit?.call();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return InteractiveViewer(
+      maxScale: widget.maxScale!,
+      minScale: widget.minScale!,
+      transformationController: _controller,
+      onInteractionEnd: (_) => _updateBoundaryDetection(),
+      child: widget.child,
+    );
+  }
+}

lib/plugin/pl_gallery/interactiveviewer_gallery.dart

@@ -0,0 +1,399 @@
+library interactiveviewer_gallery;
+
+import 'dart:io';
+
+import 'package:dio/dio.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
+import 'package:path_provider/path_provider.dart';
+import 'package:pilipala/utils/download.dart';
+import 'package:share_plus/share_plus.dart';
+import 'package:status_bar_control/status_bar_control.dart';
+import 'custom_dismissible.dart';
+import 'interactive_viewer_boundary.dart';
+
+/// Builds a carousel controlled by a [PageView] for the tweet media sources.
+///
+/// Used for showing a full screen view of the [TweetMedia] sources.
+///
+/// The sources can be panned and zoomed interactively using an
+/// [InteractiveViewer].
+/// An [InteractiveViewerBoundary] is used to detect when the boundary of the
+/// source is hit after zooming in to disable or enable the swiping gesture of
+/// the [PageView].
+///
+typedef IndexedFocusedWidgetBuilder = Widget Function(
+    BuildContext context, int index, bool isFocus, bool enablePageView);
+
+typedef IndexedTagStringBuilder = String Function(int index);
+
+class InteractiveviewerGallery<T> extends StatefulWidget {
+  const InteractiveviewerGallery({
+    required this.sources,
+    required this.initIndex,
+    required this.itemBuilder,
+    this.maxScale = 4.5,
+    this.minScale = 1.0,
+    this.onPageChanged,
+    this.onDismissed,
+    Key? key,
+  }) : super(key: key);
+
+  /// The sources to show.
+  final List<T> sources;
+
+  /// The index of the first source in [sources] to show.
+  final int initIndex;
+
+  /// The item content
+  final IndexedFocusedWidgetBuilder itemBuilder;
+
+  final double maxScale;
+
+  final double minScale;
+
+  final ValueChanged<int>? onPageChanged;
+
+  final ValueChanged<int>? onDismissed;
+
+  @override
+  State<InteractiveviewerGallery> createState() =>
+      _InteractiveviewerGalleryState();
+}
+
+class _InteractiveviewerGalleryState extends State<InteractiveviewerGallery>
+    with SingleTickerProviderStateMixin {
+  PageController? _pageController;
+  TransformationController? _transformationController;
+
+  /// The controller to animate the transformation value of the
+  /// [InteractiveViewer] when it should reset.
+  late AnimationController _animationController;
+  Animation<Matrix4>? _animation;
+
+  /// `true` when an source is zoomed in and not at the at a horizontal boundary
+  /// to disable the [PageView].
+  bool _enablePageView = true;
+
+  /// `true` when an source is zoomed in to disable the [CustomDismissible].
+  bool _enableDismiss = true;
+
+  late Offset _doubleTapLocalPosition;
+
+  int? currentIndex;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _pageController = PageController(initialPage: widget.initIndex);
+
+    _transformationController = TransformationController();
+
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 300),
+    )
+      ..addListener(() {
+        _transformationController!.value =
+            _animation?.value ?? Matrix4.identity();
+      })
+      ..addStatusListener((AnimationStatus status) {
+        if (status == AnimationStatus.completed && !_enableDismiss) {
+          setState(() {
+            _enableDismiss = true;
+          });
+        }
+      });
+
+    currentIndex = widget.initIndex;
+    setStatusBar();
+  }
+
+  setStatusBar() async {
+    if (Platform.isIOS || Platform.isAndroid) {
+      await StatusBarControl.setHidden(true,
+          animation: StatusBarAnimation.FADE);
+    }
+  }
+
+  @override
+  void dispose() {
+    _pageController!.dispose();
+    _animationController.dispose();
+    try {
+      StatusBarControl.setHidden(false, animation: StatusBarAnimation.FADE);
+    } catch (_) {}
+    super.dispose();
+  }
+
+  /// When the source gets scaled up, the swipe up / down to dismiss gets
+  /// disabled.
+  ///
+  /// When the scale resets, the dismiss and the page view swiping gets enabled.
+  void _onScaleChanged(double scale) {
+    final bool initialScale = scale <= widget.minScale;
+
+    if (initialScale) {
+      if (!_enableDismiss) {
+        setState(() {
+          _enableDismiss = true;
+        });
+      }
+
+      if (!_enablePageView) {
+        setState(() {
+          _enablePageView = true;
+        });
+      }
+    } else {
+      if (_enableDismiss) {
+        setState(() {
+          _enableDismiss = false;
+        });
+      }
+
+      if (_enablePageView) {
+        setState(() {
+          _enablePageView = false;
+        });
+      }
+    }
+  }
+
+  /// When the left boundary has been hit after scaling up the source, the page
+  /// view swiping gets enabled if it has a page to swipe to.
+  void _onLeftBoundaryHit() {
+    if (!_enablePageView && _pageController!.page!.floor() > 0) {
+      setState(() {
+        _enablePageView = true;
+      });
+    }
+  }
+
+  /// When the right boundary has been hit after scaling up the source, the page
+  /// view swiping gets enabled if it has a page to swipe to.
+  void _onRightBoundaryHit() {
+    if (!_enablePageView &&
+        _pageController!.page!.floor() < widget.sources.length - 1) {
+      setState(() {
+        _enablePageView = true;
+      });
+    }
+  }
+
+  /// When the source has been scaled up and no horizontal boundary has been hit,
+  /// the page view swiping gets disabled.
+  void _onNoBoundaryHit() {
+    if (_enablePageView) {
+      setState(() {
+        _enablePageView = false;
+      });
+    }
+  }
+
+  /// When the page view changed its page, the source will animate back into the
+  /// original scale if it was scaled up.
+  ///
+  /// Additionally the swipe up / down to dismiss gets enabled.
+  void _onPageChanged(int page) {
+    setState(() {
+      currentIndex = page;
+    });
+    widget.onPageChanged?.call(page);
+    if (_transformationController!.value != Matrix4.identity()) {
+      // animate the reset for the transformation of the interactive viewer
+
+      _animation = Matrix4Tween(
+        begin: _transformationController!.value,
+        end: Matrix4.identity(),
+      ).animate(
+        CurveTween(curve: Curves.easeOut).animate(_animationController),
+      );
+
+      _animationController.forward(from: 0);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return InteractiveViewerBoundary(
+      controller: _transformationController,
+      boundaryWidth: MediaQuery.of(context).size.width,
+      onScaleChanged: _onScaleChanged,
+      onLeftBoundaryHit: _onLeftBoundaryHit,
+      onRightBoundaryHit: _onRightBoundaryHit,
+      onNoBoundaryHit: _onNoBoundaryHit,
+      maxScale: widget.maxScale,
+      minScale: widget.minScale,
+      child: Stack(children: [
+        CustomDismissible(
+          onDismissed: () {
+            Navigator.of(context).pop();
+            widget.onDismissed?.call(_pageController!.page!.floor());
+          },
+          enabled: _enableDismiss,
+          child: PageView.builder(
+            onPageChanged: _onPageChanged,
+            controller: _pageController,
+            physics:
+                _enablePageView ? null : const NeverScrollableScrollPhysics(),
+            itemCount: widget.sources.length,
+            itemBuilder: (BuildContext context, int index) {
+              return GestureDetector(
+                onDoubleTapDown: (TapDownDetails details) {
+                  _doubleTapLocalPosition = details.localPosition;
+                },
+                onDoubleTap: onDoubleTap,
+                child: widget.itemBuilder(
+                  context,
+                  index,
+                  index == currentIndex,
+                  _enablePageView,
+                ),
+              );
+            },
+          ),
+        ),
+        Positioned(
+          bottom: 0,
+          left: 0,
+          right: 0,
+          child: Container(
+            padding: EdgeInsets.fromLTRB(
+                12, 8, 20, MediaQuery.of(context).padding.bottom + 8),
+            decoration: _enablePageView
+                ? BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Colors.transparent,
+                        Colors.black.withOpacity(0.3)
+                      ],
+                    ),
+                  )
+                : null,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                IconButton(
+                  icon: const Icon(Icons.close, color: Colors.white),
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                    widget.onDismissed?.call(_pageController!.page!.floor());
+                  },
+                ),
+                widget.sources.length > 1
+                    ? Text(
+                        "${currentIndex! + 1}/${widget.sources.length}",
+                        style: const TextStyle(color: Colors.white),
+                      )
+                    : const SizedBox(),
+                PopupMenuButton(
+                  itemBuilder: (context) {
+                    return [
+                      PopupMenuItem(
+                        value: 0,
+                        onTap: () => onShareImg(widget.sources[currentIndex!]),
+                        child: const Text("分享图片"),
+                      ),
+                      PopupMenuItem(
+                        value: 1,
+                        onTap: () {
+                          Clipboard.setData(ClipboardData(
+                                  text:
+                                      widget.sources[currentIndex!].toString()))
+                              .then((value) {
+                            SmartDialog.showToast('已复制到粘贴板');
+                          }).catchError((err) {
+                            SmartDialog.showNotify(
+                              msg: err.toString(),
+                              notifyType: NotifyType.error,
+                            );
+                          });
+                        },
+                        child: const Text("复制图片"),
+                      ),
+                      PopupMenuItem(
+                        value: 2,
+                        onTap: () {
+                          DownloadUtils.downloadImg(
+                              widget.sources[currentIndex!]);
+                        },
+                        child: const Text("保存图片"),
+                      ),
+                    ];
+                  },
+                  child: const Icon(Icons.more_horiz, color: Colors.white),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ]),
+    );
+  }
+
+  // 图片分享
+  void onShareImg(String imgUrl) async {
+    SmartDialog.showLoading();
+    var response = await Dio()
+        .get(imgUrl, options: Options(responseType: ResponseType.bytes));
+    final temp = await getTemporaryDirectory();
+    SmartDialog.dismiss();
+    String imgName =
+        "plpl_pic_${DateTime.now().toString().split('-').join()}.jpg";
+    var path = '${temp.path}/$imgName';
+    File(path).writeAsBytesSync(response.data);
+    Share.shareXFiles([XFile(path)], subject: imgUrl);
+  }
+
+  onDoubleTap() {
+    Matrix4 matrix = _transformationController!.value.clone();
+    double currentScale = matrix.row0.x;
+
+    double targetScale = widget.minScale;
+
+    if (currentScale <= widget.minScale) {
+      targetScale = widget.maxScale * 0.7;
+    }
+
+    double offSetX = targetScale == 1.0
+        ? 0.0
+        : -_doubleTapLocalPosition.dx * (targetScale - 1);
+    double offSetY = targetScale == 1.0
+        ? 0.0
+        : -_doubleTapLocalPosition.dy * (targetScale - 1);
+
+    matrix = Matrix4.fromList([
+      targetScale,
+      matrix.row1.x,
+      matrix.row2.x,
+      matrix.row3.x,
+      matrix.row0.y,
+      targetScale,
+      matrix.row2.y,
+      matrix.row3.y,
+      matrix.row0.z,
+      matrix.row1.z,
+      targetScale,
+      matrix.row3.z,
+      offSetX,
+      offSetY,
+      matrix.row2.w,
+      matrix.row3.w
+    ]);
+
+    _animation = Matrix4Tween(
+      begin: _transformationController!.value,
+      end: matrix,
+    ).animate(
+      CurveTween(curve: Curves.easeOut).animate(_animationController),
+    );
+    _animationController
+        .forward(from: 0)
+        .whenComplete(() => _onScaleChanged(targetScale));
+  }
+}