Flutter动画启动屏插件animated_wb_splash_screen的使用

Flutter动画启动屏插件animated_wb_splash_screen的使用

Animated WB Splash Screen 插件让你可以在你的 Flutter 应用中添加一个动画启动屏。

特性

AnimatedWBSplashScreen 小部件被设计为任何 Flutter 应用的入口点（启动屏），替换默认的打开方法。通过使用 appName 和 nextPage 属性，你可以提供应用的名称和下一个要显示的页面。

该插件会自动处理动画。

animated_wb_splash_screen

开始使用

1. 在 pubspec.yaml 中添加最新版本的包（并运行 dart pub get）：

dependencies:
  animated_wb_splash_screen: ^1.0.0

2. 导入包并在你的 Flutter 应用中使用它：

import 'package:animated_wb_splash_screen/animated_wb_splash_screen.dart';

使用示例

有多个属性可以修改：

  • appName (你的应用名称)
  • nextPage (下一个要显示的页面)

完整参数示例：

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return const AnimatedWBSplashScreen(
      appName: "ULFHRAFN",
      nextPage: NextPage(),
    );
  }
}

这里是如何使用它的样子：

下一步目标

我们正在努力改进包括以下内容：

  • ❌ 可自定义的应用名称样式。
  • ❌ 可自定义的启动屏颜色。

问题与反馈

请在 这里 提交问题以发送反馈或报告错误。谢谢！


更多关于Flutter动画启动屏插件animated_wb_splash_screen的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画启动屏插件animated_wb_splash_screen的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


animated_splash_screen 是一个用于在 Flutter 应用中实现启动屏动画的插件。它可以让你在应用启动时展示一个自定义的动画过渡效果，提升用户体验。以下是如何使用 animated_splash_splash_screen 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  animated_splash_screen: ^1.3.0  # 请检查最新版本

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

2. 基本用法

在 main.dart 文件中，你可以使用 AnimatedSplashScreen 组件来设置启动屏。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'package:page_transition/page_transition.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Splash Screen Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatedSplashScreen(
        duration: 3000,  // 动画持续时间
        splash: 'assets/splash.png',  // 启动屏图片
        nextScreen: HomeScreen(),  // 动画结束后跳转的页面
        splashTransition: SplashTransition.fadeTransition,  // 动画类型
        pageTransitionType: PageTransitionType.fade,  // 页面切换动画类型
        backgroundColor: Colors.white,  // 背景颜色
      ),
    );
  }
}

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