为 Flutter 应用程序添加启动画面

Question

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

Answer 1

目前还没有很好的例子，但您可以使用每个平台的本地工具自己完成：

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

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

订阅 issue 8147 for updates on example code for splash screens. If the black flicker between the splash screen and the app on iOS bothers you, subscribe to issue 8127 获取更新。

编辑：自 2017 年 8 月 31 日起，新项目模板中现在提供了对闪屏的改进支持。见 #11505.

Answer 2

我想进一步说明在 Flutter 中制作启动画面的实际方法。

我稍微跟踪了一下 here，我发现 Flutter 中的启动画面看起来并没有那么糟糕。

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

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

以下是逐步完成的方法：

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

在您的 Flutter 项目中找到“android”文件夹。
浏览到应用程序 -> 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 文件夹中。此外，有关初始屏幕的默认 XML 代码（在 Android 中）将使用 @mipmap，而不是 @drawable 资源（如果需要，您可以更改它）。

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

 <item>

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

 </item>
```

请注意，我们注释了XML白底代码，取消了mipmap图片的注释。如果有人感兴趣，文件 launch_background.xml 用于 styles.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 上，您应该拥有带有您添加的品牌图像的正确启动画面.

谢谢

Answer 3

你应该试试下面的代码，对我有用

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

Answer 9

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

对于启动图标，我使用 flutter 库 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 中也有 4 倍图像很好。只需使用以下行更新 Content.json 中的代码，在 3 倍比例以下添加 4 倍比例选项：

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

Answer 10

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: Design your own Splash Screen

Answer 11

如果您想要辅助启动画面（在本机启动画面之后），这里有一个简单的示例：

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

Answer 12

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

对于Android

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

对于IOS

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

上进行编辑

Answer 13

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

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

有没有人在像这样编码后遇到任何错误
在 android studio 中使用与系统同步或使缓存无效，reset.This 解决了我的问题在 flutter 调试模式下需要一些时间来获取启动画面。构建后它将像原生一样减少 android

Answer 14

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

您也可以在颜色中使用#。颜色：“#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 当程序包完成运行ning 时，您的初始屏幕已准备就绪。

Answer 15

这是在 Flutter 中添加动态启动画面的无错误且最佳的方法。

MAIN.DART

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

CONSTANTS.DART

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

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

Answer 16

像这样制作您的 material 应用程序

=> 添加依赖项

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

最后的画面输出是这样的你可以根据自己的需要改秒圆圈将是圆形

Answer 17

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

IOS 平台

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

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

第 2 步：Select 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 中，当您的 Android 应用初始化时会显示启动屏幕。让我们分 3 步设置此启动屏幕：-

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

步骤 2：在第 4 行，您可以 select 所需的颜色：-

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

步骤 3：在第 10 行，您可以更改图像：-

android:src="@mipmap/launch_image"

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

Answer 18

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

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

Answer 19

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

Answer 20

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

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

我找到了 remove white screen and display splash screen here

的完整解释

Answer 21

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

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

Answer 22

为了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 项目。

select Runner 和 then.inside Runner 文件夹 Main.Storyboard 文件在那里，在此处输入图片描述

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

Answer 23

您可以使用 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
        ),),

      ),
    );
  }
}

Answer 24

最简单的方法是使用 flutter_native_splash package

首先，将其添加到您的开发依赖项中：

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*”已更改并添加了新的启动画面。

Answer 25

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

为 Flutter 应用程序添加启动画面

Adding a splash screen to Flutter apps

splash-screen

dart

flutter

flutter-widget

安装指南（包作者）：

1。设置启动画面

2。运行包裹

为 Flutter 应用程序添加启动画面

Adding a splash screen to Flutter apps

splash-screen

dart

flutter

flutter-widget

安装指南（包作者）：

1。设置启动画面

2。 运行 包裹

2。运行包裹