当我们必须在应用程序启动之前获得用户位置或其他数据时，我们可以在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
    ),
  );
}
}

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

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

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

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。

以下是在IOS和Android平台上为Flutter应用程序配置启动画面的步骤。

IOS平台

所有提交到苹果应用商店的应用程序都必须使用Xcode故事板来提供应用程序的启动屏幕。让我们分三步来做:-

第一步:打开ios/Runner。Xcworkspace从应用程序目录的根目录。

步骤2:选择Runner/Assets。从Project Navigator中拖动所有大小的启动图像(2x, 3x等)。您还可以从https://appicon.co/#image-sets生成不同大小的图像

步骤3:你可以看到启动屏幕。故事板文件显示了所提供的图像，在这里您还可以通过简单地拖动图像来更改图像的位置。有关更多信息，请参阅官方文档https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Android平台

在Android中，当你的Android应用程序初始化时，会显示一个启动屏幕。让我们在3个步骤中设置这个启动屏幕:-

第一步:打开android/app/src/main/res/drawable/launch_background.xml文件。

第二步:在第4行，您可以选择所需的颜色:-

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

第三步:在第10行，你可以改变图像:-

android:src="@mipmap/launch_image"

就这样，你完成了!快乐编码:)

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

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

也许大多数开发者(比如我)都认为在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上运行你的应用时，你应该有正确的启动画面和你添加的品牌形象。

谢谢

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

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