Creating a Post Card View in Flutter - Social Media
In this blog post, we will learn how to create a post card view in Flutter. The post card will display recent posts with an image, title, description, like count, and view count.
Let's get started!
Setting up the Project
To begin, create a new Flutter project in your preferred IDE. Replace the default `lib/main.dart` file with the following code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Post Card',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PostCard(),
);
}
}
In the above code, we define the `MyApp` widget as the entry point of our application. It returns a `MaterialApp` widget, which sets the app's title, theme, and sets the `home` property to `PostCard`, our main screen.
Creating the Post Card Widget
Next, let's create the `PostCard` widget, which represents our post card view. Replace the contents of the `lib/main.dart` file with the following code:
import 'package:flutter/material.dart';
class PostCard extends StatefulWidget {
@override
_PostCardState createState() => _PostCardState();
}
class _PostCardState extends State<PostCard> {
final double _elevation = 3;
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
padding: EdgeInsets.all(16),
children: <Widget>[
Container(
margin: EdgeInsets.all(16),
child: Text(
"Recent Post",
style: TextStyle(fontWeight: FontWeight.w600),
),
),
Container(
margin: EdgeInsets.all(16),
child: _SimpleCard(
elevation: _elevation,
image: 'https://i.dummyjson.com/data/products/4/3.jpg',
title: 'New Arrival',
description:
'Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.',
like: 254,
height: 220,
view: 563,
),
),
Container(
margin: EdgeInsets.all(16),
child: Text(
"Recent",
style: TextStyle(fontWeight: FontWeight.w700),
),
),
Container(
margin: EdgeInsets.all(16),
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.only(right: 8),
child: _SimpleCard(
elevation: _elevation,
image: 'https://i.dummyjson.com/data/products/5/3.jpg',
title: 'Stunning offers',
description:
'Lorem ipsum, or lipsum as it is sometimes known',
like: 158,
view: 353,
height: 150,
),
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8),
child: _SimpleCard(
elevation: _elevation,
image: 'https://i.dummyjson.com/data/products/7/3.jpg',
title: 'deals of the day',
height: 150,
description:
'Lorem ipsum, or lipsum as it is sometimes known',
like: 215,
view: 314,
),
),
)
],
),
)
],
),
);
}
}
In the `PostCard` widget, we use a `Scaffold` widget as the main container for our post card view. Inside the `Scaffold`, we use a `ListView` to display a list of content vertically.
Within the `ListView`, we add several `Container` widgets to separate and style the different sections of the post card view. The first `Container` displays a heading for the recent posts section.
Next, we have a `Container` containing the main post card. Inside this `Container`, we use a custom `_SimpleCard` widget to display the post card's content. We pass in the necessary properties such as the image URL, title, description, like count, view count, and height.
After that, we display another heading for the recent section and add two more `Container` widgets within a `Row`. These containers also use the `_SimpleCard` widget to display additional posts.
Creating the Simple Card Widget
To create the custom `_SimpleCard` widget used within the `PostCard`, add the following code below the `PostCard` widget:
class _SimpleCard extends StatefulWidget {
final double elevation;
final String? image, title, description;
final int? like, view, height;
const _SimpleCard({
Key? key,
this.elevation = 1,
this.image,
this.title,
this.description,
this.like,
this.view,
this.height,
}) : super(key: key);
@override
_SimpleCardState createState() => _SimpleCardState();
}
class _SimpleCardState extends State<_SimpleCard> {
late ThemeData theme;
@override
Widget build(BuildContext context) {
theme = Theme.of(context);
return Card(
margin: EdgeInsets.all(0),
elevation: widget.elevation,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image(
image: NetworkImage(widget.image!),
height: widget.height!.toDouble(),
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
widget.title!,
style: TextStyle(fontWeight: FontWeight.w600),
),
Container(
margin: EdgeInsets.only(top: 16),
child: Text(
widget.description!,
style: TextStyle(fontWeight: FontWeight.w500),
),
),
Container(
margin: EdgeInsets.only(top: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(
Icons.favorite_outline,
color: theme.colorScheme.secondary,
size: 20,
),
SizedBox(width: 16),
Container(
margin: EdgeInsets.only(left: 4),
child: Text(
widget.like.toString(),
style: TextStyle(fontWeight: FontWeight.w600),
),
),
Container(
margin: EdgeInsets.only(left: 16),
child: Icon(
Icons.remove_red_eye_outlined,
color: theme.colorScheme.onBackground,
size: 20,
),
),
Container(
margin: EdgeInsets.only(left: 4),
child: Text(
widget.view.toString(),
style: TextStyle(fontWeight: FontWeight.w600),
),
),
],
),
),
],
),
],
),
),
],
),
);
}
}
The `_SimpleCard` widget is a stateful widget that represents a simple card view with an image, title, description, like count, and view count.
Inside the `_SimpleCard` widget, we use a `Card` widget as the main container. It contains a column of widgets, including an `Image` widget to display the card's image, a `Container` widget for the card's content, and various text widgets to display the title, description, like count, and view count.
Conclusion
In this blog post, we have learned how to create a post card view in Flutter. We created a `PostCard` widget to display recent posts and used a custom `_SimpleCard` widget to represent the individual post cards.
By customizing the properties and content of the `_SimpleCard` widget, you can easily adapt it to fit your specific needs and create a visually appealing post card view for your Flutter application.
I hope you found this blog post helpful in creating a post card view in Flutter.
Comments
Post a Comment