How to add gradient color in card?

Question

How to add gradient color in the background of a card ? Should I reproduce this card with a container and a box decoration or is there another simple way ?

Can you add your code snippet. It can be done by using container — Md. Yeasin Sheikh, Aug 19 '21 at 17:33
Check this out : https://betterprogramming.pub/instagram-gradient-animation-for-flutter-1d74d3869997 — abdul rehman, Jun 01 '22 at 15:10

Ravindra S. Patil · Answer 1 · 2022-04-19T05:15:33.167

19

Try below code hope it help to you in below answer change Color your need.

         Card(
            child: Container(
              height: 50,
              width: 150,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.yellow,
                    Colors.orangeAccent,
                    Colors.yellow.shade300,
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
              child: Container(), //declare your widget here
            ),
          ),

Your Card look like->

If you are gradient background to card or gradient border to card try below code

  Container(
        
          height: 50,
          width: 150,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.yellow,
                Colors.orangeAccent,
                Colors.yellow.shade300,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        child:Card(
          color:Colors.white,
          child: Container(), //declare your widget here
        ),
      ),

Your Screen like ->

edited Apr 19 '22 at 05:15

answered Aug 20 '21 at 04:23

Ravindra S. Patil

11,757
3
13
40

Thx but it does not fit the border of the card :( – Chloé Aug 20 '21 at 07:25
Thx but it does not fit the border of the card :( – Chloé Aug 20 '21 at 07:25
Refer my updated answer, one thing forgot black color of updated image try updated code hope it's helpful to you – Ravindra S. Patil Aug 20 '21 at 07:34
Thank you but it still does not fit the border radius of the card. – Chloé Aug 20 '21 at 08:04
can you tell me the what do you want in image or picture? – Ravindra S. Patil Aug 20 '21 at 08:20
I do not need an image or a picture, but a gradient color. – Chloé Aug 20 '21 at 14:16
Are you Try my answer? – Ravindra S. Patil Aug 20 '21 at 17:12
1

Add `clipBehavior: Clip.antiAlias` to your `Card` widget if you want the gradient to be clipped to the card shape (by default it will spill outside of the card rounded edges) – Jonathan Ellis Feb 01 '23 at 15:19

dugoymasta · Answer 2 · 2022-10-11T09:07:05.280

I know it's a bit late, but you can try this to achieve a card gradient with border radius

return Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black38,
        blurRadius: 3.0,
        spreadRadius: 0.0,
        offset: Offset(1.0, 1.0),
      )
    ],
    gradient: LinearGradient(
      colors: [startColor, endColor],
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
    ),
  ),
  child: Padding(
    padding: const EdgeInsets.all(12),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 6),
        TextWidget(
          title,
          typographyToken: TypographyToken.text14SemiBold,
          color: Colors.white,
        ),
        const SizedBox(height: 8),
        TextWidget(
          "$pendingCount Pending Request",
          typographyToken: TypographyToken.text10,
          color: Colors.white,
        ),
        const SizedBox(height: 6),
      ],
    ),
  ),
);

Result :

result

score 0 · Answer 3 · answered Aug 19 '21 at 17:58

0

This is a sample that I tried just now. Works fine for me.

Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    colors: [Colors.black, Colors.white],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight)),
          )

answered Aug 19 '21 at 17:58

Filipe Piletti Plucenio

704
10
25

Let me know if this helped you. – Filipe Piletti Plucenio Aug 19 '21 at 18:19
Thx, this is the best alternative I had, but you must also add circle border and an InkWell widget to do it like a card. I will do this if there is no other solution.. – Chloé Aug 20 '21 at 07:29

score 0 · Answer 4 · answered Feb 14 '22 at 11:36

Another way and probably the best in my opinion:

  Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.centerRight,
                    end: Alignment.center,
                    colors: [Colors.deepOrangeAccent, Colors.orange],
                  ),
                ),
                width: 300,
                height: 300,
                child: Card(
                  color: Colors.transparent,
                ),
              ),

Output:

Click here to view

score -1 · Answer 5 · answered Nov 04 '22 at 00:33

-1

Card(
        shadowColor: tabColorAmber,
        elevation: 10,
        child: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              gradient: LinearGradient(colors: [
                Colors.orangeAccent,
                Colors.orangeAccent,
                Colors.yellow.shade100,
              ])),
          width: double.infinity,
          height: 140,
        ),
      ),

Example

answered Nov 04 '22 at 00:33

Paulo Borini

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 07 '22 at 20:51

How to add gradient color in card?

5 Answers5

Linked