flutter - 如何将 CSS LinearGradient 转换为 Flutter LinearGradient？

Question

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

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

这是我的 Flutter 代码:

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%);

---

flutter

对于旋转，我们可以改变Linear Gradient中begin和end的属性。 begin 将指示 color1 渐变的开始位置，end 指示 color1 渐变的结束位置。

您可以使用 - 确定角度

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

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

Flutter 代码-

只需添加颜色代码 -

 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 输出-

尝试在 LinearGradient 中调整 x 和 y 坐标以获得您想要的结果

DartPad在线查看 DartPad