Flutter轮播图展示插件slick_slides的使用

Flutter轮播图展示插件slick_slides的使用

Slick Slides

Slick Slides 是一个用于创建精美幻灯片的Flutter插件。 它不仅支持代码格式化和动画，还支持标题幻灯片、图片或其他任何Flutter Widget。

Slick Slides 由Serverpod团队开发和维护。 Serverpod 是一个用Dart编写的服务器，专为Flutter社区服务. 如果你还没有看过, 去看看吧.

使用说明

设置Slick Slides非常简单. 只需将 slick_slides 添加到你的 pubspec.yaml 文件中, 然后按照下面的指南进行操作.

1. 包含字体 默认情况下, Slick Slides 使用 Inter 和 Jetbrains Mono 来显示文本和代码. 需要将它们添加到 pubspec 中以使 Slick Slides 包可用. 这是一个示例, 显示了如何在 pubspec.yaml 的文件的 flutter 部分加载字体.

   flutter:
     uses-material-design: true
   
     # Include fonts from slick_slides package.
     fonts:
       - family: Inter
         fonts:
           - asset: packages/slick_slides/fonts/inter.ttf
       - family: JetbrainsMono
         fonts:
           - asset: packages/slick_slides/fonts/jetbrainsmono.ttf
   
     # Include all assets from the assets directory.
     assets:
       - assets/
   

2. 初始化Slick Slides 在使用 Slick Slides 之前, 需要先初始化它. 这会加载代码格式器和其他所需资源. 如果在调用 runApp 之前初始化 Slick Slides, 则需要在调用 initialize 方法之前调用 WidgetsFlutterBinding.ensureInitialized().

   WidgetsFlutterBinding.ensureInitialized();
   await SlickSlides.initialize();
   

现在可以在你的 widget 树中的任何地方添加 SlideDeck widget, 但通常情况下, 你会将其作为 MaterialApp 的的根容器来使用. SlideDeck 维护自己的导航器和主题.

要构建演示文稿, 向 SlideDeck widget 传递多个 Slide 对象. Slide 对象包含生成幻灯片的方法、主题数据、过渡信息和其他属性. Slick Slides 提供了许多预设的幻灯片类型, 你可以很容易地将其插入到演示文稿中, 如 TitleSlide、BulletsSlide、AnimatedCodeSlide 和 PersonSlide, 但你也可以创建自定义幻灯片, 具有任何类型的布局和内容.

下面是一个简单的 SlideDeck 示例, 其中有两个幻灯片:

// 设置默认过渡效果。
const _defaultTransition = SlickFadeTransition(
  color: Colors.black,
);

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

  @override
  Widget build(BuildContext context) {
    // 创建一个新的 SlideDeck, 包含一个 TitleSlide 和一个 BulletsSlide。
    return SlideDeck(
      slides: [
        TitleSlide(
          title: 'Slick Slides',
          subtitle: 'Stunning presentations in Flutter',
          transition: _defaultTransition,
        ),
        BulletsSlide(
          title: 'What is Slick Slides?',
          bulletByBullet: true,
          bullets: const [
            'Bullet number 1',
            'A second bullet',
          ],
          transition: _defaultTransition,
        ),
      ],
    );
  }
}

展示和动画代码

要显示或动画代码, 使用 AnimatedCodeSlide. Slick Slides 将对你的代码片段进行差异分析, 并像你在打字时那样动画代码的变化. 你还可以突出显示代码行, 以引起额外的关注. 下面是一个简单的示例:

const _codeExampleA = '''class MyClass {

}
''';

const _codeExampleB = '''class MyClass {
  String methodToAnimateIn() {
    return 'Hello world!';
  }
}
''';

@override
Widget build(BuildContext context) {
  // 创建一个新的 SlideDeck, 包含一个 TitleSlide 和一个 BulletsSlide.
  return SlideDeck(
    slides: [
      AnimatedCodeSlide(
        formattedCode: [
          FormattedCode(
            code: _codeExampleA,
          ),
          FormattedCode(
            code: _codeExampleB,
            highlightedLines: [1, 2, 3],
          ),
        ],
      ),
    ],
  );
}

创建自定义类型的幻灯片

Slick Slides 允许你使用任何 Flutter widgets 创建自定义类型的幻灯片. 你甚至可以创建交互式幻灯片. 对于使用自定义资产（如图片或动画）且需要提前加载的幻灯片, 可以使用 onPrecache 属性提供代码, 以便在滑动前加载幻灯片. 下面是一个自定义幻灯片示例, 显示了一个动画的 Serverpod logo (来自 made_with_serverpod 包):

Slide(
  builder: (context) {
    return const ContentLayout(
      content: Center(
        child: SizedBox(
          width: 600,
          child: AnimatedServerpodLogo(
            brightness: Brightness.dark,
            animate: true,
            loop: false,
          ),
        ),
      ),
    );
  },
  transition: const SlickFadeTransition(),
  onPrecache: (context) async {
    AnimatedServerpodLogo.precache();
  },
)

小贴士! 你也可以覆盖 Slide 类, 使其更具有可重用性. 查看默认幻灯片集的源代码, 了解你是如何做到这一点的.

其他酷炫功能

Slick Slides 可以做以下一些很酷的事情:

• 创建带有丰富文本的幻灯片.
• 做英雄动画（只需像任何 Flutter 过渡一样添加英雄).
• 创建带有自定义控件的交互式幻灯片.
• 添加自定义主题. 默认提供了深色和浅色主题, 但你可以轻松创建和自定义自己的主题.
• 自动播放的幻灯片.
• 每个幻灯片关联的音频文件, 当幻灯片显示时播放.

已知问题

Slick Slides 工作得很好, 但也有一些已知的问题, 我们希望将来能够解决 (欢迎贡献):

• 默认用于显示高亮代码的自定义字体 (Jetbrains Mono) 不适用于 Flutter web.
• Hero 动画如果被中断 (例如, 快速切换到另一个幻灯片时), 会卡住.
• 视频幻灯片在使用淡入过渡离开幻灯片时不会正确淡出.

示例代码