使用自定义颜色和 img 在颤动中添加闪屏,但在应用程序启动时仍显示空白屏幕

时间:2021-03-22 10:38:34

标签: flutter flutter-layout

我正在尝试在 flutter 中添加一个闪屏,而不是在启动时显示的空白白屏...我跟着这个 youtube tutorial video。但不幸的是,这种方法对我不起作用。

我在 android/app/src/main/res/drwable 中添加了颜色和图像位置

<?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="@color/red" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/randa" />
    </item>
</layer-list>

然后我在 android/app/src/main/values/color.xml 中添加了颜色值

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#FF0000</color>
</resources>

这是截图—— launch_background xmlcolor xml

由于我是 Flutter 开发的新手,我对 XML 的了解不多.. 任何帮助将不胜感激

注意 - 我尝试了谷歌的所有答案,但似乎没有任何效果对我有用。 :-(

2 个答案:

答案 0 :(得分:0)

在 Flutter 中显示开始时间的空白屏幕。因为您正在调试模式下运行您的应用程序。尝试制作自定义启动画面。然后通过键入此命令( Flutter run --release )在发布时运行您的应用程序。 自定义启动画面代码 从 main.dart 屏幕调用这个类并为你自己编辑它。

import 'dart:async';
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
@override
_SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {

  @override
  void initState() {
    super.initState();

    Timer(Duration(seconds: 4), () {
      getNextScreen();
    });
  }
  void getNextScreen(){
    Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => HomeScreen()),
   );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Image.asset("your_image.jpeg",fit: BoxFit.cover),
      ),
    );
  }
}

答案 1 :(得分:0)

我也遇到了同样的问题。 正如@Aizaz ahmad 建议您可以使用自定义启动画面,但这是不可取的 用于生产。

有一个叫 flutter_native_splah 的包,安装在 pubspec.yaml 中。

这是你应该做的。

在 pubspec.yaml 中

转到 dev_dependencies 并添加 flutter_native_splash,如下所示:

dev_dependencies:

  flutter_test:

    sdk: flutter

  flutter_native_splash: ^1.1.5+1

flutter_native_splash:

  color: "#90EE90"

  image: assets/splash_image.jpg

PS:确保您已链接资产文件夹。