Question

您知道如何制作带有渐变的容器边框吗？我想使它从一种颜色渐变为具有0个不透明度的相同颜色。

我也在考虑使用混合模式，我认为这不是一个好主意

此刻，我只看到一种方法。要使其耀斑： https://www.2dimensions.com/a/stellarcreed/files/flare/border-gradient/preview

Answer 1

尝试一下：

Center(
  child: new Container(
    decoration: new BoxDecoration(
      color: Colors.purple,
      gradient: new LinearGradient(
        colors: [Colors.red, Colors.cyan],
      ),
    ),
    child: new FlutterLogo(
      size: 200.0,
    )
  ),
);

更多信息regarding this question。

Answer 2

尝试一下，这应该可以工作，使用LinerGradient，您可以针对不同方向调整Alignment。但这是针对容器的，而不是边界的。您可以在其顶部堆叠其他组件。

        Container(
      height: 100,
      decoration: BoxDecoration(
        color: Styles.colorWhite,
          gradient: LinearGradient(
            tileMode: TileMode.clamp,
              begin:  Alignment(0.0, -1.0),
              end: Alignment(0.0, 0.2),
              colors: [Color(0x1AFFFFFF),Color(0x4DFFFFFF), Colors.white])),
      padding: EdgeInsets.only(top: 1, bottom: 20, left: 15, right: 15),
    ),

This is how it looks

Answer 3

我认为目前唯一的方法是在容器下方堆叠带有渐变颜色的容器。并保持渐变颜色容器的大小比上层容器大一点。

扑。容器边界渐变。白色至透明

3 个答案: