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

Question

我正在处理 Flutter 应用程序的启动画面，在 drawable 文件夹中，我必须创建一个名为 colors.xml 的文件，以便更改启动画面的背景颜色。我发现很难使它成为渐变色。我的目的是使用两种不同的颜色创建一个从左上角开始到右下角结束的渐变背景颜色。有没有人有如何在 Flutter 中做到这一点的例子？谢谢！PS An android 和 ios 的过程有区别吗？

Answer 1

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>

Answer 2

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

\n\n

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

\n\n

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

\n\n

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

\n\n

对此：

\n\n

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

\n\n

对于ios，根据这个问题

\n\n

\n

如果您的渐变是简单的垂直或水平渐变，并且\n您\xe2\x80\x99确实关心资源大小，则可以定义一个非常窄的\n图像，然后使用\xe2\x80\x9cscale添加图像视图到填充\xe2\x80\x9d 内容模式。

\n\n

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

\n

\n