Flutter引导页插件apoapps_onboarding_screen的使用

概述

ApoappsOnBoarding Screen 是一个帮助开发者为应用创建引导页的库。它是从不再维护的 SKonboardingScreen 库分叉而来，并重新命名为 apoapps_onboarding_screen。此库由 Alejandro Apodaca Cordova 开发，用于个人项目（https://apodapps.com/）。

安装

在项目的 pubspec.yaml 文件中添加 apoapps_onboarding_screen 作为依赖项：

dependencies:
  apoapps_onboarding_screen: ^1.0.3

然后运行以下命令以安装依赖项：

flutter pub get

使用方法

导入类

在需要使用引导页的地方导入 apoapps_onboarding_screen 包：

import 'package:apoapps_onboarding_screen/sk_onboarding_screen.dart';

创建引导页数据模型

定义一组引导页的数据模型，每个模型包含标题、描述、颜色和图片路径：

final pages = [
  ApoappsOnboardingModel(
    title: '选择您的物品',
    description: '轻松找到您的杂货物品，并将收到广泛的配送',
    titleColor: Colors.black,
    descripColor: const Color(0xFF929794),
    imagePath: 'assets/onboarding1.png',
  ),
  ApoappsOnboardingModel(
    title: '自取或配送',
    description: '我们使订购快速、简单且免费——无论您在线订购还是现金支付',
    titleColor: Colors.black,
    descripColor: const Color(0xFF929794),
    imagePath: 'assets/onboarding2.png',
  ),
  ApoappsOnboardingModel(
    title: '快速便捷地付款',
    description: '使用信用卡或借记卡支付订单',
    titleColor: Colors.black,
    descripColor: const Color(0xFF929794),
    imagePath: 'assets/onboarding3.png',
  ),
];

将数据传递给引导页组件

将定义好的引导页数据传递给 ApoappsOnboardingScreen 组件，并设置背景色、主题色以及事件回调：

@override
Widget build(BuildContext context) {
  // 构建引导页
  return Scaffold(
    body: ApoappsOnboardingScreen(
      bgColor: Colors.white, // 背景色
      themeColor: const Color(0xFFf74269), // 主题色
      pages: pages, // 引导页数据
      skipClicked: (value) {
        print("跳过按钮被点击");
      },
      getStartedClicked: (value) {
        print("开始按钮被点击");
      },
    ),
  );
}

示例代码

以下是一个完整的示例代码，展示了如何使用 apoapps_onboarding_screen 创建引导页：

import 'package:apoapps_onboarding_screen/sk_onboarding_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      body: ApoappsOnboardingScreen(
        bgColor: Colors.white,
        themeColor: const Color(0xFFf74269),
        pages: pages,
        skipClicked: (value) {
          print("跳过按钮被点击");
        },
        getStartedClicked: (value) {
          print("开始按钮被点击");
        },
      ),
    );
  }

  final pages = [
    ApoappsOnboardingModel(
      title: "学习数学",
      description: "描述 1",
      titleColor: Colors.black,
      descripColor: const Color(0xFF929794),
      imagePath: 'assets/education.png',
    ),
    ApoappsOnboardingModel(
      title: "标题 2",
      description: "描述 2",
      titleColor: Colors.black,
      descripColor: const Color(0xFF929794),
      imagePath: 'assets/process.png',
    ),
    ApoappsOnboardingModel(
      title: "标题 3",
      description: "描述 3",
      titleColor: Colors.black,
      descripColor: const Color(0xFF929794),
      imagePath: 'assets/love.png',
    ),
  ];
}

许可证

版权所有 © 2022 Alejandro Apodaca Cordova

许可协议：BSD 3-Clause 许可证

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

1. 源代码的重新分发必须保留上述版权声明、本条件列表和以下免责声明。
2. 二进制形式的重新分发必须在文档和/或其他材料中包含上述版权声明、本条件列表和以下免责声明。
3. 版权持有人及其贡献者的名称不得用于支持或推广基于本软件的产品，除非事先获得书面许可。

本软件按“原样”提供，不作任何明示或暗示的保证，包括但不限于适销性和特定用途适用性的默示保证。在任何情况下，版权持有人或其贡献者均不对因使用本软件而引起的直接、间接、特殊、示例性或后果性损害负责，包括但不限于替代商品或服务的采购、使用损失、数据或利润损失或业务中断，无论这些损害是如何引起并在何种责任理论下产生的，无论是合同责任、严格责任还是侵权责任（包括疏忽或其他原因）。