Flutter引导页插件nice_intro的使用

通过引导页向新用户介绍您的应用程序是一个很好的方式，可以帮助他们快速适应新的条件，从而更好地使用您的应用。

安装

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

dependencies:
  nice_intro: ^0.2.1

使用示例

首先，导入以下文件：

import 'package:nice_intro/intro_screen.dart';
import 'package:nice_intro/intro_screens.dart';

然后，创建一个包含多个 IntroScreen 的列表：

List<IntroScreen> pages =  [
  IntroScreen(
    title: '搜索',
    imageAsset: 'assets/img/1.png',
    description: '快速找到所有消息',
    headerBgColor: Colors.white,
  ),
  IntroScreen(
    title: '专注收件箱',
    headerBgColor: Colors.white,
    imageAsset: 'assets/img/2.png',
    description: "我们将您最重要的、可操作的邮件放在这里",
  ),
  IntroScreen(
    title: '社交',
    headerBgColor: Colors.white,
    imageAsset: 'assets/img/3.png',
    description: "与朋友保持联系",
  ),
];

最后，将这些页面传递给 IntroScreens 实例，并将其传递给您的 Scaffold 小部件：

IntroScreens introScreens = IntroScreens(
  footerBgColor: Colors.blue.withOpacity(.8),
  activeDotColor: Colors.white,
  footerRadius: 18.0,
  slides: pages,
);

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
    title: '引导页演示',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      body: introScreens,
    ),
    debugShowCheckedModeBanner: false,
  );
}

完整的示例代码如下：

import 'package:flutter/material.dart';
import 'package:nice_intro/intro_screen.dart';
import 'package:nice_intro/intro_screens.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: '引导页演示',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
        debugShowCheckedModeBanner: false,
      );
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var screens = IntroScreens(
      onDone: () => Navigator.of(context).push(
        MaterialPageRoute(
          builder: (context) => NextPage(),
        ),
      ),
      onSkip: () => print('跳过引导页'),
      footerBgColor: Colors.blue.withOpacity(.8),
      activeDotColor: Colors.white,
      footerRadius: 18.0,
      slides: [
        IntroScreen(
          title: '搜索',
          imageAsset: 'assets/img/1.png',
          description: '快速找到所有消息',
          headerBgColor: Colors.white,
        ),
        IntroScreen(
          title: '专注收件箱',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/2.png',
          description: "我们将您最重要的、可操作的邮件放在这里",
        ),
        IntroScreen(
          title: '社交',
          headerBgColor: Colors.white,
          imageAsset: 'assets/img/3.png',
          description: "与朋友保持联系",
        ),
      ],
    );

    return Scaffold(
      body: screens,
    );
  }
}

class NextPage extends StatefulWidget {
  [@override](/user/override)
  _NextPageState createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  [@override](/user/override)
  Widget build(BuildContext context) => Container(
        color: Colors.white,
      );
}