How Flutter Simplified Designing Card Widgets

Today’s era App UI or User Interface plays a significant role in attracting audience.

Recent trends most of the apps are following is having famous Stories and Product intro listing, we are going to introduce some of the coolest ideas.

Introducing Card Widget in Flutter

How to have a perfect Card in your App?

There are many ways to use card. And developers use different types of cards to display different types of small information.

Let’s see some of the best use of cards shape and how to code for that:

To display the user’s profile we can use a square card, Let’s see one of the trending app Knackit.

Knackit shows user in Square Card widget shape. Developer group’s favorite communication tool slack is also used the square card for display user.

How to Set Square Card?

Card(
	color: Colors.transparent,
	elevation: 0,
	child: Column(
	children: [
	Container(
	height: 75,
	width: 75,
	padding: EdgeInsets.all(5),
	decoration: BoxDecoration(
	borderRadius: BorderRadius.circular(10),
	color: UiColors.white,
	),
	child: Container(
	padding: EdgeInsets.all(10),
	foregroundDecoration: BoxDecoration(
	borderRadius: BorderRadius.circular(10),
	image: DecorationImage(image: userimage , fit: BoxFit.cover)),),
	),
	SizedBox(height: 10.0),
	],
	),
	);

Nowadays audience very much like short video stories and for that best way to listing it in portrait rectangle card widget.

Let’s get an example of Knackit’s trending video list and learn how to make that shape :

How to Set Portrait Rectangle Card ?

Card(
	color: Colors.transparent,
	elevation: 0,
	child: Container(
	color: UiColors.white,
	height: 250,
	width: 150,
	child: Stack(
	children: <Widget>[
	Image(
	image: VideoSnapImage,
	width: 150,
	height: 200,
	fit: BoxFit.cover,
	),
	Container(
	margin: EdgeInsets.only(top: 200),
	height: 60,
	width: 150,
	color: Colors.white,
	child: Padding(
	padding: const EdgeInsets.all(8.0),
	child: Column(
	mainAxisAlignment: MainAxisAlignment.start,
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Row(
	children: [
	Icon(
	Icons.eye,
	color: UiColors.Gray,
	),
	Padding(
	padding: EdgeInsets.only(left: 5.0),
	child: Text(
	ViewCount,
	style: TextStyle(fontSize: 10),
	),
	),
	],
	),
	Text(
	VideoTitle,
	style: TextStyle(fontSize: 12),
	softWrap: false,
	),
	],
	),
	),
	)
	],
	),
	),
	)

Some of the places where cards can be used are:

Most of users favorite apps like Instagram, Twitter, Knackit, WhatsApp uses round shape for display user status.

Another trending thing in any app is banners we can use Horizontal Rectangle card shape to make banners in application. Knackit has the best banner widget for their event feature.

Knackit provides Gigs feature for talented people. People use it to show their talent introduction by the square card widget and this way every app can do introduce its product item list.

Flutter card widget acts as a bridge in displaying the information in more meaningful ways.