如何在 Flutter 中为闪屏创建渐变色背景？

Posted 2023-02-23

【中文标题】如何在 Flutter 中为闪屏创建渐变色背景？

【英文标题】：How to create a gradient color background for splash screen in Flutter?

【发布时间】：2020-04-30 00:19:57

【问题描述】：

我正在为我的 Flutter 应用程序制作初始屏幕，在可绘制文件夹中，我必须创建一个名为 colors.xml 的文件，以便更改我的初始屏幕的背景颜色。我发现很难使它成为渐变色。我的目的是使用两种不同的颜色创建从左上角开始到右下角结束的渐变背景颜色。有没有人有如何在 Flutter 中做到这一点的例子？谢谢！ 附： android和ios的流程有区别​​吗？

【问题讨论】：

欢迎来到 Stack Overflow。您应该发布您到目前为止使用的代码。

【参考方案1】：

我发现使用 flutter_native_splash 更加简单直接。这是a link 创建一个的步骤。首先将所需的渐变设计为图像，而不是添加颜色，而是在 pubspec.yaml 文件中添加 background_image。

类似：

    flutter_native_splash: 
         image: ""
         background_image: "assets/my_splash_background.png"

【参考方案2】：

1 在\android\app\src\main\res\drawable\launch_background.xml

改变这个：

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

到：

<item android:drawable="@drawable/gradient_background" />

2 创建这个文件\android\app\src\main\res\values\colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="gradientstart">#3587d0</color>
    <color name="gradientend">#36f1d3</color>
</resources>

3 最后，创建这个文件\android\app\src\main\res\drawable\gradient_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/gradientstart"
        android:endColor="@color/gradientend"
        android:angle="90"/>    
</shape>

【讨论】：

iOS 怎么样？

【参考方案3】：

对于 Android，首先在您的 colors.xml 中定义两种颜色：

<color name="gradientstart">#888888</color>
<color name="gradientend">#111111</color>

然后在 \android\app\src\main\res\drawable\launch_background.xml 中替换这个：

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

到这里：

<gradient android:startColor="@color/gradientstart" android:endColor="@color/gradientend" android:angle="315"/>

对于 ios 根据这个question

如果您的渐变是简单的垂直或水平渐变，并且 你真的很关心资产规模，你可以定义一个非常狭窄的 图像，然后添加具有“缩放填充”内容模式的图像视图。

但是这些图像无论如何都太小了，节省的空间量将 可以忽略不计，所以我不确定是否值得担心。