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

此插件提供了一组用于创建Flutter应用程序中美丽且响应式的引导页动画屏幕的小部件。它利用强大的lottie库来展示吸引人的动画，并允许你自定义引导体验的各种方面。

特性

• 易于使用：定义标题、副标题和动画路径即可创建引导页面。
• 响应式：无缝适应不同的屏幕尺寸和文本缩放。
• 可定制：更改字体、颜色和动画大小以匹配应用的设计。
• 两种页面样式：选择标准的PageBuilder用于单个动画或UniquePageBuilder用于并排显示两个动画。
• 跨平台支持（iOS/Android）

安装

要使用此插件，请在你的pubspec.yaml文件中添加animated_onboarding_screen作为依赖项。

dependencies:
  flutter:
    sdk: flutter
  animated_onboarding_screen: ^1.0.0

然后运行flutter pub get以安装包。

使用方法

导入包

import 'package:animated_onboarding_screen/animated_onboarding_screen.dart';

创建标准引导页面的PageBuilder

PageBuilder(
  animationPath: 'assets/animations/animation_1.json',
  title: '欢迎来到我们的应用！',
  subtitle: '只需几个简单的步骤开始吧。',
)

创建双动画的UniquePageBuilder

UniquePageBuilder(
  uniqueAnimationPath: 'assets/animations/animation_1.json',
  uniqueAnimationPath2: 'assets/animations/animation_2.json',
  uniqueTitle: '探索不同功能',
  uniqueSubTitle: '发现我们应用的强大之处。',
)

自定义

Text(
  title,
  style: GoogleFonts.montserrat(
    fontSize: 20.0,
    fontWeight: FontWeight.bold,
  ),
),

更改动画大小

通过修改Lottie.asset的高度和宽度属性来改变动画大小。

示例

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('引导页动画演示'),
        ),
        body: OnboardingScreen(),
      ),
    );
  }
}

class OnboardingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        PageBuilder(
          animationPath: 'assets/animations/animation1.json',
          title: '欢迎来到MyApp',
          subtitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ),
        UniquePageBuilder(
          uniqueAnimationPath: 'assets/animations/animation2.json',
          uniqueAnimationPath2: 'assets/animations/animation3.json',
          uniqueTitle: '发现惊人的功能',
          uniqueSubTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        ),
      ],
    );
  }
}

截图

贡献

我们欢迎对这个包的贡献！请随意fork仓库并提交您的pull请求。

致谢

• Lottie动画

关于我

大家好，我是Soumyajit Mukherjee，一名Flutter开发者。