How to add a gradient to a card in Flutter?

Question

I'm trying to achieve this design:

I also want to use a Card widget provided by Flutter. It comes with some nice theming support that I'd like to use (CardTheme).

So don't know how to give a LinearGradient to a Card. Here's what I tried to do with combining a Card with Container:

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

As you can see, the border radius of the card is respected when positioning the Container.

What is the exact problem you are facing? is it the hard edge of the container? — Moaz El-sawaf, Oct 08 '21 at 21:49
@MoazEl-sawaf, my issue is that I don't want to specify `borderRadius` in a bunch of places. I just want to use the `Card` widget, set its gradient and let it figure out its own border radius (`CardTheme`) — ANDREYDEN, Oct 09 '21 at 19:12

score 1 · Accepted Answer · answered Oct 09 '21 at 23:04

Setting the clipBehavior property of the Card to Clip.antiAlias achieves the desired outcome:

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

score 0 · Answer 2 · answered Oct 08 '21 at 21:19

0

use DecoratedBox instead of Container

answered Oct 08 '21 at 21:19

Hosam Hasan

564
4
11

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 09 '21 at 07:32
Yes, can you please provide a code sample? This doesn't seem to work for me (I don't get the rounded border) – ANDREYDEN Oct 09 '21 at 19:11

Md. Yeasin Sheikh · Answer 3 · 2021-10-08T22:04:50.520

You can use borderRadius: BorderRadius.circular(x), there, and wrap everything with ClipRRect for Card color. You may have good reason to have Card and I don't know that, but you check Material widget and with it will be simple to archive, like not to handling extra border/override color of by Card.

Result

Widget


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")),
            ),
          ),
        ),
      ),
    );
  }
}

Thanks for the answer! This works, but I can as easily just specify `borderRadius` on the decoration of the `Container` inside the `Card`. My goal is not to use `borderRadius` as I want it to be set by the `CardTheme`. — ANDREYDEN, Oct 09 '21 at 19:10
how about removing border from container and just using clipRRect — Md. Yeasin Sheikh, Oct 09 '21 at 22:59
Yeah, the `clipBehavior` property on the `Card` did the trick. I guess it's similar to a standalone `ClipRRect`. — ANDREYDEN, Oct 09 '21 at 23:06

How to add a gradient to a card in Flutter?

3 Answers3