提问者:小点点

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


我正在为我的Flutter应用程序开发闪屏,在可绘制文件夹中,我必须创建一个名为色. xml的文件,以便为我的闪屏更改背景颜色。我发现很难使它成为渐变颜色。我的意图是创建一个渐变背景颜色,从左上角开始,到右下角结束,使用两种不同的颜色。有人有在Flutter中如何做到这一点的示例吗?谢谢!附言。android和ios的过程有区别吗?


共3个答案

匿名用户

1在\android\app\src\main\res\可绘制\launch_background. xml中

改变这个:

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

到:

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

2创建此文件\android\app\src\main\res\值\色. 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\绘图\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>

匿名用户

对于Android,首先在您的颜色. 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根据这个问题

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

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

匿名用户

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

像这样的东西:

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