如何为Flutter启动屏幕提供渐变颜色

huangapple go评论63阅读模式
英文:

How to provide gradient color for flutter splash screen

问题

我正在使用以下插件

flutter_native_splash 2.2.17

它工作得很好,但问题是我只能在以下的setup中使用一种颜色

flutter_native_splash:
  color: "#16874c" // 这里我无法使用两种HEX颜色作为列表以获得渐变颜色

我希望使用以下的渐变

Container(
  decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [
            Colors.blue,
            Colors.black,
          ]
      )
  ),
),

如何使用相同的渐变并将其提供给flutter_native_splash的设置?

英文:

i am using the following plugin

flutter_native_splash 2.2.17

it is work perfectly but the problem is i only can use one color in the following setup

flutter_native_splash:
  color: "#16874c" // here i am not able to use two HEX color as list in order to get gradiant color 

i have the following desire gradient

  Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [
              Colors.blue,
              Colors.black,
            ]
        )
    ),
  ), 

how can i use that same gradient and provide it to flutter_native_splash setup

答案1

得分: 2

从文档中:

颜色或background_image 是唯一必需的参数。使用颜色来设置闪屏的背景为纯色。使用background_image 来设置闪屏的背景为PNG图像。这对渐变非常有用。图像将被拉伸到应用程序的大小。只能使用一个参数,不能同时设置颜色和background_image。

color: "#42a5f5"
#background_image: "assets/background.png"

使用任何工具创建渐变图像,将其放入assets文件夹,并将其链接为background_image。

英文:

From the docs:

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  color: "#42a5f5"
  #background_image: "assets/background.png"

Create a gradient image with any tool, put it inside your assets folder and link it as background_image

答案2

得分: 1

如果您想要使用渐变颜色作为您的背景颜色,您需要在drawable文件夹中创建一个新文件,命名为gradient_background.xml。

由于渐变背景是颜色的组合,您需要在colors.xml中指定要用作渐变的自定义颜色。您最多可以使用三种颜色:起始颜色、中间颜色和结束颜色。

在此文件中,在shape标记内指定您的渐变。在我的示例中,这将是一个包含所有可能的三种颜色的线性渐变。

要选择您的渐变颜色和所需的渐变角度,您可以使用在线CSS渐变生成器。

有关更多信息,请查看此文章。

英文:

If you want to use gradient colors as your background color, you need to create a new file in the drawable folder and name it gradient_background.xml.

Since the gradient background is a combination of colors, specify the custom colors you want to use as a gradient in colors.xml. The maximum number of colors you can use is three: the start color, center color, and end color.

In this file, within the shape tag, specify your gradient. In my example, that’d be a linear gradient with all of the possible three colors.

To choose your gradient color and what angle of the gradient you want, you can use the Online CSS Gradient Generator.

for more info check this article

huangapple
  • 本文由 发表于 2023年2月7日 01:23:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/75364581.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定