【问题标题】：How can I convert CSS LinearGradient to Flutter LinearGradient?如何将 CSS LinearGradient 转换为 Flutter LinearGradient？
【发布时间】：2020-09-19 07:36:01
【问题描述】：

我需要将 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 上看起来应该如何？

【问题讨论】：

贴出你的flutter代码，到目前为止你做了什么？
你有什么问题。
@SagarAcharya 我应该如何在停止和开始、结束方法上实现“134deg”？
@UmutArpat 可以分享一下你想创建的设计截图吗？
@TheAlphamerc 您可以尝试使用此屏幕截图和此 CSS 代码：background: linear-gradient(93.75deg, #4D8CC2 -5.17%, #AB33B0 109.64%); 预览：imgur.com/a/A8c5kSY

标签： flutter

【解决方案1】：

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

CSS 代码 -

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

颤动

对于旋转，我们可以更改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 coordinates 以获得所需的结果

DartPad在线查看 DartPad

【讨论】：

用正确的颜色创建一个 LinearGradient 不是问题，问题是处理 stop 属性以创建完全相同的效果并具有相同的旋转。
嘿！对于轮换，请查看this
如果您还有任何问题，请告诉我
嘿！你还在面对困难吗？
嗨，是的，我仍然面临这个问题。因为我不能从我的预览中得到相同的结果。 begin 和 end 不正确，我找不到将 CSS 转换为具有相同输出的 Flutter 的方法