Flutter图片画廊缩放滑动插件gallery_zoom_slides的使用

gallery_zoom_slides

gallery_zoom_slides 是一个 Flutter 插件，提供了图片缩放、滑动和双击缩放功能。它支持多种主题样式，可以轻松地在你的应用中实现图片画廊的效果。

特性

• 平移手势：用户可以通过拖动手势来移动图片。
• 捏合缩放：用户可以通过捏合手势来放大或缩小图片。
• 双击缩放：用户可以通过双击来放大或缩小图片。
• 多种主题：提供了6种不同的主题样式。

主题示例

Options	Theme 1	Theme 2

Theme 3	Theme 4	Theme 5	Theme 6

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  gallery_zoom_slides: 0.1.2

然后运行 flutter pub get 来安装依赖。

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 gallery_zoom_slides 插件。

示例代码

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'gallery_zoom_slides'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) =>
                galleryZoomSlides(
                  arrayImages: const [
                    "https://i.ibb.co/VBTrQK2/1.jpg",
                    "https://i.ibb.co/nDtb6qs/2.jpg",
                    "https://i.ibb.co/5RRQbkr/3.jpg",
                    "https://i.ibb.co/T247TPg/4.jpg",
                    "https://i.ibb.co/wQLqSJD/5.jpg",
                  ],
                  zoomTheme: ZoomTheme.theme6,
                  selectedImagePosition: 0,
                  selectedThumbnailColor: Colors.blue,
                )
            ));
          },
          child: const Text("Open gallery"),
        ),
      ),
    );
  }
}

说明

1. 导入插件：在 main.dart 文件中导入 gallery_zoom_slides 插件。
2. 创建按钮：在 MyHomePage 中创建一个按钮，点击按钮时导航到图片画廊页面。
3. 配置画廊：在 Navigator.push 中调用 galleryZoomSlides 方法，并传入必要的参数，如图片数组、主题样式等。

注意事项

• 图片地址仅用于演示目的，请根据实际需求替换为你的图片地址。
• 你可以根据需要调整 zoomTheme、selectedImagePosition 和 selectedThumbnailColor 等参数。

通过以上步骤，你可以在 Flutter 应用中轻松实现一个功能丰富的图片画廊。