为Flutter应用添加启动画面

Question

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

Answer 1

我想为Flutter中的Splash屏幕的实际方式带来更多亮点.

我在这里跟踪了一点跟踪,我发现Flutter中的Splash Screen看起来并不那么糟糕.

也许大多数开发人员(像我一样)都认为Flutter默认没有Splash屏幕,他们需要对此做些什么.实际上有Splash画面,但它是白色背景,没有人能理解默认情况下已经有iOS和Android的启动画面.

这实际上很酷,因为开发人员唯一需要做的就是将Branding图像放在正确的位置,启动画面就会像这样开始工作.

现在,这是如何做到这一步,一步一步:

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

1. 在Flutter项目中找到"android"文件夹.

2. 浏览到app - > src - > main - > res文件夹,将品牌图像的所有变体放在相应的文件夹中.例如:

   • 密度为1的图像需要放在mipmap-mdpi中,
   • 密度为1.5的图像需要放在mipmap-hdpi中,
   • 密度为2的图像需要放在mipmap-xdpi中,
   • 密度为3的图像需要放在mipmap-xxdpi中,
   • 密度为4的图像需要放在mipmap-xxxdpi中,

默认情况下,android文件夹没有drawable-mdpi,drawable-hdpi等,但如果他愿意,每个人都可以创建.这就是为什么图像需要放在mipmap文件夹中.此外,关于Splash屏幕(在Android中)的默认XML代码将在@mipmap中查看,而不是在@drawable中(如果需要,可以更改它).

3. Android的最后一步是取消注释drawable/launch_background.xml中的一些代码.浏览到app - > src - > main - > res-> drawable并打开launch_background.xml.在此文件中,您将看到为什么Slash屏幕背景为白色.要应用我们在步骤2中放置的品牌形象,我们必须取消注释launch_background.xml文件中的一些XML代码,因此在更改后代码应如下所示:

   <!--<item android:drawable="@android:color/white" />-->
   
   <item>
   
       <bitmap
           android:gravity="center"
           android:src="@mipmap/your_image_name" />
   
   </item>
   

请注意我们评论白色背景代码并取消注释有关mipmap图像的代码.如果有人感兴趣,则在styles.xml文件中使用此launch_background.xml.

现在适用于iOS:

1. 在Flutter项目中找到"ios"文件夹.

2. 浏览到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 2

在 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 文件。

您也可以在颜色中使用 #。color: "#42a5f5" 如果您不想为特定平台创建启动画面，您还可以将 android 或 ios 设置为 false。

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

如果您的图像应该使用所有可用的屏幕（宽度和高度），您可以使用 fill 属性。

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

注意：iOS 启动画面尚未实现 fill 属性。

如果您想在 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 当包完成运行时，您的启动画面就准备好了。

Answer 3

如果你是flutter create你的项目,你可以按照https://flutter.io/assets-and-images/#updating-the-launch-screen上的步骤操作.

Answer 4

目前还没有一个很好的例子,但您可以使用每个平台的本机工具自己完成:

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

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

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

编辑:截至2017年8月31日,新项目模板中现在提供了对闪屏的改进支持.见#11505.

Answer 5

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

Answer 6

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

常数.DART

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

Answer 7

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

Answer 8

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

Answer 9

对于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 10

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

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 11

您可以通过多种方式执行此操作，但我使用的最简单的方法是：

对于启动图标，我使用颤振库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 中的代码，在 3x 比例以下添加 4x 比例选项：

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

Answer 12

让你的材料应用程序像这样

=> 添加依赖

=> 导入导入 '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 13

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

IOS平台

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

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

第 2 步：从项目导航器中选择 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"

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