具有多个停止点的 LinearGradient

Question

我想画一个 LinearGradient 只有 2 种颜色 但有 3 个色标 ，即 2 种颜色在两侧但中性不在中间，它可以在左边或右边（停止在 0 -> 1 之间）。

我知道 stops 需要与 flutter site.

中的 colors 长度相同

The stops list, if specified, must have the same length as colors.

我的想法是创建一个组合颜色并添加到颜色的中间，现在我可以使用 3 档 。但是颜色过渡看起来并不像我预期的那样平滑。下面是我的代码。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(title: const Text('Custom stops')),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [colorLeft, Color.alphaBlend(colorLeft, colorRight), colorRight],
            stops: [0, 0.7, 1],
          ),
        ),
      ),
    ),
  );
}

有没有其他方法可以做到。结果应如下所示，但颜色过渡更平滑。我很感激任何有用的想法，谢谢。

Answer 1

尝试 lerp 示例 https://dartpad.dev/?id=4916732360a976a5e4cb33a915a64c86

colors: [colorLeft, Color.lerp(colorLeft, colorRight,0.25)??colorLeft, colorRight],

调整设置以满足您的需要。在 https://api.flutter.dev/flutter/dart-ui/Color/lerp.html

阅读

具有多个停止点的 LinearGradient

LinearGradient with multiple stops

flutter

dart

flutter-layout