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


当前回答

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

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

其他回答

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

为安卓

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

为IOS

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

如果你想要一个次要的启动画面(在原生画面之后),这里有一个简单的例子:

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

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

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

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

我想在颤振的实际方式做一个启动屏幕更多的光。

我在这里跟踪了一点,我看到事情看起来不是那么糟糕的启动画面在扑动。

也许大多数开发者(比如我)都认为在Flutter中并没有一个默认的启动画面,他们需要做些什么。有一个启动画面,但它是白色背景的,没有人能理解iOS和Android默认已经有一个启动画面。

开发者需要做的唯一一件事就是将Branding图像放在正确的位置,然后启动画面就会开始工作了。

下面是你如何一步一步做到的方法:

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

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

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

默认情况下,在android文件夹中没有drawable-mdpi, drawable-hdpi等,但如果我们想要,我们可以创建它们。因此,需要将图像放在mipmap文件夹中。此外,关于启动画面的默认XML代码(在Android中)将使用@mipmap,而不是@drawable资源(如果你想改变它)。

The last step on Android is to uncomment some of the XML code in drawable/launch_background.xml file. Browse to app -> src -> main -> res-> drawable and open launch_background.xml. Inside this file, you shall see why the Slash screen background is white. To apply the branding image which we placed in step 2, we have to uncomment some of the XML code in your launch_background.xml file. After the change, the code should look like: <!--<item android:drawable="@android:color/white" />--> <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文件,它是在同一目录下的图像。更改我的内容后。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上运行你的应用时,你应该有正确的启动画面和你添加的品牌形象。

谢谢