Flutter引导页插件flutter_easy_onboarding的使用

Flutter引导页插件flutter_easy_onboarding的使用

Flutter Onboard Package

特性

轻松自定义自己的样式。

开始使用

在你的 pubspec.yaml 文件中添加该包：

flutter pub add flutter_easy_onboarding

在你的 Dart 文件中导入库：

import 'package:flutter_easy_onboarding/flutter_easy_onboarding';

使用示例

以下是一个完整的示例，展示如何使用 flutter_easy_onboarding 插件创建一个引导页面。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: OnBoarding(
          numberOfPages: 3, // 总页数
          currentPage: 1, // 当前页码
          doneButton: () {
            // 完成按钮回调函数
            print("Done Button Pressed");
          },
          title: "欢迎使用", // 标题
          body: "这是引导页的内容。", // 内容描述
          image: "assets/logo.png", // 图片路径，必须是 .png 文件，并且放在 assets 文件夹中
          indicatorActiveColor: Colors.blue, // 激活状态的指示器颜色
          indicatorDeActiveColor: Colors.grey, // 非激活状态的指示器颜色
        ),
      ),
    );
  }
}

更多关于Flutter引导页插件flutter_easy_onboarding的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter引导页插件flutter_easy_onboarding的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_easy_onboarding 是一个用于在 Flutter 应用中创建引导页的插件。它可以帮助你快速实现一个带有多个页面的引导流程，通常用于首次启动应用时向用户介绍应用的功能或特性。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_easy_onboarding 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_easy_onboarding: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示如何使用 flutter_easy_onboarding 创建一个引导页：

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

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

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

class OnboardingScreen extends StatelessWidget {
  final List<OnboardingModel> onboardingPages = [
    OnboardingModel(
      title: 'Welcome to MyApp',
      description: 'This is the first page of the onboarding.',
      imageUrl: 'https://via.placeholder.com/150',
    ),
    OnboardingModel(
      title: 'Explore Features',
      description: 'Discover all the amazing features of MyApp.',
      imageUrl: 'https://via.placeholder.com/150',
    ),
    OnboardingModel(
      title: 'Get Started',
      description: 'Start using MyApp and enjoy the experience.',
      imageUrl: 'https://via.placeholder.com/150',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: EasyOnboarding(
        pages: onboardingPages,
        onFinish: () {
          // 引导页完成后跳转到主页面
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

参数说明

  • pages: 一个 List<OnboardingModel>，用于定义引导页的每一页内容。每个 OnboardingModel 包含 title、description 和 imageUrl 等属性。
  • onFinish: 当用户完成引导页时触发的回调函数。通常在这里跳转到应用的主页面。

自定义

你可以通过自定义 OnboardingModel 和 EasyOnboarding 的样式来满足你的需求。例如，你可以更改按钮的颜色、文本样式等。

EasyOnboarding(
  pages: onboardingPages,
  onFinish: () {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (context) => HomeScreen()),
    );
  },
  buttonColor: Colors.blue,
  buttonText: 'Get Started',
  buttonTextStyle: TextStyle(color: Colors.white, fontSize: 16),
  pageIndicatorColor: Colors.grey,
  activePageIndicatorColor: Colors.blue,
)
回到顶部