如何在 Flutter 中混合多个渐变？答案

【问题标题】：How do I mix multiple gradients in Flutter?如何在 Flutter 中混合多个渐变？
【发布时间】：2021-01-09 04:58:30
【问题描述】：

设计师在他们创建的 Figma 设计中组合了两个或多个渐变。在某些设计中，它们将径向渐变与线性渐变相结合；而其他一些设计则将线性渐变与另一种线性渐变相结合。

这可以通过 CSS 轻松完成，但是在 Flutter 中，我无法实现它。我已经阅读了几乎所有关于 Flutter 的文档，但似乎没有解决方案。无论如何我可以在不让设计师改变设计的情况下组合两个渐变？

【问题讨论】：

【解决方案1】：

必须将容器包裹在容器中才能达到这种效果：

Container(
  decoration: BoxDecoration(
    gradient: gradientOne,
  ),
  child: Container(
    decoration: BoxDecoration(
      gradient: gradientTwo,
    ),
    child: content,
  ),
)

适用于半透明渐变。

【讨论】：

【解决方案2】：

渐变：线性渐变（

          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: [Colors.blue, Colors.red])),

【讨论】：

这仍然使用单个渐变。问题询问如何组合多个渐变。

【解决方案3】：

如果你像这样混合多个渐变

所以尝试这种方式

正文：列（

      children:<Widget> [

         Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,

                  colors: [Colors.blue, Colors.red])),
         
           child: Center(

               child: Text(
              '',

              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        ),

        Container(

          decoration: BoxDecoration(

              gradient: LinearGradient(

                  begin: Alignment.topRight,

                  end: Alignment.bottomLeft,
                  colors: [Colors.white, Colors.black])),

          child: Center(

            child: Text(

              '',
              style: TextStyle(

                  fontSize: 48.0,

                  fontWeight: FontWeight.bold,

                  color: Colors.white),

            ),
          ),
        )
      ],
       ));

【讨论】：

【解决方案4】：

gradient: LinearGradient(
    begin: Alignment.topCenter, 
    end: Alignment.bottomCenter, 
    colors: [ Color.fromARGB(255, 255, 255, 255), 
              Color.fromARGB(255, 218, 217, 217)]
 )
),

//这是我在容器中所做的。我将整个脚手架包裹在一个容器中，以使背景为白色至浅灰色。

【讨论】：

这仍然使用单个渐变。问题询问如何组合多个渐变。

【解决方案5】：

尝试使用 Gradient.lerp(yourFirstGradient, yourSecondGradient, 0.5) 两者必须是同一类型

【讨论】：