如何将 CSS LinearGradient 转换为 Flutter LinearGradient？

Question

我需要将 CSS LinearGradient 转换为 Flutter LinearGradient 这是 CSS 代码：

background-image: linear-gradient(134deg, #d6dcf4 0%, #ffffff 100%);

这是我的颤振代码：

gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [ Color(0x0ffd6dcf4).withOpacity(0),
                Colors.white.withOpacity(1),
              ],
              stops: [
              0.3,
              1
              ])

这在 Flutter 上看起来如何？

Answer 1

这相当简单，在 flutter 中我们可以去掉 CSS 的其他属性。-

CSS 代码 -

background: linear-gradient(93.75deg, #4D8CC2 -5.17%, #AB33B0 109.64%);

扑

对于旋转begin，我们可以改变& endin的属性Linear Gradient。表示begin梯度color1开始的位置，end表示梯度结束的位置color1。

您可以使用 - 确定角度

对于您想要的输出，我在以下位置获得了类似的结果

begin: Alignment(-1,-1),
end: Alignment(1.7,0),

颤振代码-

只需添加颜色代码 -

 return Scaffold(
    body: Container(
        padding: EdgeInsets.all(20),
        width: double.infinity,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment(-1,-1),
                end: Alignment(1.7,0),
                colors: [Color(0xffab33b0),Color(0xff4d8cc2)]
                )
            ),
        height: 1000,
     )

这是 Flutter 的输出 -

尝试调整x & y coordinates以LinearGradient获得您想要的结果

DartPad在线检查 DartPad