如何在 flutter 中使用 LinearGradient 进行变换？

Question

how to use LinearGradient in flutter with transform?

decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [Colors.black, Colors.white],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    transform: ???,
  )
 ),

Answer 1

您可以使用 GradientRotation class，它扩展了 GradientTransform class。它以弧度为单位的角度作为参数，并沿顺时针方向旋转 shader

这里有一个例子 GradientRotation:

Container(
        padding: const EdgeInsets.all(15),
        child: Text(title,
            style: TextStyle(
                fontFamily: 'RobotoCondensed',
                fontSize: 20,
                color: Colors.white)),
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            transform: GradientRotation(pi/2),
            colors: [
              color.withOpacity(0.5),
              color.withOpacity(0.55),
              color.withOpacity(0.65),
              color.withOpacity(0.75),
              color.withOpacity(0.85),
            ],
            begin: Alignment.centerRight,
            end: Alignment.bottomRight,
            stops: [0, 0.1, 0.2, 0.3, 0.4],
          ),
          borderRadius: BorderRadius.circular(15),
        ),

以下是GradientRoation的应用截图：

第一张图，我没用过GradientRotation；在第二张图片中，我传递了 90 度（pi/2 弧度）作为参数，结果它顺时针旋转了 90 度。

如果热重启失败，请尝试热重载您的应用程序以查看更改。