flutter - 向 Flutter 应用程序添加启动画面

Question

你会如何向 Flutter 应用程序添加启动画面？它应该在任何其他内容之前加载和显示。目前，在 Scaffold(home:X) 小部件加载之前会有短暂的颜色闪烁。

score 364 · Accepted Answer

我想进一步了解在 Flutter 中制作 Splash screen 的实际方式。

我在这里跟踪了一下，发现 Flutter 中的 Splash Screen 看起来并没有那么糟糕。

也许大多数开发者（比如我）都认为 Flutter 中默认没有启动画面，他们需要对此做点什么。有一个闪屏，但它是白色背景的，没有人能理解默认情况下已经有一个适用于 iOS 和 Android 的闪屏。

开发人员唯一需要做的就是将品牌形象放在正确的位置，启动画面就会像这样开始工作。

以下是您可以逐步完成的方法：

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

在 Flutter 项目中找到“android”文件夹。
浏览到 app -> src -> main -> res 文件夹，并将品牌形象的所有变体放在相应的文件夹中。例如：

密度为1的图像需要放在mipmap-mdpi中，
密度为1.5的图片需要放在mipmap-hdpi中，
密度为2的图像需要放在mipmap-xhdpi中，
密度为3的图像需要放在mipmap-xxhdpi中，
密度为4的图像需要放在mipmap-xxxhdpi中，

默认情况下，android 文件夹中没有 drawable-mdpi、drawable-hdpi 等，但我们可以根据需要创建它们。由于这个事实，图像需要放在 mipmap 文件夹中。此外，关于启动画面（在 Android 中）的默认 XML 代码将使用 @mipmap，而不是 @drawable 资源（如果需要，您可以更改它）。

Android 的最后一步是取消对 drawable/launch_background.xml 文件中的一些 XML 代码的注释。浏览到 app -> src -> main -> res-> drawable 并打开 launch_background.xml。在这个文件中，你会看到为什么斜线屏幕背景是白色的。要应用我们在步骤 2 中放置的品牌形象，我们必须取消注释您的 launch_background.xml 文件中的一些 XML 代码。更改后，代码应如下所示：
```
 

 <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 文件中声明它，该文件与图像位于同一目录中。更改后，我的 Contents.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 上运行您的应用程序时，您应该拥有正确的启动画面以及您添加的品牌形象。

谢谢

score 59 · Accepted Answer

在颤振中添加启动画面的最简单方法是这个包： 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 文件。

您也可以在颜色中使用#。color: "#42a5f5" 如果您不想为特定平台创建启动画面，也可以将 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.运行包

添加设置后，运行包

flutter pub run flutter_native_splash:create 当程序包完成运行时，您的启动画面就准备好了。

score 39 · Accepted Answer

Flutter 实际上提供了一种更简单的方法来将 Splash Screen 添加到我们的应用程序中。我们首先需要设计一个基本页面，就像我们设计其他应用程序屏幕一样。您需要将其设为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: Design your own Splash Screen

score 18 · Accepted Answer

目前还没有一个很好的例子，但是您可以使用每个平台的本机工具自己做：

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

安卓：https ://www.bignerdranch.com/blog/splash-screens-the-right-way/

订阅问题 8147以获取有关初始屏幕示例代码的更新。如果启动屏幕和 iOS 上的应用程序之间的黑色闪烁困扰您，请订阅issue 8127以获取更新。

编辑：截至 2017 年 8 月 31 日，新项目模板中现在提供了对启动画面的改进支持。请参阅#11505。

score 16 · Accepted Answer

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

score 13 · Accepted Answer

在应用经过验证的答案后出现错误（如找不到图像）的人，请确保您添加的是@mipmap/ic_launcher而不是@mipmap/ic_launcher.png

score 11 · Accepted Answer

这是在 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(),
      },
    ));

闪屏.DART

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';

主屏幕.DART

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

score 9 · Accepted Answer

@Collin Jackson 和@Sniper 都是对的。您可以按照以下步骤分别在 android 和 iOS 中设置启动图像。然后在您的 MyApp() 中，在您的 initState() 中，您可以使用 Future.delayed 设置计时器或调用任何 api。在从 Future 返回响应之前，将显示您的启动图标，然后随着响应的到来，您可以在启动屏幕之后移动到要转到的屏幕。你可以看到这个链接：Flutter Splash Screen

score 8 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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

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

最后一部分是调整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>

我见过很少有开发人员将启动画面添加为可绘制的，我试过这个，但不知何故，Flutter 1.0.0 和 Dart SDK 2.0+ 中的构建失败了。因此，我更喜欢在位图部分添加启动画面。

iOS 启动画面创建相当简单。

在 iOS 的 Runner 文件夹中，只需使用与 LaunchImage.png @2x、@3x、@4x 同名的自定义启动画面图像更新 LaunchImage.png 文件。

只是一个补充，我觉得在 LaunchImage.imageset 中也有一个 4x 图像很好。只需使用以下几行更新 Content.json 中的代码，低于 3 倍比例以添加 4 倍比例选项：

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

score 5 · Accepted Answer

使您的材料应用程序像这样

=> 添加依赖

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

像这样的最终屏幕输出，您可以根据您的要求更改第二个圆圈将是圆形

score 5 · Accepted Answer

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

IOS平台

提交到 Apple App Store 的所有应用程序都必须使用 Xcode 故事板来提供应用程序的启动屏幕。让我们分 3 步完成：-

第 1 步：从应用程序目录的根目录打开 ios/Runner.xcworkspace。

第 2 步：从 Project Navigator 中选择 Runner/Assets.xcassets 并拖动所有尺寸（2x、3x 等）的启动图像。您还可以从https://appicon.co/#image-sets生成不同大小的图像

第 3 步：您可以看到 LaunchScreen.storyboard 文件正在显示提供的图像，在这里您也可以通过简单地拖动图像来更改图像的位置。更多信息请查看官方文档https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

安卓平台

在 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"

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

score 4 · Accepted Answer

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

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

score 4 · Accepted Answer

如果您想要第二个初始屏幕（在本机屏幕之后），这是一个有效的简单示例：

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

score 4 · Accepted Answer

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

安卓版

打开launch_background.xml，然后您可以放入启动画面图像，或您想要的渐变颜色。这是您的用户在打开您的应用程序时首先看到的内容。

IOS

使用 Xcode 打开您的应用程序，单击 Runner > Assest.xcassets > LaunchImage，您可以在此处添加图像。如果您想编辑启动屏幕图像的位置或外观，您可以在 LaunchScreen.storyboard 上进行编辑。

score 3 · Accepted Answer

Jaldhi Bhatt 的代码对我不起作用。

Flutter 抛出“使用不包含 Navigator 的上下文请求的 Navigator 操作。”

如本文所述，我修复了将 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,
        )
    );
  }
}

score 3 · Accepted Answer

您可以使颤振闪屏的设计与其他屏幕相同。唯一的变化是使用计时器。因此，您可以在特定时间内显示启动画面。

import 'dart:async';
import 'package:flutter/material.dart';
 
class Splash extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SplashState();
  }
 
}
 
class SplashState extends State<Splash>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
 
    );
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTimer();
  }
 
  startTimer() async{
     Timer(Duration(seconds: 3), nextScreen);
  }
 
   void nextScreen(){
 
  }
 
}

import ‘package:flutter/material.dart’;
import ‘package:fluttersplashsample/splash.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
          return MaterialApp(
              home: Splash(),
          );
     }
}

score 2 · Accepted Answer

对于 Android
app -> src -> main -> res ->drawble->launch_background.xml 并像这样取消注释注释块

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

有没有人在像这样编码后遇到任何错误
在android studio中与系统同步或使缓存和重置无效。这解决了我的问题在flutter调试模式下需要一些时间来显示初始屏幕。构建后它会像原生android一样减少

score 1 · Accepted Answer

最简单的方法是使用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*" 已更改，并添加了新的启动画面。

score 1 · Accepted Answer

对于 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 然后.inside Runner 文件夹 Main.Storyboard 文件在那里，在此处输入图像描述

默认情况下，它的颜色是白色，您可以根据需要自定义或更改颜色，更多自定义请查看此 Ios。

score 0 · Accepted Answer

您可以通过两种方式创建它

转到本机包和初始页面。就像在 Native Android 包中创建一个可绘制对象
创建一个飞镖屏幕显示一段时间

我在这里找到了删除白屏和显示闪屏的完整解释

score 0 · Accepted Answer

Flutter.dev 已经给出了最好的答案，这不是错误也不是问题，只是配置。只要花时间阅读，一切都会得到解决。祝大家拥有美好的一天。

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

score 0 · Accepted Answer

您可以使用splashscreen包创建漂亮的启动画面

将依赖项添加到您的pubspec.yaml文件中。
```
dependencies:
  splashscreen: 
```
现在在您的 Dart 代码中，您可以使用：
```
import 'package:splashscreen/splashscreen.dart';
```

像这样创建启动画面

SplashScreen(
  seconds: 14,
  navigateAfterSeconds: new AfterSplash(),
  title: new Text('Welcome In SplashScreen'),
  image: new Image.asset('screenshot.png'),
  backgroundColor: Colors.white,
  styleTextUnderTheLoader: new TextStyle(),
  photoSize: 100.0,
  loaderColor: Colors.red
);

完整示例

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
void main(){
  runApp(new MaterialApp(
    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: 14,
      navigateAfterSeconds: new AfterSplash(),
      title: new Text('Welcome In SplashScreen',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20.0
      ),),
      image: new Image.network('https://i.imgur.com/TyCSG9A.png'),
      backgroundColor: Colors.white,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 100.0,
      onClick: ()=>print("Flutter Egypt"),
      loaderColor: Colors.red
    );
  }
}

class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
      title: new Text("Welcome In SplashScreen Package"),
      automaticallyImplyLeading: false
      ),
      body: new Center(
        child: new Text("Done!",
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 30.0
        ),),

      ),
    );
  }
}

score -1 · Accepted Answer

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

score -2 · Accepted Answer

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

flutter - 向 Flutter 应用程序添加启动画面

25 回答 25

安装指南（由包的作者提供）：

1.设置启动画面

2.运行包

Related

Reference