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


当前回答

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

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。

其他回答

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

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

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

IOS平台

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

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

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

第二步:在第4行,您可以选择所需的颜色:-

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

第三步:在第10行,你可以改变图像:-

android:src="@mipmap/launch_image"

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

让你的材料应用像这样

=>添加依赖

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

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

对于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,然后。内部Runner文件夹Main。故事板文件在那里, 在这里输入图像描述

默认情况下,它的颜色是白色,你可以根据自己的要求自定义或改变颜色,更多的自定义检查这个Ios。