flutter - 如何在 Flutter 中为卡片添加渐变？

Question

我正在尝试实现这个设计:

我还想使用 Flutter 提供的 Card 小部件。它附带了一些我想使用的不错的主题支持 (CardTheme)。

所以不知道如何为Card提供LinearGradient。以下是我尝试将 Card 与 Container 相结合的方法:

Card(
    child: Container(
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            cardBorderColor,
            Theme.of(context).colorScheme.surface,
          ],
          stops: [0, 0.8],
        ),
      ),
      child: ...

如您所见，定位容器时会考虑卡片的边框半径。

Answer 1

将 Card 的 clipBehavior 属性设置为 Clip.antiAlias 可实现所需的结果:

Card(
    clipBehavior: Clip.antiAlias, // <-- this did the trick
    margin: EdgeInsets.all(5),
    child: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            cardBorderColor,
            Theme.of(context).colorScheme.surface,
          ],
          stops: [0, 0.8],
        ),
      ),
      child: ...