According to the Flutter documentation a Card widget is a sheet of Material used to represent some related information.
Since a card widget represents some related information, let us represent information about our expense list that we’ve been building in our previous article.
Above all as a beginner the first question will pop up.
How does a card widget looks like?
How does this sheet of Material design layout widget keeps related information closer, so that it looks good and gives user a rich experience.
For example, firstly, let’s see an image of flutter app that uses card widget.
As you can see in the above image, we’ve built an expense list flutter app, where in two text fields we submit data and it gets added to the local storage. And, after that, the data displays in Card widget below.
If you feel interested get the full code in respective GitHub repository.
Let’s see, how we’ve displayed the related information using Card widget.
Card(
elevation: 10,
child: Row(
children: [
displayAmount(e),
displayTaskAndDate(e),
],
),
),As we see, inside Card widget we’ve used elevation parameter and gives a value 10.
Next, as child parameter we use a Row widget that places two custom widgets.
One is for displaying amount and the other is for displaying task and date.
Moreover, when we’ll examine the code of each custom widget we’ll find that they again have used Card widget for storing content and action of a single object.
Using Card widget is also very simple. For instance, here we’ve called Card constructor and then pass a Row widget as child parameter.
We should always remember that Card, is a wrapper class. In addition a Card is a special type, a Material of type MaterialType.card.
In another article we’ll discuss this concept in detail.
As we see, there might be a confusion over what is the exact difference between a Container widget and a Card widget.
The main difference is the Card widget must have a material design as its ancestor.
The Container widget doesn’t have that compulsion. Moreover, a Container widget can have a child Card inside it.
What is difference between card and container in flutter?
To understand this difference properly, let’s see a code snippet that houses both Container and Card.
Subsequently, let’s compare this code with the above image, so that we can understand this difference in a clear way.
// this is displayAmount(e),
Container displayAmount(ExpenseList e) {
return Container(
margin: EdgeInsets.all(8),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.yellow[100],
border: Border.all(
color: Colors.red,
width: 5,
),
),
child: Card(
child: Text(
'\$${e.amount}',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
);
}In the above code a Container uses Card as its sub-class in the tree of widgets.
However, if we go up above the tree, we’ll find that this Container is a sub-class or child of a Card widget.
Card(
elevation: 10,
child: Row(
children: [
displayAmount(e),
displayTaskAndDate(e),
],
),
),In the similar vein, we can see the display task and date widget code.
Column displayTaskAndDate(ExpenseList e) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue[100],
border: Border.all(
color: Colors.red,
width: 5,
),
),
child: Card(
child: Text(
'${e.title}',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
backgroundColor: Colors.blue[100]),
),
),
),
Container(
margin: EdgeInsets.all(2),
padding: EdgeInsets.all(5),
child: Card(
child: Text(
DateFormat('yyyy/MM/dd').format(e.date),
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
),
),
),
),
],
);
}In conclusion, we can say that a Container plays the same role just like in HTML “div”.
In web development, we wrap other content with the help of HTML “div”.
In Flutter Container widget allows us to wrap other widgets. On the contrary, Card is an implementation of material widgets.
We can not only control the display of related content, we can control the shape. We can make it rounded corners and add a shadow to it.
Leave a Reply