flutter - 如何在 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类，它扩展了GradientTransform类。它以弧度为单位的角度作为参数，并沿顺时针方向旋转着色器

这是一个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 度。

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