flutter 实现大图预览

最新推荐文章于 2025-09-05 14:21:20 发布

原创

最新推荐文章于 2025-09-05 14:21:20 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #flutter

1- 导入包具体版本请前往pub.dev查看

  # 图片预览
  photo_view: ^0.13.0

2- 路由动画组件

import 'package:flutter/cupertino.dart';

/// 路由动画
class FadeRoute extends PageRouteBuilder {
  final Widget page;

  FadeRoute({this.page})
      : super(
    pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        ) =>
    page,
    transitionsBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
        ) =>
        FadeTransition(
          opacity: animation,
          child: child,
        ),
  );
}

3- 真正实现大图查看

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewGalleryScreen extends StatefulWidget {
  List images = [];
  int index = 0;
  Stri