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


当前回答

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

其他回答

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

为安卓

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

为IOS

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

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

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中使用自定义启动画面,这将使您的应用程序用户友好

代码如下:示例:-

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


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

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

如果你有一个drawable-v21文件夹,请注意,因为你需要将你的代码从drawable文件夹> launch_background.xml code复制到drawable-v21文件夹> launch_background.xml

我的项目不喜欢android:src="@mipmap/launch" />

因此,我有android:src="@drawable/launch" />