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

对于Android，转到这个路径，

Android > app > SRC > main > res > drawable > launcher_background.xml

默认代码为白色背景屏幕。 像这样,

<!-- You can insert your own image assets here -->
 <item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/launch_image" />
</item> 

您可以通过添加图标或任何自定义设计来更改它的颜色或修改它。更多的定制细节签出这为android。

为Ios

在Xcode中打开Ios项目。

选择Runner，然后。内部Runner文件夹Main。故事板文件在那里， 在这里输入图像描述

默认情况下，它的颜色是白色，你可以根据自己的要求自定义或改变颜色，更多的自定义检查这个Ios。

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

为安卓

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

为IOS

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

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

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,
      )),
    ),
  );
}
}

当我们必须在应用程序启动之前获得用户位置或其他数据时，我们可以在flutter中使用自定义启动画面，这将使您的应用程序用户友好

代码如下:示例:-

import 'package:flutter/material.dart';
import 'package:bmi/HomePage.dart';
import 'dart:async';

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

 class MyApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
    return SplashScreen();
 }
}

class SplashScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State<SplashScreen>{
  @override
  void initState() {
    super.initState();
    when we have to get data we can show splash 
    Like this:- 
    FutureMethodForData.then((value) {
       Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );

    });
    Or we can show splash for fix duration like this:-
    Future.delayed(
      Duration(
        seconds: 4
      ),
      (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );
      }
  );
}
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.red,
      body: // add image text or whatever you want as splash
    ),
  );
}
}

对于Android，进入Android > app > src > main > res > drawable > launcher_background.xml

现在取消注释，用你的图像位置替换@mipmap/launch_image。

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

你可以在这里改变屏幕的颜色

<item android:drawable="@android:color/white" />