Flutter Card Widget | RRTutors

Flutter Card Widget

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

                     ),

                   ),

                 ],

               ),

             ),

           ),

         ),

     ),

     ),

   );

 }

 

}

 

Flutter Cardview widget

 

Advertisements