A card-like widget. Similar to Android's CardView, the card has slightly rounded corners and shadows
Card Widget attribute
color : container background color
elevation : Z-axis height, to achieve the shadow effect.
shape : defines the shape of the container
margin : margin
clipBehavior : the way to clip content
Example:
|
class CardWidget extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title:Text("Card Widget"),backgroundColor: Colors.pink,), body: Container( alignment: Alignment.topCenter, margin: EdgeInsets.only(top: 10.0), child: SizedBox( width: 400.0, height: 200.0, child: Card( color: Colors.purple, elevation: 30.0, child: Padding( padding: EdgeInsets.all( 14.0, ), child: Column( children: <Widget>[ Row( children: <Widget>[ CircleAvatar( backgroundImage: NetworkImage( "https://cdn.pixabay.com/photo/2016/10/17/17/41/priyanka-chopra-1748248_960_720.jpg"), radius: 24.0, ), Container( margin: EdgeInsets.only(left: 10.0), child: Text( "Text", style: TextStyle(color: Colors.white, fontSize: 20.0), ), ), ], ), Container( margin: EdgeInsets.only(top: 30.0), child: Text( "Never Stop Thinking...", style: TextStyle(color: Colors.white, fontSize: 30.0), ), ), Container( alignment: Alignment.bottomRight, margin: EdgeInsets.only(top: 30.0), child: Text( "2020-01-10 15:47:35", style: TextStyle(color: Colors.white, fontSize: 14.0), ), ), ], ), ), ), ), ), ), ); } } |
