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

iOS: https://docs.nativescript.org/tooling/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

订阅发行8147获取启动画面示例代码的更新。如果在iOS上的启动屏幕和应用程序之间的黑色闪烁困扰你，订阅发行8127更新。

编辑:自2017年8月31日起，对启动画面的改进支持现在可以在新的项目模板中使用。见#11505。

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

我遵循一点跟踪在这里，我看到事情不是看起来那么糟糕的启动屏幕在扑动。

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

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

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

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

1. 找到"android"文件夹中的颤振项目。

2. 浏览应用程序->src→主要→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资源(如果你想改变它)。

3. Android上的最后一步是取消drawable/launch_background.xml文件中的一些XML代码的注释。浏览到app ->src→主要→res→可绘制并打开launch_background.xml。在这个文件中，你会看到为什么斜杠屏幕背景是白色的。为了应用我们在第2步中放置的品牌图像，我们必须取消launch_background.xml文件中的一些XML代码的注释。更改之后，代码应该如下所示:

    <!--<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平台:

1. 找到" iosquot;文件夹中的颤振项目。

2. 浏览到Runner ->资产。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,
)),
),
);
}
}

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

对于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" />

在应用验证的答案后，如果有人得到类似图像的错误，请确保您添加的是@mipmap / ic_launcher而不是@mipmap / ic_launcher.png

添加如下所示的页面和路由可能会有所帮助

import 'dart:async';


import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';


class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}


class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
// TODO: implement initState
super.initState();
Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
}


@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
decoration: BoxDecoration(color: Colors.redAccent),
),
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 2,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(
backgroundColor: Colors.white,
radius: 50.0,
child: Icon(
Icons.shopping_cart,
color: Colors.greenAccent,
size: 50.0,
),
),
Padding(
padding: EdgeInsets.only(top: 10.0),
),
Text(
Flutkart.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 24.0),
)
],
),
),
),
Expanded(
flex: 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Text(
Flutkart.store,
softWrap: true,
textAlign: TextAlign.center,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.white),
)
],
),
)
],
)
],
),
);
}
}

如果你想坚持到底，请参见: https://www.youtube.com/watch?v=FNBuo-7zg2Q < / p >

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

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

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

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

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

最后是调整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"
}

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 ()中，调用一个带有持续时间的计时器()，如你所愿，我将它设置为3秒，一旦完成，将导航器推到应用程序的主屏幕。< / p >

应用程序应该只显示一次启动画面，用户不应该在返回按钮按下时再次返回。为此，我们使用< em > Navigator.pushReplacement () < / em >，它将移动到一个新的屏幕，并从导航历史堆栈中删除前一个屏幕。

为了更好地理解，请访问颤振:设计自己的启动画面

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

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

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

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

编码后是否存在任何错误
在android studio中使用与系统同步或使缓存无效并重置。这解决了我的问题 在flutter调试模式下需要一些时间进行启动画面。构建后，它会像本地android一样减少

安装指南(由软件包作者提供):

1. 设置启动画面

将您的设置添加到项目的pubspec中。Yaml文件或在根项目文件夹中创建一个名为flutter_native_splash的文件。Yaml与您的设置。

flutter_native_splash:
image: assets/images/splash.png
color: "42a5f5"

图像必须为PNG文件。

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中添加动态启动画面的最佳方法。

主要。飞镖

import 'package:flutter/material.dart';
import 'constant.dart';


void main() => runApp(MaterialApp(
title: 'GridView Demo',
home: SplashScreen(),
theme: ThemeData(
primarySwatch: Colors.red,
accentColor: Color(0xFF761322),
),
routes: <String, WidgetBuilder>{
SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
HOME_SCREEN: (BuildContext context) => BasicTable(),
//GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
},
));

SPLASHSCREEN。飞镖

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';




class SplashScreen extends StatefulWidget {
@override
SplashScreenState createState() => new SplashScreenState();
}


class SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
var _visible = true;


AnimationController animationController;
Animation<double> animation;


startTime() async {
var _duration = new Duration(seconds: 3);
return new Timer(_duration, navigationPage);
}


void navigationPage() {
Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
}


@override
dispose() {
animationController.dispose();
super.dispose();
}


@override
void initState() {
super.initState();
animationController = new AnimationController(
vsync: this,
duration: new Duration(seconds: 2),
);
animation =
new CurvedAnimation(parent: animationController, curve: Curves.easeOut);


animation.addListener(() => this.setState(() {}));
animationController.forward();


setState(() {
_visible = !_visible;
});
startTime();
}


@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.only(bottom: 30.0),
child: new Image.asset(
'assets/images/powered_by.png',
height: 25.0,
fit: BoxFit.scaleDown,
),
)
],
),
new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image.asset(
'assets/images/logo.png',
width: animation.value * 250,
height: animation.value * 250,
),
],
),
],
),
);
}
}

常量。飞镖

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

主屏幕。飞镖

import 'package:flutter/material.dart';


class BasicTable extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Table Widget")),
body: Center(child: Text("Table Widget")),
);
}
}

让你的材料应用像这样

=>添加依赖

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

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

IOS平台

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

步骤1:打开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个步骤中设置这个启动屏幕:-

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

步骤2:在第4行你可以选择想要的颜色:-

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

步骤3:在第10行你可以改变图像:-

android:src="@mipmap/launch_image"

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

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

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

SplashScreen(
seconds: 3,
navigateAfterSeconds: new MyApp(),
// title: new Text(
//   'Welcome In SplashScreen',
//   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
// ),
image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
backgroundColor: Colors.white,
styleTextUnderTheLoader: new TextStyle(),
photoSize: 150.0,
loaderColor: Colors.black),
),
);

有两种方法

1. 转到本机包和初始页面。就像在原生Android包中创建一个drawable
2. 创建一个省道屏幕来显示一段时间

我找到了移除白屏幕和显示这里是启动画面的完整解释

对于Android，转到这个路径，

android比;应用程序在src祝辞主要在res祝辞可拉的祝辞launcher_background.xml

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

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

您可以通过添加图标或任何自定义设计来更改它的颜色或修改它。

为Ios

在Xcode中打开Ios项目。

select Runner and then。内部Runner文件夹Main。故事板文件在那里， 在这里输入图像描述

默认情况下，它的颜色是白色，你可以根据自己的要求自定义或改变颜色，更多的自定义检查这个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*"改变了，增加了新的启动画面。

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

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

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

而我的项目并不喜欢android:/比;

因此，我有android:src="@可拉的/launch"/比;