Flutter Card provide a beautiful look in the flutter app. It consist with a slight shadow which give the separate look from another widgets in flutter apps. Material design library provide the way to create Card in Flutter apps.
How To Make Card In Flutter App
To make a card in flutter is very simple. It is quite similar to creating card in android. Use Card widget to make the Card in Flutter as below. For this you have to import the material design library for that. So install material design library first.
import 'package:flutter/material.dart';Creating Card in Flutter
Use Card widget to create the Card. Inside the card you can use, other widgets like Container, Row and Column. We suggest you to use Container and then Row or Column so you can use multiple widgets.
Card(
margin: EdgeInsets.all(15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
child: Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Expanded(flex: 2, child: Icon(Icons.home)),
Expanded(
flex: 8,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Title"),
Text("Descripton"),
],
),
),
)
],
),
),
),Above code is the CardView in flutter. It is simple Card in flutter. Screenshot is below of the above result.
Features Of Card in Flutter
Some of the features of the Card are below. You can design according the your requirement using these properties.
Rounded Corner Of the Card In Flutter
To create the rounded corner use the shape property and provide the RoundedReactangleBorder.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),How To Create Shadow Of Card
To create the shadow use elevation property.
elevation: 5,Giving Margin In Card
To give margin in flutter use the margin property i the following way.
margin: EdgeInsets.all(15),To separate the widgets equally inside the Card or Container, Use Expanded widget and provide the flex. Flex covers the area according to the input and remaining area covered by the another widget.
Complete Example Of Card
You can directly use the below code for making card in your projects. Change the style as you want to create. Below is the demo design which let you know that how to create the Cards in flutter.
import 'package:flutter/material.dart';
class Demo extends StatefulWidget {
const Demo({Key? key}) : super(key: key);
@override
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: Column(
children: [
Card(
margin: EdgeInsets.all(15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
child: Container(
margin: EdgeInsets.all(10),
child: Row(
children: [
Expanded(flex: 2, child: Icon(Icons.home)),
Expanded(
flex: 8,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Title"),
Text("Descripton"),
],
),
),
)
],
),
),
),
],
),
),
);
}
}
Thank you for visiting this tutorial on FlutterTPoint. Hope you learn something from here. You can comment for any issue and problem. Please learn more android and flutter tutorial from this website.
