在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:创建 当包完成运行时，你的启动画面就准备好了。

杰尔迪·巴特的密码对我没用。

Flutter抛出“请求的导航器操作具有不包括导航器的上下文”。

正如本文中提到的，我修复了将Navigator使用者组件包装在另一个使用路由初始化Navigator上下文的组件中的代码。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}

你有多种方法可以做到这一点，但我使用的最简单的方法是:

对于启动图标，我使用颤振库颤振启动图标

对于自定义启动画面，我创建了不同的屏幕分辨率，然后根据Android的分辨率在mipmap文件夹中添加启动图像。

最后是调整Android中res文件夹中drawable文件夹中的launch_background.xml。

只需更改代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

我所见过的少数开发人员将splash添加为可绘制的，我尝试了这一点，但不知为何在Flutter 1.0.0和Dart SDK 2.0+中构建失败。因此，我更喜欢在位图部分添加飞溅。

iOS的飞溅屏幕制作相对简单。

在iOS的Runner文件夹中，只需将LaunchImage.png文件更新为自定义启动画面图像，名称与LaunchImage.png @2x， @3x， @4x相同。

只是一个补充，我觉得在LaunchImage.imageset中有一个4倍的图像很好。只需在Content中更新代码即可。Json与以下行，以下3x规模添加一个4倍规模的选项:

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

我想在颤振的实际方式做一个启动屏幕更多的光。

我在这里跟踪了一点，我看到事情看起来不是那么糟糕的启动画面在扑动。

也许大多数开发者(比如我)都认为在Flutter中并没有一个默认的启动画面，他们需要做些什么。有一个启动画面，但它是白色背景的，没有人能理解iOS和Android默认已经有一个启动画面。

开发者需要做的唯一一件事就是将Branding图像放在正确的位置，然后启动画面就会开始工作了。

下面是你如何一步一步做到的方法:

首先是Android(因为这是我最喜欢的平台:))

在Flutter项目中找到“android”文件夹。 浏览到app -> src -> main -> res文件夹，并将品牌形象的所有变体放在相应的文件夹中。例如:

密度为1的图像需要放在mimmap -mdpi中， 密度为1.5的图像需要放在mimmap -hdpi中， 密度为2的图像需要放在mimmap -xhdpi中， 密度为3的图像需要放在mimmap -xxhdpi中， 密度为4的图像需要放在mimmap -xxxhdpi中，

默认情况下，在android文件夹中没有drawable-mdpi, drawable-hdpi等，但如果我们想要，我们可以创建它们。因此，需要将图像放在mipmap文件夹中。此外，关于启动画面的默认XML代码(在Android中)将使用@mipmap，而不是@drawable资源(如果你想改变它)。

The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like: <!--<item android:drawable="@android:color/white" />--> <item> <bitmap android:gravity="center" android:src="@mipmap/your_image_name" /> </item>

请注意，我们注释了白色背景的XML代码，并取消了关于mipmap图像的代码注释。如果有人感兴趣，可以在styles.xml文件中使用launch_background.xml文件。

其次是iOS平台:

在Flutter项目中找到“ios”文件夹。 浏览到Runner -> Assets。xcassets -> LaunchImage.imageset。应该有LaunchImage.png, LaunchImage@2x.png等。现在你必须用你的品牌形象变体替换这些形象。例如:

密度为1的图像需要覆盖LaunchImage.png， 密度为2的图像需要覆盖LaunchImage@2x.png， 密度为3的图像需要覆盖LaunchImage@3x.png， 密度为4的图像需要覆盖LaunchImage@4x.png，

如果我没有错，LaunchImage@4x.png默认不存在，但你可以很容易地创建一个。如果LaunchImage@4x.png不存在，你必须在Contents中声明它。Json文件，它是在同一目录下的图像。更改我的内容后。Json文件是这样的:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

这就是你所需要的，下次当你在Android或iOS上运行你的应用时，你应该有正确的启动画面和你添加的品牌形象。

谢谢

dev已经给出了最好的答案，这不是一个bug，也不是一个问题，只是配置。 花点时间阅读，一切都会迎刃而解。祝大家有愉快的一天。

https://flutter.dev/docs/development/ui/advanced/splash-screen

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