Flutter幻灯片展示插件slideshow_v的使用

slideshow_v 是一个用于 Flutter 的简单动画幻灯片插件，可以更改圆点的大小、颜色，并可以选择将圆点放置在顶部或默认留在底部。

开始使用

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

dependencies:
  ...
  slideshow_v: <latest_version>

在你的库中添加以下导入：

import 'package:slideshow_v/slideshow_v.dart';

如何使用？

简单示例

以下是一个简单的示例，展示如何创建一个基本的幻灯片组件：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '我的幻灯片',
      home: const MySlideshow(),
    );
  }
}

class MySlideshow extends StatelessWidget {
  const MySlideshow({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SlideShow(
      slides: [
        Image.asset('assets/images/slide-1.png'), // 第一张幻灯片图片
        Image.asset('assets/images/slide-2.png'), // 第二张幻灯片图片
        Image.asset('assets/images/slide-3.png'), // 第三张幻灯片图片
        Image.asset('assets/images/slide-4.png'), // 第四张幻灯片图片
        Image.asset('assets/images/slide-5.png'), // 第五张幻灯片图片
      ],
    );
  }
}

自定义设置

你可以通过设置一些参数来自定义幻灯片的外观。例如，设置圆点的位置、当前圆点的颜色、剩余圆点的颜色以及圆点的大小等。

参数说明

• upPoints: 是否将圆点放在顶部（布尔值，默认为 false）。
• primaryColor: 当前圆点的颜色（Color 类型，默认为灰色）。
• secondaryColor: 剩余圆点的颜色（Color 类型，默认为灰色）。
• primaryBullet: 当前圆点的大小（double 类型，默认为 8.0）。
• secondaryBullet: 剩余圆点的大小（double 类型，默认为 6.0）。

示例代码

以下是一个带有自定义设置的示例：

SlideShow(
  upPoints: true, // 将圆点放在顶部
  primaryColor: Colors.red, // 当前圆点的颜色为红色
  secondaryColor: Colors.purple, // 剩余圆点的颜色为紫色
  primaryBullet: 20, // 当前圆点的大小为 20
  secondaryBullet: 10, // 剩余圆点的大小为 10
  slides: [
    Image.asset('assets/images/slide-1.png'), // 第一张幻灯片图片
    Image.asset('assets/images/slide-2.png'), // 第二张幻灯片图片
    Image.asset('assets/images/slide-3.png'), // 第三张幻灯片图片
    Image.asset('assets/images/slide-4.png'), // 第四张幻灯片图片
    Image.asset('assets/images/slide-5.png'), // 第五张幻灯片图片
  ],
)

更多功能

你还可以在幻灯片中放置任何类型的 Widget，而不仅仅是图片。例如：

SlideShow(
  slides: [
    Center(child: Text('你好，世界')), // 中心显示文字
    Column(children: []), // 列布局
    Image.asset('assets/images/slide-3.png'), // 图片
    Center(child: CircularProgressIndicator.adaptive()), // 加载指示器
  ],
);

完整示例 Demo

以下是一个完整的示例代码，包含所有功能：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '我的幻灯片',
      home: const MySlideshow(),
    );
  }
}

class MySlideshow extends StatelessWidget {
  const MySlideshow({
    Key? key,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('幻灯片演示'),
      ),
      body: Center(
        child: SlideShow(
          upPoints: true, // 圆点放在顶部
          primaryColor: Colors.red, // 当前圆点的颜色为红色
          secondaryColor: Colors.purple, // 剩余圆点的颜色为紫色
          primaryBullet: 20, // 当前圆点的大小为 20
          secondaryBullet: 10, // 剩余圆点的大小为 10
          slides: [
            Image.asset('assets/images/slide-1.png'), // 第一张幻灯片图片
            Image.asset('assets/images/slide-2.png'), // 第二张幻灯片图片
            Image.asset('assets/images/slide-3.png'), // 第三张幻灯片图片
            Center(child: Text('欢迎使用幻灯片')), // 中心显示文字
            Image.asset('assets/images/slide-5.png'), // 第五张幻灯片图片
          ],
        ),
      ),
    );
  }
}