Flutter图片展示插件flutter_lightbox的使用

flutter_lightbox 是一个简单易用的Flutter插件，用于展示图片，并支持滑动切换、缩略图点击等功能。本文将详细介绍如何使用该插件。

安装

首先，您需要在项目中添加 flutter_lightbox 依赖：

flutter pub add flutter_lightbox

然后，在Dart代码中导入该插件：

import 'package:flutter_lightbox/flutter_lightbox.dart';

功能特性

• 支持本地资源图片（Image.Asset）和网络图片（Image.Network）
• 左右滑动切换图片
• 切换动画效果
• 可点击的缩略图

示例Demo

下面是一个完整的示例代码，展示了如何使用 flutter_lightbox 插件来展示图片。

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_lightbox/flutter_lightbox.dart';
import 'package:flutter_lightbox/image_type.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LightBox Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter LightBox Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> images = [
    'https://picsum.photos/250?image=10',
    'https://picsum.photos/250?image=13',
    'https://picsum.photos/250?image=15',
  ];

  final List<String> assetImages = [
    'assets/images/pikachu_1.png',
    'assets/images/pikachu_2.png',
    'assets/images/pikachu_3.png',
  ];

  Widget buildImageList(List<String> images, ImageType imageType) {
    return SizedBox(
      height: 85,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: images.length,
        itemBuilder: (BuildContext context, int index) {
          return InkWell(
            onTap: () {
              showGeneralDialog(
                context: context,
                pageBuilder: (BuildContext context, Animation animation,
                    Animation secondaryAnimation) {
                  return LightBox(
                    initialIndex: index,
                    images: images,
                    imageType: imageType,
                  );
                },
              );
            },
            child: Container(
              width: 70,
              height: 65,
              decoration: BoxDecoration(
                border: Border.all(
                  color: const Color.fromRGBO(246, 246, 246, 1),
                  width: 2,
                ),
                borderRadius: BorderRadius.circular(5),
              ),
              child: FittedBox(
                fit: BoxFit.contain,
                child: imageType == ImageType.network
                    ? Image.network(images[index])
                    : Image.asset(images[index]),
              ),
            ),
          );
        },
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            const Text("Network Images Example"),
            buildImageList(images, ImageType.network),
            const SizedBox(height: 30),
            const Text("Asset Images Example"),
            buildImageList(assetImages, ImageType.imageAsset),
            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}