Flutter 渐变

太久没写技术博客啦~~~~~~~

最近一直在用fluter做app, 前几天有个功能需要用渐变色来做一个文本.

我回想起几年前被我们UI设计师支配的恐惧, 那个UI特别喜欢用渐变色跟圆角, 以至于天天跟CALayer之类的打交道.

如果想要在flutter上实现渐变色就太简单了, 在Container容器中有一个修饰器decoration中有一个 gradient属性, 你只要给这个属性设置值, 就可以对容器设置渐变色了.
对修饰器有以下几种创建渐变色的方式:

LinearGradient
RadialGradient
SweepGradient

我会在下面的内容分别对上面这 3 种实现渐变色的方法给出具体的实例和相关代码:

LinearGradient

LinearGradient 是 Flutter 中实现线性渐变效果的类，它可以用来创建两个或多个颜色之间的线性渐变。下面是 LinearGradient 的一些适用场景和利弊：

适用场景：

需要实现颜色的线性渐变效果，例如从一个颜色平滑过渡到另一个颜色；可以在任何需要使用颜色的地方使用，例如背景、边框、文本等。

利弊：

优点：简单易用，可以创建平滑过渡的颜色效果，适用于各种需要渐变色的场景。

缺点：不适合实现复杂的渐变效果，例如径向渐变或多个颜色之间的复杂渐变。对于这种情况，可以考虑使用 RadialGradient 或 SweepGradient 等其他类型的渐变。

LinearGradient中也有很多其他的属性, 你可以自己尝试一下都有什么效果

begin：定义渐变的起点位置，它是一个Alignment类型的对象。Alignment类型包含两个属性：x和y，分别表示水平和垂直方向上的偏移量。默认值是Alignment.centerLeft，表示从左到右进行渐变。
end：定义渐变的终点位置，也是一个Alignment类型的对象。默认值是Alignment.centerRight，表示从右到左进行渐变。
colors：定义渐变的颜色数组。渐变将从数组的第一个颜色过渡到最后一个颜色。至少需要提供两个颜色。
stops：定义颜色数组中每个颜色的位置。每个位置的值必须在0.0到1.0之间。如果不提供stops属性，则渐变中每个颜色的位置将均匀分布。
tileMode：定义渐变在超出定义范围时的重复方式。默认值是TileMode.clamp，表示渐变将延伸到起点和终点之外的区域，并使用最近的颜色。模式如下图所示:

LinearGradient 的简单应用, 代码以及图例如下:

// LinearGradient
 _linear() {
   return Center(
     child: Container(
         height: 100,
         width: 100,
         decoration: const BoxDecoration(
           gradient: LinearGradient(
             begin: Alignment.centerLeft,
             end: Alignment.centerRight,
             colors: [Colors.blue, Colors.black38,Colors.green],
           ),
         ),
         child: Text("LinearGradient_渐变") 
         ),
   );
 }

以上是LinearGradient的一些重要属性，您可以根据需要进行自定义和扩展，以创建更复杂和有趣的渐变效果。

RadialGradient

RadialGradient 是 Flutter 中实现径向渐变效果的类，它可以用来创建从一个中心点向周围扩散的渐变效果。下面是 RadialGradient 的一些适用场景和利弊：

适用场景：

需要实现从一个中心点向周围扩散的渐变效果，例如圆形背景、圆形边框等；
可以在任何需要使用颜色的地方使用，例如背景、边框、文本等。
利弊：

优点：可以创建从一个中心点向周围扩散的渐变效果，适用于多种需要径向渐变的场景；

缺点：不适合实现复杂的渐变效果，例如多个颜色之间的复杂渐变。对于这种情况，可以考虑使用 LinearGradient 或 SweepGradient 等其他类型的渐变。

RadialGradient 属性列表以及说明:

center：定义渐变的中心点位置，它是一个Alignment类型的对象。Alignment类型包含两个属性：x和y，分别表示水平和垂直方向上的偏移量。默认值是Alignment.center，表示渐变从中心点开始。

radius：定义渐变的半径，它是一个浮点数，表示从中心点开始的半径。默认值是0.5。

colors：定义渐变的颜色数组。渐变将从数组的第一个颜色过渡到最后一个颜色。至少需要提供两个颜色。

stops：定义颜色数组中每个颜色的位置。每个位置的值必须在0.0到1.0之间。如果不提供stops属性，则渐变中每个颜色的位置将均匀分布。

tileMode：定义渐变在超出定义范围时的重复方式。默认值是TileMode.clamp，表示渐变将延伸到半径之外的区域，并使用最近的颜色。

RadialGradient 的简单应用, 代码以及图例如下:

_radial() {
  return Center(
    child: Container(
        height: 100,
        width: 100,
        decoration: const BoxDecoration(
          gradient: RadialGradient(
            center: Alignment(0.0, 0.0),
            radius: 0.5,
            colors: [Colors.red, Colors.yellow, Colors.green],
            stops: [0.0, 0.5, 1.0],
            tileMode: TileMode.repeated,
          ),
        ),
        child: Text("RadialGradient 渐变")),
  );
}

在上面的代码中，我们创建了一个 Container 组件，并使用 RadialGradient 作为其背景。我们将渐变的中心点位置设置为Alignment(0.0, 0.0)，将半径设置为0.5，将颜色数组设置为[Colors.red, Colors.yellow, Colors.green]，并将停止位置数组设置为[0.0, 0.5, 1.0]。这意味着渐变将从红色开始，到黄色中间停止，然后到绿色结束。我们还将tileMode设置为TileMode.repeated，表示渐变将在超出定义范围时重复。

SweepGradient

SweepGradient 是 Flutter 中实现扫描渐变效果的类，它可以用来创建在一个圆圈内均匀分布的颜色渐变效果。下面是 SweepGradient 的一些适用场景和利弊：

适用场景：

需要实现在一个圆圈内均匀分布的颜色渐变效果，例如圆形背景、圆形边框等；
可以在任何需要使用颜色的地方使用，例如背景、边框、文本等。
利弊：

优点：可以创建在一个圆圈内均匀分布的颜色渐变效果，适用于多种需要扫描渐变的场景；

缺点：不适合实现复杂的渐变效果，例如多个颜色之间的复杂渐变。对于这种情况，可以考虑使用 LinearGradient 或 RadialGradient 等其他类型的渐变。

SweepGradient 属性列表以及说明:

startAngle：定义渐变的起始角度，它是一个浮点数，表示从中心点开始的起始角度。默认值是0.0，表示从正右方开始扫描。

endAngle：定义渐变的结束角度，它是一个浮点数，表示从中心点开始的结束角度。默认值是2 * pi，表示扫描一周结束。

colors：定义渐变的颜色数组。渐变将从数组的第一个颜色过渡到最后一个颜色。至少需要提供两个颜色。

stops：定义颜色数组中每个颜色的位置。每个位置的值必须在0.0到1.0之间。如果不提供stops属性，则渐变中每个颜色的位置将均匀分布。

SweepGradient 的简单应用, 代码以及图例如下:

_sweepGradient(){
  return Center(
    child: Container(
        decoration: const BoxDecoration(
          gradient: SweepGradient(
            center: Alignment.center,
            startAngle: 0.0,
            endAngle: 2 * pi,
            colors: [Colors.red, Colors.yellow, Colors.green],
            stops: [0.0, 0.5, 1.0],
          ),
        ),
        child: Text("SweepGradient 渐变"))
  );

}

在上面的代码中，我们创建了一个Container组件，并使用SweepGradient作为其背景。我们将渐变的中心点位置设置为Alignment.center，将起始角度设置为0.0，将结束角度设置为2 * pi，将颜色数组设置为[Colors.red, Colors.yellow, Colors.green]，并将停止位置数组设置为[0.0, 0.5, 1.0]。这意味着渐变将从红色开始，到黄色中间停止，然后到绿色结束。

文本渐变

这个是经常会在苹果官网看到, 绚丽多彩的渐变文本. 我们也可以用 flutter 轻松实现:

_colorfulText() {
  return ShaderMask(
    shaderCallback: (bounds) {
      return const LinearGradient(
        colors: [Colors.blue, Colors.red],
        stops: [0.0, 1.0],
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
      ).createShader(bounds);
    },
    child: const Text(
      "this is way",
      style: TextStyle(
        fontSize: 32.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    ),
  );
}

代码地址

相关的代码实现你可以在这里找到: git_repo