Flutter创建引导页面（onboarding screens）插件gone_board的使用

Flutter创建引导页面（onboarding screens）插件gone_board的使用

简介

gone_board 是一个简单且轻量级的Flutter插件，用于创建引导页面（onboarding screens）。它非常易于使用和自定义。

预览

入门指南

要开始使用 gone_board 插件，首先需要将其添加到项目的 pubspec.yaml 文件中。

使用方法

更多详细信息可以参考 /example 文件夹中的示例代码。以下是 gone_board 的主要参数说明：

• onFinishedPage：完成引导页面后跳转到的主页面。
• pageController：用于控制引导页面的 PageController。
• items：包含多个 GonePage 的列表，每个 GonePage 代表一个引导页面。

完整示例Demo

以下是一个完整的示例代码，展示了如何在项目中使用 gone_board 插件。

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

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

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

  // 创建一个 PageController，初始页面为第一页
  final PageController pageController = PageController(initialPage: 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: GoneBoard(
          // 引导页面完成后跳转到的主页面
          onFinishedPage: DemoHome(),
          // 控制引导页面的 PageController
          pageController: pageController,
          // 引导页面的内容列表
          items: [
            // 第一个引导页面
            GonePage(
              image: 'assets/1.png',  // 引导页面的图片路径
              text: '欢迎使用 GoneBoard',  // 引导页面的文字内容
              color: Colors.blue,  // 引导页面的背景颜色
              context: context,  // 上下文
            ),
            // 第二个引导页面
            GonePage(
              image: 'assets/2.png',
              text: 'GoneBoard 是一个 Flutter 插件',
              color: Colors.red,
              context: context,
            ),
            // 第三个引导页面
            GonePage(
              image: 'assets/3.png',
              text: 'GoneBoard 用于创建引导页面',
              color: Colors.green,
              context: context,
            ),
          ],
        ),
      ),
    );
  }
}

// 主页面的示例
class DemoHome extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页面'),
      ),
      body: Center(
        child: Text('这是主页面'),
      ),
    );
  }
}