Flutter引导页轮播插件flutter_carousel_intro的使用

插件介绍

flutter_carousel_intro 是一个用于创建引导页轮播效果的Flutter插件，由 Eliezer António 开发。该插件支持自定义子组件、滑动、旋转过渡、自动播放、水平和垂直过渡等功能，并且可以在Flutter Android、iOS、Web和桌面平台上使用。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_carousel_intro: ^1.0.11

然后在Dart文件中导入插件：

import 'package:flutter_carousel_intro/flutter_carousel_intro.dart';

使用方法

基本用法

以下是一个简单的示例，展示了如何使用 FlutterCarouselIntro 创建一个包含多个 SliderItem 的轮播图：

import 'package:flutter/material.dart';
import 'package:flutter_carousel_intro/flutter_carousel_intro.dart';
import 'package:flutter_svg/svg.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(useMaterial3: true),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: MySlideShow(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: FlutterCarouselIntro(
        animatedRotateX: true,
        animatedRotateZ: true,
        scale: true,
        autoPlay: true,
        animatedOpacity: false,
        autoPlaySlideDuration: const Duration(seconds: 2),
        autoPlaySlideDurationTransition: const Duration(milliseconds: 1100),
        primaryColor: const Color(0xff6C63FF),
        secondaryColor: Colors.grey,
        scrollDirection: Axis.horizontal, // 或者 Axis.vertical
        indicatorEffect: IndicatorEffects.jumping,
        showIndicators: true,
        slides: [
          SliderItem(
            title: 'Title 1',
            subtitle: const Text('Lorem Ipsum is simply dummy text'),
            widget: SvgPicture.asset("assets/slide-1.svg"),
          ),
          SliderItem(
            title: 'Title 2',
            subtitle: const Text('Lorem Ipsum is simply dummy text'),
            widget: SvgPicture.asset("assets/slide-2.svg"),
          ),
          SliderItem(
            title: 'Title 3',
            subtitle: const Text('Lorem Ipsum is simply dummy text'),
            widget: SvgPicture.asset("assets/slide-3.svg"),
          ),
          SliderItem(
            title: 'Title 4',
            subtitle: const Text('Lorem Ipsum is simply dummy text'),
            widget: SvgPicture.asset("assets/slide-4.svg"),
          ),
          SliderItem(
            title: 'Title 5',
            subtitle: const Text('Lorem Ipsum is simply dummy text'),
            widget: SvgPicture.asset("assets/slide-5.svg"),
          ),
          SliderItem(
            title: 'Title 6',
            widget: SvgPicture.asset("assets/slide-6.svg"),
            subtitle: ElevatedButton(
              onPressed: () {},
              child: const Text("skip"),
            ),
          ),
        ],
      ),
    );
  }
}

参数说明

以下是 SliderItem 的所有参数：

String? title,
TextStyle? titleTextStyle,
TextAlign? titleTextAlign,
Widget? subtitle,

其他功能

• 动画效果：可以通过设置 animatedRotateX、animatedRotateZ、scale 和 animatedOpacity 来启用不同的动画效果。
• 自动播放：通过设置 autoPlay 和 autoPlaySlideDuration 来控制自动播放的时间间隔。
• 指示器：通过设置 indicatorEffect 和 showIndicators 来控制指示器的效果和显示。

示例效果

正常示例

动画不透明度

动画缩放

X轴动画旋转

Z轴动画旋转

贡献

欢迎为这个项目做出贡献。如果你发现了Bug或有新的功能需求，请提交 issue，或者直接发送 pull request。

其他资源

更多关于 flutter_carousel_intro 的信息可以参考 GitHub 仓库 和 Flutter Gems 页面。

希望这篇文档能帮助你快速上手 flutter_carousel_intro 插件！如果有任何问题或建议，请随时联系我。