qs_onboarding_package 是一个用于 Flutter 应用的新用户引导插件，它可以帮助开发者快速实现应用的新手引导功能。通过这个插件，你可以在应用启动时展示一系列引导页，帮助用户快速了解应用的主要功能和操作。

安装

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

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

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

使用步骤

1. 导入包

   在你的 Dart 文件中导入 qs_onboarding_package：

   import 'package:qs_onboarding_package/qs_onboarding_package.dart';
   

2. 创建引导页内容

   你可以使用 OnboardingPage 类来创建引导页内容。每个引导页可以包含一个图片、一个标题、一个描述和一个按钮。

   final List<OnboardingPage> onboardingPages = [
     OnboardingPage(
       image: 'assets/images/onboarding1.png',
       title: 'Welcome to My App',
       description: 'This is a simple onboarding screen for your app.',
       buttonText: 'Next',
     ),
     OnboardingPage(
       image: 'assets/images/onboarding2.png',
       title: 'Explore Features',
       description: 'Discover all the amazing features of the app.',
       buttonText: 'Next',
     ),
     OnboardingPage(
       image: 'assets/images/onboarding3.png',
       title: 'Get Started',
       description: 'Start using the app and enjoy the experience.',
       buttonText: 'Get Started',
     ),
   ];
   

3. 在应用中使用引导页

   你可以在应用的 main.dart 文件中使用 OnboardingScreen 来展示引导页。通常，你可以在用户首次启动应用时展示这些引导页。

   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     
     // 例如，检查用户是否已经看过引导页
     bool hasSeenOnboarding = await checkIfUserHasSeenOnboarding();
   
     runApp(MyApp(hasSeenOnboarding: hasSeenOnboarding));
   }
   
   class MyApp extends StatelessWidget {
     final bool hasSeenOnboarding;
   
     const MyApp({Key? key, required this.hasSeenOnboarding}) : super(key: key);
   
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: hasSeenOnboarding ? HomeScreen() : OnboardingScreen(
           pages: onboardingPages,
           onDone: () {
             // 用户完成引导页后的操作，例如导航到主页面
             Navigator.of(context).pushReplacement(
               MaterialPageRoute(builder: (context) => HomeScreen()),
             );
           },
         ),
       );
     }
   }
   

4. 自定义引导页

   你可以根据需要自定义引导页的样式、动画等。qs_onboarding_package 提供了一些可配置的选项，例如：

   • backgroundColor: 引导页的背景颜色。
   • textColor: 引导页的文字颜色。
   • buttonColor: 引导页按钮的颜色。
   • buttonTextColor: 引导页按钮文字的颜色。
   • skipButtonText: 跳过按钮的文本。
   • skipButtonTextStyle: 跳过按钮的文本样式。

   例如：

   OnboardingScreen(
     pages: onboardingPages,
     onDone: () {
       Navigator.of(context).pushReplacement(
         MaterialPageRoute(builder: (context) => HomeScreen()),
       );
     },
     backgroundColor: Colors.white,
     textColor: Colors.black,
     buttonColor: Colors.blue,
     buttonTextColor: Colors.white,
     skipButtonText: 'Skip',
     skipButtonTextStyle: TextStyle(color: Colors.grey),
   );
   

示例代码

以下是一个完整的示例代码：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  bool hasSeenOnboarding = await checkIfUserHasSeenOnboarding();

  runApp(MyApp(hasSeenOnboarding: hasSeenOnboarding));
}

Future<bool> checkIfUserHasSeenOnboarding() async {
  // 在这里检查用户是否已经看过引导页
  return false; // 假设用户没有看过
}

class MyApp extends StatelessWidget {
  final bool hasSeenOnboarding;

  const MyApp({Key? key, required this.hasSeenOnboarding}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: hasSeenOnboarding ? HomeScreen() : OnboardingScreen(
        pages: onboardingPages,
        onDone: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
      ),
    );
  }
}

final List<OnboardingPage> onboardingPages = [
  OnboardingPage(
    image: 'assets/images/onboarding1.png',
    title: 'Welcome to My App',
    description: 'This is a simple onboarding screen for your app.',
    buttonText: 'Next',
  ),
  OnboardingPage(
    image: 'assets/images/onboarding2.png',
    title: 'Explore Features',
    description: 'Discover all the amazing features of the app.',
    buttonText: 'Next',
  ),
  OnboardingPage(
    image: 'assets/images/onboarding3.png',
    title: 'Get Started',
    description: 'Start using the app and enjoy the experience.',
    buttonText: 'Get Started',
  ),
];

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