如何在Flutter中创建45度的线性渐变？

Question

我无法理解如何在LinearGradient度数下操作。我有以下代码：

Container(
        height: 100.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6.0),
          gradient: LinearGradient(begin: FractionalOffset.topLeft, end: FractionalOffset.bottomRight, colors: [
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),
          ], stops: [
            0.0,
            0.3,
            0.3,
            0.7,
            0.7,
            1.0
          ]),
        ),
      );

但.topLeft和'.bottomRight'不需要这样做。下面的图片显示了我想要的内容。 （图片有一个偏移，它不适合[0.0,0.3,0.3,0.7,0.7,1.0]因为这只是例子）

Answer 1

尝试使用这些值：

 LinearGradient(
          begin: Alignment(-1.0, -2.0),
          end: Alignment(1.0, 2.0),

或者事件更好

   LinearGradient(
          begin: Alignment(-1.0, -4.0),
          end: Alignment(1.0, 4.0),

Y：参数说明

垂直方向上的距离分数。 值-1.0对应于最顶边。值1.0 对应于最下边缘。值不限于该范围; ///小于-1.0的值表示位于顶部之上的位置，值///大于1.0表示位于底部之下的位置。

Answer 2

如果你想按角度使用渐变，最好使用SweepGradient。你可以使用center，startAngle和endAngle。以下是您正在寻找的解决方案：

BoxDecoration(
        gradient: SweepGradient(
          center: AlignmentDirectional(1, -1),
          startAngle: 1.7,
          endAngle: 3
          ,
          colors: const <Color>[
            Color(0xFF148535),
            Color(0xFF148535),
            Color(0XFF0D6630),
            Color(0XFF0D6630),
            Color(0xFF148535),
            Color(0xFF148535),              ],
          stops: const <double>[0.0,0.3,0.3,0.7,0.7,1.0]),),

对于想要了解和使用Gradient和Angles的其他人来说，这是一个非常简单的示例：

 Container(
      height: 400,
      decoration: BoxDecoration(
        gradient: SweepGradient(
          center: FractionalOffset.topRight,
          startAngle: 2,
          endAngle: 5
          ,
          colors: const <Color>[
            Colors.red, // blue
            Colors.blue 
          ],
          stops: const <double>[0.0, 0.5],
        ),
      ),
    ),