Creating a News Card View in Flutter
In this blog post, we will explore how to create a news card view in Flutter. We will design a card that displays a news article with an image, title, date, content, and a "READ MORE" button.
Let's get started!
Setting up the Project
First, let's set up a new Flutter project. Open your preferred IDE and create a new Flutter project. 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: 'Card View',
theme: ThemeData(
primarySwatch: Colors.orange,
),
home: NewsCard(),
);
}
}In the above code, we define the `MyApp` widget as the entry point of our application. It is a stateless widget that returns a `MaterialApp` widget. The `MaterialApp` sets the app's title and theme and sets the `home` property to `NewsCard`, which will be our main screen.
Creating the News Card Widget
Next, let's create the `NewsCard` widget, which represents our news card view. Replace the contents of the `lib/main.dart` file with the following code:
import 'package:flutter/material.dart';
class NewsCard extends StatelessWidget {
final String _newsContent =
"Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("News"),
),
body: Card(
elevation: 2,
margin: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Image(
image: const NetworkImage(
"https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
),
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
Container(
padding: const EdgeInsets.all(8),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text(
"March 20, 2020",
style: TextStyle(fontWeight: FontWeight.w700),
),
Container(
margin: const EdgeInsets.only(right: 8, top: 8),
child: const Text(
"Is Samsung selling QLED monitors?",
style: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 18,
),
),
),
Container(
margin: const EdgeInsets.only(top: 16),
child: Text(
_newsContent,
style: const TextStyle(fontWeight: FontWeight.w500),
),
),
Container(
margin: const EdgeInsets.only(top: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
margin: const EdgeInsets.only(left: 16),
child: const Icon(
Icons.remove_red_eye_outlined,
size: 20,
),
),
Container(
margin: const EdgeInsets.only(left: 8),
child: Text(
"220".toString(),
style: const TextStyle(
fontWeight: FontWeight.w800,
),
),
),
],
),
),
const SizedBox(height: 16),
Center(
child: ElevatedButton(
onPressed: () {},
child: const Text(
"READ MORE",
style: TextStyle(fontWeight: FontWeight.w700),
),
),
),
],
),
],
),
),
],
),
),
);
}
}In the `NewsCard` widget, we define the `_newsContent` variable to hold the dummy news content. Inside the `build` method, we return a `Scaffold` widget as the main container for our news card.
Within the `Scaffold`, we use the `Card` widget to create the card view. We set the `elevation` property to `2` to give the card a slight shadow effect. The `margin` property adds some spacing around the card.
Inside the `Card`, we use a `Column` widget to arrange the card's content vertically. The first child of the `Column` is an `Expanded` widget containing an `Image` widget. The `Expanded` widget allows the image to take up the remaining vertical space.
The `Image` widget displays the news article image using the `NetworkImage` class. We set the image's width to the full width of the screen using `MediaQuery.of(context).size.width` and ensure it covers the available space using `fit: BoxFit.cover`.
Below the `Image`, we have a `Container` with padding that wraps the remaining content of the card. Inside this `Container`, we use another `Column` widget to stack the different text elements vertically.
We include the date, title, news content, and a row containing the eye icon and view count. Finally, we add a "READ MORE" button using the `ElevatedButton` widget.
Running the App
Save the changes and run the app on an emulator or a physical device. You should see the news card view with the provided dummy content displayed on the screen. The card should have an image, title, date, content, view count, and a "READ MORE" button.
Feel free to customize the card's design, replace the dummy content with real data, or add more functionality to suit your application's requirements.
That's it! You have successfully created a news card view in Flutter.
Happy coding!
Comments
Post a Comment