How to add gradient color in card?

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 ?

3 Answers

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

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

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