Best Flutter Card UI

1. Card 1

class Card1 extends StatelessWidget {
  const Card1({
    Key key,
    @required this.mediaquery,
  }) : super(key: key);

  final Size mediaquery;

  @override
  Widget build(BuildContext context) {
    return Center(

      child: Card(
        elevation: 50,
        shadowColor: Colors.black,
        color: Colors.greenAccent[100],
        child: SizedBox(
                  height: mediaquery.height * 0.6,
                  width: mediaquery.width * 0.4,
          child: Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                CircleAvatar(
                  backgroundColor: Colors.green[500],
                  radius: 52,
                  child: CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://blog.semikolan.co/public/images/favicon.png",),
                    radius: 50,
                  ), //CircleAvatar
                ), //CirclAvatar
                SizedBox(
                  height: 10,
                ), //SizedBox
                Text(
                  'SemiKolan',
                  style: TextStyle(
                    fontSize: 30,
                    color: Colors.green[900],
                    fontWeight: FontWeight.w500,
                  ), //Textstyle
                ), //Text
                SizedBox(
                  height: 10,
                ), //SizedBox
                Text(
                  'SemiKolan is also a platform for like minded learners, developers and Enthusiasts to learn, connect, create great connections and work on great projects among themselves and for the community. ',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.green[900],
                  ), //Textstyle
                ), //Text
                SizedBox(
                  height: 10,
                ), //SizedBox
                SizedBox(
                  width: 80,
                  child: TextButton(
                    onPressed: () => null,
                    // color: Colors.green,
                    child: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: Row(
                        children: [
                          Icon(Icons.touch_app),
                          Text('Visit'),
                        ],
                      ), //Row
                    ), //Padding
                  ), //RaisedButton
                ) //SizedBox
              ],
            ), //Column
          ), //Padding
        ), //SizedBox
      ), //Card
    );
  }
}

2. Card 2

To be continued…

Category: Flutter | App Development

Relavent Tags: Flutter