Flutter新用户引导插件easy_onboard的使用

Easy Onboard 💙

• 快速开始
• 安装
  • 依赖于它
  • 安装它
  • 导入它
• 使用
• 截图

快速开始

这是一个用于Flutter项目的易于使用的包。

• 如果你需要快速完成项目并关注设计，请将此包包含在你的项目中并快速使用。
• 你只需要编写文本和图像小部件。
• 设置主色调以匹配你的项目。

安装

1. 依赖于它

在你的pubspec.yaml文件中添加以下内容：

dependencies:
  easy_onboard: ^1.0.2

2. 安装它

你可以通过命令行安装包：

使用pub:

$ pub get

使用Flutter:

$ flutter pub get

3. 导入它

现在在你的Dart代码中可以使用：

import 'package:easy_onboard/easy_onboard.dart';

使用

首先，在你的项目中包含该包。然后将以下代码添加到你的小部件树中。

不要遗漏任何参数。

Onboard(
  primaryColor: const Color(0xff6C63FF),
  onboardPages: [
    OnboardModel(imagePath: 'assets/images/barbecu.png', title: 'Order Your Food', subTitle: 'Now you can order food any time right from your phone.'),
    OnboardModel(imagePath: 'assets/images/hamburger.png', title: 'Cooking Safe Food', subTitle: 'We are maintain safty and We keep clean while making food.'),
    OnboardModel(imagePath: 'assets/images/ice_cream.png', title: 'Quick Delivery', subTitle: 'Orders your favourite meals will be immediately deliver.'),
  ],
  lastText: 'Start',
  nextText: 'Next',
  skipText: 'Skip',
  skipButtonPressed: () {},
);

• primaryColor变量是包的主题颜色。
• 它接收onboardPages列表中的OnboardModel，模型的数量必须大于2。
• OnboardModel 包含 imagePath, title, subtitle 字段且这些字段不能为空。

不要忘记在 pubspec.yaml 文件中定义这些图像路径：

assets:
  - assets/images/

• lastText, nextText, skipText 是字符串定义，会出现在屏幕上。
• 在 skipButtonPressed 函数中编写点击跳过按钮后需要执行的操作。

例如：

skipButtonPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const SecondPage()),
  );
},

截图

示例代码

以下是一个完整的示例代码，展示了如何使用 easy_onboard 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Onboard(
      primaryColor: const Color(0xff6C63FF),
      onboardPages: onboardPages,
      skipButtonPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const SecondPage()),
        );
      },
      skipText: 'Skip',
      nextText: 'Next',
      lastText: 'Start',
    );
  }
}

List<OnboardModel> onboardPages = [
  OnboardModel(imagePath: 'assets/images/barbecu.png', title: 'Order Your Food', subTitle: 'Now you can order food any time right from your phone.'),
  OnboardModel(imagePath: 'assets/images/hamburger.png', title: 'Cooking Safe Food', subTitle: 'We are maintain safty and We keep clean while making food.'),
  OnboardModel(imagePath: 'assets/images/ice_cream.png', title: 'Quick Delivery', subTitle: 'Orders your favourite meals will be immediately deliver.'),
];