如何在flutter中创建垂直线性渐变？

Question

我正在尝试创建一个垂直线性渐变，即从顶部中心到底部中心，就像这个图像。

我想出了这段代码，它创建从左上角到右下角的对角渐变。我怎样才能得到垂直线性渐变？

 Container(
      height: 550,
      width: 550,
      decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment(0.9, 0.1),
                      colors: [opFireOrange, fireOrange]
                     ),
                    borderRadius: BorderRadius.all(Radius.circular(6.0)),
         ),
    ),

Answer 1

您应该将 end: Alignment(0.9, 0.1) 更改为 end: Alignment.bottomCenter 并将停止点列表添加到 LinearGradient，下面的代码应该在 flutter 中产生所需的垂直线性渐变：

LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0.9, 0.1],
          colors: [opFireOrange, fireOrange],
),

Answer 2

添加停靠点并设置正确的对齐方式，如

gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [Colors.orange, Colors.deepOrange],
                stops: [0.8, 1.0],
              ),

Answer 3

您应该将

end

属性设置为

Alignment.bottomCenter

并停止相同的值，因为颜色之间的过渡不平滑，很难。这将产生所需的垂直渐变，如您提供的图像所示。

LinearGradient(
  begin: Alignment.topCenter,
  end: Alignment.bottomCenter,
  stops: [0.9, 0.9], // <-- same value stops
  colors: [opFireOrange, fireOrange],
),

相同停止值的解释 -

• 对于 0 到 90% 的空间，第一种颜色将会出现
• 对于 90% 到 90% 的空间，将出现第一种颜色和第二种颜色的混合。这意味着混合将不可见。这是关键
• 对于其余 90% 到 100% 的空间，第二种颜色将可见。

定义相同的停止值负责渐变中颜色过渡之间的硬边缘。