Flutter引导页插件onboarding_intro_screen的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter引导页插件 onboarding_intro_screen 的使用

onboarding_intro_screen 是一个用于创建引导页和介绍页的Flutter插件。它可以帮助开发者快速实现应用程序的引导页面,提升用户体验。

安装

pubspec.yaml 文件中添加依赖:

dependencies:
  onboarding_intro_screen: ^0.0.5

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

特性

  • 简单易用的API。
  • 支持自定义背景颜色、指示器颜色等。
  • 提供上一页/下一页按钮和跳过按钮。

示例动画:

Onboarding Screen Example

使用方法

基本用法

下面是一个完整的示例代码,展示了如何在你的应用中集成 onboarding_intro_screen 插件:

import 'package:flutter/material.dart';
import 'package:onboarding_intro_screen/onboarding_screen.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return OnBoardingScreen(
      onSkip: () {
        debugPrint("On Skip Called....");
      },
      showPrevNextButton: true,
      showIndicator: true,
      backgroundColor: Colors.white,
      activeDotColor: Colors.blue,
      deactiveDotColor: Colors.grey,
      iconColor: Colors.black,
      leftIcon: Icons.arrow_circle_left_rounded,
      rightIcon: Icons.arrow_circle_right_rounded,
      iconSize: 30,
      pages: [
        OnBoardingModel(
          image: Image.asset("assets/images/img1.png"),
          title: "Business Chat",
          body:
              "First impressions are everything in business, even in chat service. It’s important to show professionalism and courtesy from the start",
        ),
        OnBoardingModel(
          image: Image.asset("assets/images/img3.png"),
          title: "Coffee With Friends",
          body:
              "When your morning starts with a cup of coffee and you are used to survive the day with the same, then all your Instagram stories and snapchat streaks would stay filled up with coffee pictures",
        ),
        OnBoardingModel(
          image: Image.asset("assets/images/img6.png"),
          title: "Mobile Application",
          body:
              "Mobile content marketing has also been found to enhance quick online actions and make follow-ups easier.",
        ),
        OnBoardingModel(
          image: Image.asset("assets/images/img4.png"),
          title: "Content Team",
          body: "No two content marketing teams look the same.",
        ),
      ],
    );
  }
}

参数说明

  • onSkip: 跳过按钮点击时的回调函数。
  • showPrevNextButton: 是否显示上下页按钮。
  • showIndicator: 是否显示指示器。
  • backgroundColor: 背景颜色。
  • activeDotColor: 当前页面指示器的颜色。
  • deactiveDotColor: 非当前页面指示器的颜色。
  • iconColor: 按钮图标的颜色。
  • leftIcon: 左侧按钮图标。
  • rightIcon: 右侧按钮图标。
  • iconSize: 图标大小。
  • pages: 页面列表,每个页面由 OnBoardingModel 对象表示。

示例页面模型

OnBoardingModel(
  image: Image.asset("assets/images/img1.png"),
  title: "Business Chat",
  body:
      "First impressions are everything in business, even in chat service. It’s important to show professionalism and courtesy from the start",
),

确保在项目中准备好相应的图片资源,并将其放置在 assets/images/ 目录下,同时在 pubspec.yaml 文件中声明这些资源:

flutter:
  assets:
    - assets/images/img1.png
    - assets/images/img3.png
    - assets/images/img6.png
    - assets/images/img4.png

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

1 回复

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


当然,下面是一个关于如何使用 onboarding_intro_screen 插件来创建 Flutter 引导页的示例代码。onboarding_intro_screen 是一个流行的 Flutter 插件,用于创建应用引导页(也称为欢迎页或介绍页)。

首先,确保你已经在 pubspec.yaml 文件中添加了 onboarding_intro_screen 依赖:

dependencies:
  flutter:
    sdk: flutter
  onboarding_intro_screen: ^^最新版本号(请检查pub.dev获取最新版本)

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

接下来,是一个完整的 Flutter 应用示例,展示了如何使用 onboarding_intro_screen 插件:

import 'package:flutter/material.dart';
import 'package:onboarding_intro_screen/onboarding_intro_screen.dart';
import 'package:onboarding_intro_screen/onboarding_style.dart';

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

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

class IntroScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: OnboardingScreen(
        // List of pages (slides) to show
        pages: [
          OnboardingPage(
            title: "Welcome!",
            description: "This is the first slide of the onboarding process.",
            image: Image.asset('assets/images/slide1.png'), // Use your own image asset
          ),
          OnboardingPage(
            title: "Features",
            description: "Discover our amazing features!",
            image: Image.asset('assets/images/slide2.png'), // Use your own image asset
          ),
          OnboardingPage(
            title: "Get Started",
            description: "Let's get started with your new app!",
            image: Image.asset('assets/images/slide3.png'), // Use your own image asset
            // Add a button to navigate to the main screen
            actions: [
              OnboardingActionButton(
                label: "Get Started",
                onPressed: () {
                  // Navigate to the main screen
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (context) => MainScreen()),
                  );
                },
              ),
            ],
          ),
        ],
        // Customize the dots
        dotDecorator: DotDecorator(
          activeColor: Colors.blue,
          size: 10.0,
          activeSize: 12.0,
          spacing: 5.0,
        ),
        // Customize the skip button
        skipDecorator: SkipDecorator(
          skipText: "Skip",
          onPressed: () {
            // Navigate to the main screen when skip button is pressed
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => MainScreen()),
            );
          },
        ),
        // Customize the background color
        backgroundColor: Colors.white,
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Main Screen"),
      ),
      body: Center(
        child: Text("Welcome to the main screen!"),
      ),
    );
  }
}

解释

  1. 依赖添加:在 pubspec.yaml 中添加 onboarding_intro_screen 依赖。
  2. 主应用MyApp 是主应用类,它设置了 IntroScreen 作为首页。
  3. 引导页IntroScreen 是包含引导页的类。它使用 OnboardingScreen 小部件来显示引导页。
  4. 页面列表pages 属性包含了一个 OnboardingPage 对象的列表,每个对象代表一个引导页。
  5. 自定义按钮和点:通过 actions 属性可以添加自定义按钮,通过 dotDecoratorskipDecorator 可以自定义点和跳过按钮的样式。
  6. 主屏幕MainScreen 是引导页完成后显示的屏幕。

注意事项

  • 请确保你的项目中有一个 assets/images/ 文件夹,并且包含了 slide1.png, slide2.png, slide3.png 这些图片,或者替换为你自己的图片。
  • 在实际项目中,你可能需要更多的自定义和样式调整,可以参考 onboarding_intro_screen 的官方文档进行更多配置。

这个示例展示了如何使用 onboarding_intro_screen 插件来创建一个基本的引导页流程。希望对你有帮助!

回到顶部