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

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

谢谢

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

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。

让你的材料应用像这样

=>添加依赖

=> import import 'package:splashscreen/splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

最后的屏幕输出像这样，你可以根据你的要求改变秒 圆将是圆的

对于那些像我一样严格按照步骤来做的人来说，它仍然没有发挥作用……

如果你有一个drawable-v21文件夹，请注意，因为你需要将你的代码从drawable文件夹> launch_background.xml code复制到drawable-v21文件夹> launch_background.xml

我的项目不喜欢android:src="@mipmap/launch" />

因此，我有android:src="@drawable/launch" />

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:设计您自己的启动画面