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 ?

Solution

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

Comments

[Filipe Piletti Plucenio]

Let me know if this helped you.

[Chloé]

Thx but it does not fit the border of the card :(

[Chloé]

Thx but it does not fit the border of the card :(

[Chloé]

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

[Ravindra S. Patil]

Refer my updated answer, one thing forgot black color of updated image try updated code hope it's helpful to you

[Chloé]

Thank you but it still does not fit the border radius of the card.

[Ravindra S. Patil]

can you tell me the what do you want in image or picture?

[Chloé]

I do not need an image or a picture, but a gradient color.

[Ravindra S. Patil]

Are you Try my answer?