你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。


当前回答

有两种方法

转到本机包和初始页面。就像在原生Android包中创建一个drawable 创建一个省道屏幕来显示一段时间

我在这里找到了关于移除白屏和显示启动画面的完整解释

其他回答

如果你想要一个次要的启动画面(在原生画面之后),这里有一个简单的例子:

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}

在flutter中添加启动画面的最简单的方法是imho这个包: https://pub.dev/packages/flutter_native_splash

安装指南(由软件包作者提供):

1. 设置启动画面

将您的设置添加到项目的pubspec中。Yaml文件或在根项目文件夹中创建一个名为flutter_native_splash的文件。Yaml与您的设置。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

图像必须为PNG文件。

你也可以在颜色中使用#。颜色:“# 42 a5f5” 如果你不想为特定平台创建启动画面,你也可以将android或ios设置为false。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

如果你的图像应该使用所有可用的屏幕(宽度和高度),你可以使用填充属性。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

注意:填充属性还没有在iOS启动画面中实现。

如果你想在Android上禁用全屏闪屏,你可以使用android_disable_fullscreen属性。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. 运行包

添加设置后,运行with的包

Flutter pub运行flutter_native_splash:创建 当包完成运行时,你的启动画面就准备好了。

如果有人在应用验证答案后发现图像不存在,请确保您添加的是@mipmap/ic_launcher而不是@mipmap/ic_launcher .png

目前还没有一个很好的例子,但你可以自己使用每个平台的本地工具:

iOS: https://docs.nativescript.org/tooling/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

订阅issue 8147以获得启动画面示例代码的更新。如果iOS上的启动画面和应用程序之间的黑色闪烁让你感到困扰,请订阅第8127期更新。

编辑:自2017年8月31日起,对启动画面的改进支持现在可以在新的项目模板中使用。看到# 11505。

Flutter实际上为我们的应用程序添加启动画面提供了一种更简单的方法。 我们首先需要像设计其他应用程序屏幕一样设计一个基本页面。您需要将其设置为StatefulWidget,因为它的状态将在几秒钟内发生变化。

import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

逻辑 在initState()中,调用一个Timer(),如你所愿,我设置为3秒,完成后将导航器推到应用程序的主屏幕。

注意:应用程序应该只显示一次启动画面,用户不应该在返回按钮按下时再次返回。为此,我们使用Navigator.pushReplacement(),它将移动到一个新屏幕,并从导航历史堆栈中删除前一个屏幕。

要更好地了解,请访问Flutter:设计您自己的启动画面