Flame 启动屏

Flame-Splash-Screen

用一个漂亮的启动屏美化您的 Flame 游戏。

该包包含一个 FlameSplashScreen 小部件。

安装

将 flame_splash_screen 添加到您的 pubspec.yaml 文件中作为依赖项（什么？）。

导入小部件

import 'package:flame_splash_screen/flame_splash_screen.dart';

用法

启动屏是一个可以用来显示启动屏的小部件。

简单用法

只有两个必需参数

  • onFinish，这是在启动屏的所有动画结束后执行的回调。
  • theme，可以是 FlameSplashTheme.dark 或 FlameSplashTheme.white。
FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen')
)

添加您自己的内容

您可以传递您自己的徽标（或/和任何其他内容）在 Flame 的徽标之前或之后显示。

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  showBefore: (BuildContext context) {
    return Text("To be shown before flame animation");
  },
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

FlameSplashScreen(
  theme: FlameSplashTheme.dark,
  showAfter: (BuildContext context) {
    return Text("To be shown after flame animation");
  },
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

请记住：您也可以同时指定 showBefore 和 showAfter。

更改主题

默认情况下，启动屏具有深色背景。您可以通过指定 white 主题来更改它。

除了 FlameSplashTheme.dark，您还可以传递 FlameSplashTheme.white 以获得白色背景。

FlameSplashScreen(
  theme: FlameSplashTheme.white,
  onFinish: (BuildContext context) => Navigator.pushNamed(context, '/your-game-initial-screen'),
)

您可以创建一个自定义主题，传递自定义徽标构建器（将 Flame 的徽标更改为另一个）和背景装饰

与控制器一起使用

控制器使 FlameSplashScreen 能够根据动画持续时间和开始时间进行自定义。

有持续时间参数和 autoStart（默认为 true）。

要使用它，请使控制器像小部件状态一样长寿

class SplashScreenGameState extends State<SplashScreenGame> {
  FlameSplashController controller;
  @override
  void initState() {
      super.initState();
      controller = FlameSplashController(
        fadeInDuration: Duration(seconds: 1),
        fadeOutDuration: Duration(milliseconds: 250),
        waitDuration: Duration(seconds: 2),
        autoStart: false
      );
  }
  
  @override
  void dispose() {
    controller.dispose(); // dispose it when necessary
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FlameSplashScreen(
        showBefore: (BuildContext context) {
          return Text("Before the logo");
        },
        showAfter: (BuildContext context) {
          return Text("After the logo");
       },
       theme: FlameSplashTheme.white,
       onFinish: (context) => Navigator.pushNamed(context, '/the-game-initial-screen'),
        controller: controller,
      ),
    );
  }
}

GitHub

https://github.com/flame-engine/flame_splash_screen