Flutter引导页插件onboard_ease的使用

OnboardEase 是一个简化 Flutter 应用程序引导页创建的插件。通过此插件，您可以轻松自定义引导页面并为用户提供无缝的介绍体验。

特性

• 高度可定制的引导页面。
• 内置页面指示器。
• 简单直观的 API。

视觉样本

环境

sdk: ">=3.2.3 <4.0.0"
flutter: ">=1.17.0"

安装

要安装 onboard_ease，将其添加到您的 pubspec.yaml 文件中：

dependencies:
  onboard_ease: ^0.0.1

然后运行以下命令以获取包：

flutter pub get

使用

首先，在您的 Dart 文件中导入包：

import 'package:onboard_ease/onboard_ease.dart';

接下来，创建一个 CustomOnboardingScreen 的实例：

OnboardEase(
  pages: <Widget>[
    PageOne(),
    PageTwo(),
    PageThree(),
  ],
  indicatorDecoration: BoxDecoration(color: Colors.blue),
  context: context,
)

在此示例中，PageOne()、PageTwo() 和 PageThree() 是代表单独引导页面的小部件。请根据需要替换为您自己的小部件。

示例

以下是一个使用 OnboardEase 的基本示例：

main.dart

import 'package:custom_onboarding/onboard_ease.dart';
import 'package:custom_onboarding/onboardingPages.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      body: OnboardEase(
        context: context,
        pages: [
          OnboardingPage(
            title: '第一页',
            description: "这是我们的引导屏的第一页。",
            imageUrl: "https://wallpapercave.com/wp/wp9188629.jpg",
          ),
          OnboardingPage(
            title: '第二页',
            description: "这是我们的引导屏的第二页。",
            imageUrl:
                "https://e1.pxfuel.com/desktop-wallpaper/854/898/desktop-wallpaper-neutral-minimalist-aesthetic-minimalistic-summer.jpg",
          ),
          OnboardingPage(
            title: '第三页',
            description: "这是我们的引导屏的第三页。",
            imageUrl:
                "https://i.pinimg.com/736x/89/2d/de/892dde1fc41eba573a249f9355878d77.jpg",
          ),
          OnboardingPage(
            title: '最后一页',
            description: "这是我们的引导屏的最后一页。",
            imageUrl:
                "https://i.pinimg.com/564x/13/4d/5a/134d5a7c1b950b7fa5523006ccfabd5a.jpg",
          ),
        ],
      ),
    );
  }
}

onBoardingPages.dart（非必要文件）

import 'package:flutter/material.dart';

class OnboardingPage extends StatelessWidget {
  final String title;
  final String description;
  final String imageUrl;

  OnboardingPage({
    required this.title,
    required this.description,
    required this.imageUrl,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;
    double screenWidth = MediaQuery.of(context).size.width;
    return Expanded(
      child: Stack(
        // mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.network(
            imageUrl,
            width: screenWidth,
            height: screenHeight,
            fit: BoxFit.cover,
          ),
          Center(
            child: Column(
              children: [
                SizedBox(height: screenHeight / 1.5),
                Text(
                  title,
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 28.0,
                      fontWeight: FontWeight.bold),
                ),
                Padding(
                  padding: const EdgeInsets.fromLTRB(12, 8, 12, 0),
                  child: Text(
                    description,
                    textAlign: TextAlign.center,
                    style: const TextStyle(color: Colors.white, fontSize: 20.0),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}