Flutter引导页动画插件animated_onboarding_ns的使用

animated_onboarding_ns 是一个用于实现精美引导页动画的 Flutter 插件。它提供了简单且直观的方式来创建引导页，并支持自定义页面内容和样式。

感谢原作者的贡献！
animated_onboarding_ns 在 pub.dev 上

使用示例

以下是一个完整的示例代码，展示如何使用 animated_onboarding_ns 创建一个带有引导页动画的应用。

示例代码

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

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

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

class OnboardingScreen extends StatefulWidget {
  @override
  _OnboardingScreenState createState() => _OnboardingScreenState();
}

class _OnboardingScreenState extends State<OnboardingScreen> {
  // 定义引导页的内容
  final _pages = [
    OnboardingPage(
      child: Text(
        "标题1",
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      color: const Color(0xffff1744), // 页面背景颜色
    ),
    OnboardingPage(
      child: Text(
        "标题2",
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      color: const Color(0xffff9100),
    ),
    OnboardingPage(
      child: Text(
        "标题3",
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      color: const Color(0xff00695c),
    ),
    OnboardingPage(
      child: Text(
        "标题4",
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      color: const Color(0xff5c6bc0),
    ),
    OnboardingPage(
      child: Text(
        "标题5",
        style: TextStyle(
          color: Colors.white,
          fontSize: 22,
          fontWeight: FontWeight.bold,
        ),
      ),
      color: const Color(0xff37474f),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return AnimatedOnboarding(
      pages: _pages, // 设置引导页内容
      pageController: PageController(), // 页面控制器
      onFinishedButtonTap: () {
        print("引导页结束！");
      }, // 引导页结束后的回调
      topLeftChild: Text(
        "应用名称",
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
        ),
      ), // 左上角的标题
      topRightChild: FlatButton(
        child: Text(
          "跳过",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        onPressed: () {},
      ), // 右上角的跳过按钮
    );
  }
}

代码说明

1. 导入包：

   import 'package:animated_onboarding_ns/animated_onboarding_ns.dart';

   导入 animated_onboarding_ns 包。

2. 定义引导页内容：

   final _pages = [
     OnboardingPage(
       child: Text("标题1", ...),
       color: const Color(0xffff1744),
     ),
     ...
   ];

   每个引导页由 OnboardingPage 组成，包含页面内容（如标题）和背景颜色。

3. 构建引导页：

   AnimatedOnboarding(
     pages: _pages,
     pageController: PageController(),
     onFinishedButtonTap: () { ... },
     topLeftChild: Text("应用名称", ...),
     topRightChild: FlatButton(...),
   )