Flutter为您提供了默认的启动画面的能力，但有很多插件可以做这项工作。如果你不想使用插件来完成任务，你担心添加一个新的插件可能会影响你的应用程序大小。然后你可以这样做。

为安卓

打开launch_background.xml，然后你可以放入启动画面图像，或者你想要的渐变颜色。这是用户打开应用程序时看到的第一件事。

为IOS

用Xcode打开你的应用，点击Runner > asset。xcassets > LaunchImage，你可以在这里添加图像。如果你想编辑启动屏幕图像的位置，你可以在LaunchScreen.storyboard上编辑。

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

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中并没有一个默认的启动画面，他们需要做些什么。有一个启动画面，但它是白色背景的，没有人能理解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上运行你的应用时，你应该有正确的启动画面和你添加的品牌形象。

谢谢

最简单的方法是使用flutter_native_splash包

首先，把它添加到你的开发依赖项中:

dev_dependencies:
  flutter_native_splash: ^1.3.1 # make sure to us the latest version

现在，你可以配置你的启动画面你喜欢:

     flutter_native_splash:

      android: true # show for android, you may set it to false
      ios: true # show for IOS, you may set it to false

      image: assets\logo.png # the default image for light and dark themes. Until now, images should be png images
      image_dark: aassets\logo_dark.png # It will override the 'image' in the dark mode

      color: "#ffffff" # the default color for light and dark themes
      color_dark: "#0a0a0a" # will override the 'color' in the dark mode

      android_gravity: fill # make the image fill the screen for android
      ios_content_mode: scaleAspectFill # make the image fill the screen for android

这样做之后，运行:

flutter clean && flutter pub get && flutter pub run flutter_native_splash:create

你会注意到的。“\android\app\src\main\res*”已经改变，并添加了新的启动画面。

你应该试试下面的代码，为我工作

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

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

@override
void initState() {
  // TODO: implement 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 Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

@Collin Jackson和@Sniper都是对的。你可以按照以下步骤分别在android和iOS上设置启动映像。然后在你的MyApp()中，在你的initState()中，你可以使用Future.delayed来设置定时器或调用任何api。在Future返回响应之前，你的启动图标将会显示，然后随着响应的到来，你可以在启动画面后移动到你想要去的屏幕。您可以看到此链接:颤振启动画面