Flutter新用户引导插件onboarding

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

onboarding_view 是一个简洁且极简风格的新用户引导插件。它可以帮助开发者轻松创建美观的新用户引导页面。

特性

完成按钮回调：当用户点击完成按钮时触发。
自定义跳过按钮动作：可以自定义跳过按钮的行为。
页滚动动画：可以定义动画持续时间和曲线。

开始使用

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  ...
  onboarding_view: ^0.0.1

然后导入所需的包：

import 'package:onboarding_view/onboarding_view.dart';
import 'package:onboarding_view/onboarding.dart';

使用示例

首先，创建你想要展示的新用户引导页面列表。

final onboardings = [
    Onboarding(
      image: Icon(
        Icons.filter_1,
        size: MediaQuery.sizeOf(context).width * 0.7,
      ),
      title: Text(
        'First',
        style: Theme.of(context).textTheme.displayLarge,
        textAlign: TextAlign.center,
      ),
      description: Text(
        'This is some explanation about the first onboarding.',
        style: Theme.of(context).textTheme.bodyLarge,
        textAlign: TextAlign.center,
      ),
      footer: Text(
        'This is the footer of the first onboarding.',
        style: Theme.of(context).textTheme.labelMedium,
        textAlign: TextAlign.center,
      ),
    ),
    Onboarding(
      image: Icon(
        Icons.filter_2,
        size: MediaQuery.sizeOf(context).width * 0.7,
      ),
      title: Text(
        'Second',
        style: Theme.of(context).textTheme.displayLarge,
        textAlign: TextAlign.center,
      ),
      description: Text(
        'This is some explanation about the second onboarding.',
        style: Theme.of(context).textTheme.bodyLarge,
        textAlign: TextAlign.center,
      ),
      footer: Text(
        'This is the footer of the second onboarding.',
        style: Theme.of(context).textTheme.labelMedium,
        textAlign: TextAlign.center,
      ),
    ),
    Onboarding(
      image: Icon(
        Icons.filter_3,
        size: MediaQuery.sizeOf(context).width * 0.7,
      ),
      title: Text(
        'Third',
        style: Theme.of(context).textTheme.displayLarge,
        textAlign: TextAlign.center,
      ),
      description: Text(
        'This is some explanation about the third onboarding.',
        style: Theme.of(context).textTheme.bodyLarge,
        textAlign: TextAlign.center,
      ),
      footer: Text(
        'This is the footer of the third onboarding.',
        style: Theme.of(context).textTheme.labelMedium,
        textAlign: TextAlign.center,
      ),
    ),
    Onboarding(
      image: Icon(
        Icons.filter_4,
        size: MediaQuery.sizeOf(context).width * 0.7,
      ),
      title: Text(
        'Fourth',
        style: Theme.of(context).textTheme.displayLarge,
        textAlign: TextAlign.center,
      ),
      description: Text(
        'This is some explanation about the fourth onboarding.',
        style: Theme.of(context).textTheme.bodyLarge,
        textAlign: TextAlign.center,
      ),
      footer: Text(
        'This is the footer of the fourth onboarding.',
        style: Theme.of(context).textTheme.labelMedium,
        textAlign: TextAlign.center,
      ),
    ),
];

接下来，将这些新用户引导页面传递给 OnboardingView 组件。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OnboardingView(
      pageAnimationDuration: const Duration(seconds: 1),
      pageAnimation: Curves.fastEaseInToSlowEaseOut,
      padding: const EdgeInsets.all(8),
      onboardings: onboardings,
      skipText: 'Skip',
      nextText: 'Next',
      finishText: 'Finish',
      backText: 'Back',
      onFinish: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (context) => const MyHomeView(),
          ),
        );
      },
      showSkipButton: true,
    );
  }
}

完整的示例代码如下：

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 MaterialApp(
      title: 'Onboarding Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyOnboarding(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OnboardingView(
      pageAnimationDuration: const Duration(seconds: 1),
      pageAnimation: Curves.fastEaseInToSlowEaseOut,
      padding: const EdgeInsets.all(8),
      onboardings: [
        Onboarding(
          image: Icon(
            Icons.filter_1,
            size: MediaQuery.sizeOf(context).width * 0.7,
          ),
          title: Text(
            'First',
            style: Theme.of(context).textTheme.displayLarge,
            textAlign: TextAlign.center,
          ),
          description: Text(
            'This is some explanation about the first onboarding.',
            style: Theme.of(context).textTheme.bodyLarge,
            textAlign: TextAlign.center,
          ),
          footer: Text(
            'This is the footer of the first onboarding.',
            style: Theme.of(context).textTheme.labelMedium,
            textAlign: TextAlign.center,
          ),
        ),
        Onboarding(
          image: Icon(
            Icons.filter_2,
            size: MediaQuery.sizeOf(context).width * 0.7,
          ),
          title: Text(
            'Second',
            style: Theme.of(context).textTheme.displayLarge,
            textAlign: TextAlign.center,
          ),
          description: Text(
            'This is some explanation about the second onboarding.',
            style: Theme.of(context).textTheme.bodyLarge,
            textAlign: TextAlign.center,
          ),
          footer: Text(
            'This is the footer of the second onboarding.',
            style: Theme.of(context).textTheme.labelMedium,
            textAlign: TextAlign.center,
          ),
        ),
        Onboarding(
          image: Icon(
            Icons.filter_3,
            size: MediaQuery.sizeOf(context).width * 0.7,
          ),
          title: Text(
            'Third',
            style: Theme.of(context).textTheme.displayLarge,
            textAlign: TextAlign.center,
          ),
          description: Text(
            'This is some explanation about the third onboarding.',
            style: Theme.of(context).textTheme.bodyLarge,
            textAlign: TextAlign.center,
          ),
          footer: Text(
            'This is the footer of the third onboarding.',
            style: Theme.of(context).textTheme.labelMedium,
            textAlign: TextAlign.center,
          ),
        ),
        Onboarding(
          image: Icon(
            Icons.filter_4,
            size: MediaQuery.sizeOf(context).width * 0.7,
          ),
          title: Text(
            'Fourth',
            style: Theme.of(context).textTheme.displayLarge,
            textAlign: TextAlign.center,
          ),
          description: Text(
            'This is some explanation about the fourth onboarding.',
            style: Theme.of(context).textTheme.bodyLarge,
            textAlign: TextAlign.center,
          ),
          footer: Text(
            'This is the footer of the fourth onboarding.',
            style: Theme.of(context).textTheme.labelMedium,
            textAlign: TextAlign.center,
          ),
        ),
      ],
      skipText: 'Skip',
      nextText: 'Next',
      finishText: 'Finish',
      backText: 'Back',
      onFinish: () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (context) => const MyHomeView(),
          ),
        );
      },
      showSkipButton: true,
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
    );
  }
}

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

nodeper 1楼•2 天前

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

当然，onboarding_view 是一个流行的 Flutter 插件，用于创建新用户引导页面。以下是一个简单的示例，展示如何在 Flutter 应用中使用 onboarding_view 插件来创建新用户引导页面。

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

dependencies:
  flutter:
    sdk: flutter
  onboarding_view: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以创建一个 Flutter 应用，并在其中使用 OnboardingView 小部件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Onboarding Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: OnboardingScreen(),
    );
  }
}

class OnboardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: OnboardingView(
        pages: [
          OnboardingPage(
            title: 'Welcome!',
            description: 'Get started with our app.',
            image: Image.asset('assets/images/onboarding_1.png'),  // 请确保你有这张图片资源
          ),
          OnboardingPage(
            title: 'Feature 1',
            description: 'Discover our amazing features.',
            image: Image.asset('assets/images/onboarding_2.png'),  // 请确保你有这张图片资源
          ),
          OnboardingPage(
            title: 'Feature 2',
            description: 'More features to explore.',
            image: Image.asset('assets/images/onboarding_3.png'),  // 请确保你有这张图片资源
          ),
        ],
        dotsIndicatorColor: Colors.white,
        activeDotColor: Colors.blue,
        onCompleted: () {
          // 当引导完成后的回调
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
        skipButton: TextButton(
          onPressed: () {
            Navigator.pushReplacement(
              context,
              MaterialPageRoute(builder: (context) => HomeScreen()),
            );
          },
          child: Text('Skip'),
        ),
        continueButton: TextButton(
          onPressed: () {
            // 手动触发下一页，通常不需要手动调用，因为 OnboardingView 会自动管理
            // Navigator.of(context).pop(); // 如果需要手动控制，可以取消注释这行代码
          },
          child: Text('Continue'),
        ),
      ),
    );
  }
}

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

class OnboardingPage {
  final String title;
  final String description;
  final Widget image;

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

说明：

依赖管理：确保在 pubspec.yaml 中添加了 onboarding_view 依赖并运行 flutter pub get。
OnboardingScreen：创建了一个 OnboardingScreen 小部件，它使用 OnboardingView 来显示引导页面。
OnboardingPage：定义了一个 OnboardingPage 类来封装每个引导页面的标题、描述和图片。
回调：onCompleted 回调在用户完成所有引导页面后被调用，这里我们将用户导航到 HomeScreen。
跳过按钮：提供了一个跳过按钮，用户点击后可以跳过引导页面并导航到 HomeScreen。

请确保你有相应的图片资源（如 assets/images/onboarding_1.png），或者你可以使用网络图片或其他资源。

这个示例展示了如何使用 onboarding_view 插件来创建一个简单的新用户引导流程。你可以根据需要进一步自定义和扩展。