slide_de_presentation 是一个用于在 Flutter 应用中创建幻灯片展示的插件。它允许开发者轻松地创建带有过渡效果的幻灯片，适用于展示产品介绍、教程、演示文稿等场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 slide_de_presentation 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  slide_de_presentation: ^最新版本号

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

基本用法

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

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SlideDePresentation(
        slides: [
          Slide(
            backgroundColor: Colors.blue,
            child: Center(
              child: Text(
                'Slide 1',
                style: TextStyle(fontSize: 48, color: Colors.white),
              ),
            ),
          ),
          Slide(
            backgroundColor: Colors.green,
            child: Center(
              child: Text(
                'Slide 2',
                style: TextStyle(fontSize: 48, color: Colors.white),
              ),
            ),
          ),
          Slide(
            backgroundColor: Colors.orange,
            child: Center(
              child: Text(
                'Slide 3',
                style: TextStyle(fontSize: 48, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

参数说明

• slides: 一个包含 Slide 对象的列表，每个 Slide 对象代表一个幻灯片。
• Slide: 每个幻灯片可以自定义背景颜色、内容等。
  • backgroundColor: 幻灯片的背景颜色。
  • child: 幻灯片的内容，通常是一个 Widget，如 Text、Image 等。

自定义过渡效果

slide_de_presentation 插件支持自定义幻灯片之间的过渡效果。你可以通过设置 transition 参数来实现：

SlideDePresentation(
  slides: [
    // 你的幻灯片列表
  ],
  transition: SlideTransition.fade, // 使用淡入淡出效果
),

支持的过渡效果包括：

• SlideTransition.fade: 淡入淡出效果。
• SlideTransition.slide: 滑动效果。
• SlideTransition.zoom: 缩放效果。

控制幻灯片播放

你可以通过 SlideDePresentationController 来控制幻灯片的播放，例如跳转到特定幻灯片、暂停播放等。

final _controller = SlideDePresentationController();

SlideDePresentation(
  controller: _controller,
  slides: [
    // 你的幻灯片列表
  ],
);

// 跳转到第二张幻灯片
_controller.jumpToSlide(1);

// 播放幻灯片
_controller.play();

// 暂停幻灯片
_controller.pause();

完整示例

以下是一个完整的示例，展示了如何使用 SlideDePresentationController 来控制幻灯片的播放：

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

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

class MyApp extends StatelessWidget {
  final _controller = SlideDePresentationController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SlideDePresentation Example'),
        ),
        body: Column(
          children: [
            Expanded(
              child: SlideDePresentation(
                controller: _controller,
                slides: [
                  Slide(
                    backgroundColor: Colors.blue,
                    child: Center(
                      child: Text(
                        'Slide 1',
                        style: TextStyle(fontSize: 48, color: Colors.white),
                      ),
                    ),
                  ),
                  Slide(
                    backgroundColor: Colors.green,
                    child: Center(
                      child: Text(
                        'Slide 2',
                        style: TextStyle(fontSize: 48, color: Colors.white),
                      ),
                    ),
                  ),
                  Slide(
                    backgroundColor: Colors.orange,
                    child: Center(
                      child: Text(
                        'Slide 3',
                        style: TextStyle(fontSize: 48, color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () => _controller.jumpToSlide(0),
                  child: Text('First'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.previous(),
                  child: Text('Previous'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.next(),
                  child: Text('Next'),
                ),
                ElevatedButton(
                  onPressed: () => _controller.jumpToSlide(2),
                  child: Text('Last'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}