CardView in Flutter : Making Stunning UIs in Minutes
Introduction to CardView in Flutter
CardView in Flutter enhances the visual appeal of your app. It adds a card-like interface with elevation and rounded corners. Using CardView in Flutter makes your app look polished and professional.
![CardView in Flutter : Making Stunning UIs in Minutes](https://bigknol.com/wp-content/uploads/2024/06/flutter_card_view_example.png)
Setting Up Your Flutter Environment
First, ensure you have Flutter installed. Open your terminal and run:
flutter create cardview_example
Open your project in your preferred IDE. We will edit the main.dart file.
Creating Your First CardView in Flutter
To create a CardView, we use the Card widget. Let’s start with a simple example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CardView in Flutter'),
),
body: Center(
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
width: 300,
height: 200,
child: Center(
child: const Text('Hello, CardView!'),
),
),
),
),
),
);
}
}
In this code, we created a simple CardView. The Card widget adds elevation and rounded corners to your content.
![CardView in Flutter : Making Stunning UI in Minutes](https://bigknol.com/wp-content/uploads/2024/06/Cardview_in_flutter_example.png)
Customizing CardView
Next, we customize the CardView to enhance its look. We add images, icons, and text to create a more informative card.
Adding Images to CardView
To include an image, modify the child property of the Card widget:
Image.network(
'https://cdn.pixabay.com/photo/2024/04/07/10/16/play-8681108_960_720.png',
width: 100,
height: 100,
fit: BoxFit.fill),
),
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CardView in Flutter'),
),
body: Center(
child: Card(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Container(
width: 200,
height: 200,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://cdn.pixabay.com/photo/2024/04/07/10/16/play-8681108_960_720.png',
width: 100,
height: 100,
fit: BoxFit.fill),
SizedBox(height: 3),
const Text('Play Video'),
])),
),
),
),
),
);
}
}
This code snippet adds an image and text to your CardView. Remember to use a valid image URL.
![Flutter CardView with Image Centre Example Preview](https://bigknol.com/wp-content/uploads/2024/06/Card_View_Flutter_Example_Preiview.png)
Incorporating Icons and Buttons
Icons and buttons add interactivity to your CardView. Here’s an example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CardView'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Icon(Icons.account_balance_wallet),
title: Text('Pay'),
subtitle: Text('\$100'),
),
ButtonBar(
children: [
TextButton(
child: const Text('PAY NOW'),
onPressed: () {/* ... */},
),
TextButton(
child: const Text('LATER'),
onPressed: () {/* ... */},
),
],
),
],
),
),
),
);
}
}
This example uses ListTile and ButtonBar to add icons and buttons. These elements make your CardView interactive and informative.
![More Items on a single CardView in Flutter](https://bigknol.com/wp-content/uploads/2024/06/More-Items-on-a-single-CardView-in-Flutter.png)
Advanced CardView in Flutter : Adding Multiple Cards
Creating multiple cards in a list is a common use case. Here’s how you can achieve that:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('CardView'),
),
body: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Card(
child: ListTile(
leading: Icon(Icons.album),
title: Text('Track 1'),
subtitle: Text('Description 1'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.album),
title: Text('Track 2'),
subtitle: Text('Description 2'),
),
),
Card(
child: ListTile(
leading: Icon(Icons.album),
title: Text('Track 3'),
subtitle: Text('Description 3'),
),
),
],
),
),
);
}
}
This code creates a list of cards with different content. Using ListView, you can scroll through the cards.
![](https://bigknol.com/wp-content/uploads/2024/06/Card_View_with_List.png)
Key Advantages
Enhanced Visual Appeal: CardViews add elevation, shadows, and rounded corners, making your app’s UI look polished and professional.
Effortless Layout Integration: CardView seamlessly integrates with Flutter’s layout widgets, making it easy to create complex and responsive UI designs.
Creating a CardView in Flutter is simple and effective. It enhances your app’s UI by adding a professional touch. By customizing CardView, you can create engaging and interactive interfaces. Experiment with different properties and widgets to make your CardView unique. Happy coding with Flutter!