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

Question

我正在努力实现这个设计：

我还想使用 Flutter 提供的 Card widget。它带有一些我想使用的不错的主题支持 (CardTheme)。

所以不知道如何将 LinearGradient 给 Card。这是我尝试将 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: ...

如您所见，在放置 Container 时会考虑卡片的边界半径。

Answer 1

使用DecoratedBox代替Container

Answer 2

您可以在那里使用 borderRadius: BorderRadius.circular(x),，并用 ClipRRect 包装所有内容以获得 Card 颜色。您可能有充分的理由拥有 Card 而我不知道，但是您检查 Material 小部件并且使用它将很容易存档，就像不处理额外的 border/override 颜色一样通过 Card.

结果

小部件


class DX extends StatelessWidget {
  const DX({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepPurple,
      body: Center(
        child: ClipRRect(
          borderRadius: BorderRadius.circular(35), //* you can  increase it
          child: Card(
            color: Colors
                .transparent, //* or set the bg Color and remove [ClipRRect]
            child: Container(
              width: 400,
              height: 100,
              // margin: EdgeInsets.all(5),

              decoration: BoxDecoration(
               border: Border.all(width: 0, color: Colors.transparent),
                borderRadius: BorderRadius.circular(22),
                gradient: LinearGradient(
                  colors: [
                    Colors.red,
                    // cardBorderColor,
                    Theme.of(context).colorScheme.surface,
                  ],
                  stops: [0, 0.8],
                ),
              ),
              child: Center(child: Text("asdasd")),
            ),
          ),
        ),
      ),
    );
  }
}

Answer 3

将 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: ...

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

How to add a gradient to a card in Flutter?

flutter

gradient

card