Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated NewsItemCard Widget #18

Merged
merged 4 commits into from
Oct 17, 2023
Merged

Updated NewsItemCard Widget #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2bd6936
Update design of NewsItemWidget
Abhay-N-J Oct 16, 2023
9e9f5d6
Merge branch 'main' of github.com:Abhay-N-J/PES-BUZZ
Abhay-N-J Oct 16, 2023
7617c43
Update design of NewsItemWidget
Abhay-N-J Oct 17, 2023
774b474
Update design of NewsItemWidget
Abhay-N-J Oct 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 96 additions & 131 deletions lib/screens/event_detail_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,153 +17,118 @@ class EventDetailScreen extends StatelessWidget {
elevation: 0,
),
extendBodyBehindAppBar: true,
body: SingleChildScrollView( // Use ListView if adding another child...
// physics: const BouncingScrollPhysics(),
// padding: const EdgeInsets.all(0),
child:
Stack(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
width: double.infinity,
),
ImageContainer(
height: MediaQuery.of(context).size.height * 0.45,
width: double.infinity,
padding: const EdgeInsets.all(20),
borderRadius: const BorderRadius.only(topLeft: Radius.circular(20), topRight: Radius.circular(20)),
imageUrl: newsItem.imageUrl,
body: SingleChildScrollView(
// Use ListView if adding another child...
// physics: const BouncingScrollPhysics(),
// padding: const EdgeInsets.all(0),
child: Stack(
children: [
SizedBox(
height: MediaQuery.of(context).size.height,
width: double.infinity,
),
ImageContainer(
height: MediaQuery.of(context).size.height * 0.45,
width: double.infinity,
padding: const EdgeInsets.all(20),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20), topRight: Radius.circular(20)),
imageUrl: newsItem.imageUrl,
),
Positioned(
top: MediaQuery.of(context).size.height * 0.4,
child: Container(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
decoration: const BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(1, 1),
color: Colors.grey)
],
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
),
Positioned(
top: MediaQuery.of(context).size.height * 0.4,
child: Container(
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.6,
decoration: const BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 10,
offset: Offset(1, 1),
color: Colors.grey)
],
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20)),
),
child: ListView(
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(10)),
color: Colors.grey,
),
child: Text(
newsItem.clubName,
style: Theme.of(context)
.textTheme
.headlineSmall!
.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
Flexible(
child: Container(
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(10)),
color: Colors.grey,
),
Text(
newsItem.date,
child: Text(
overflow: TextOverflow.ellipsis,
newsItem.clubName,
style: Theme.of(context)
.textTheme
.headlineSmall!
.labelLarge!
.copyWith(
// fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
],
),
// const SizedBox(height: 20),
const SizedBox(height: 10),
Text(
newsItem.headline,
style: Theme.of(context)
.textTheme
.headlineSmall!
.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
const SizedBox(
height: 10,
),
),
Text(
newsItem.description,
style: Theme.of(context)
.textTheme
.bodyLarge!
.copyWith(
fontWeight: FontWeight.w500,
fontSize: 20,
overflow: TextOverflow.ellipsis,
newsItem.date,
style:
Theme.of(context).textTheme.bodyLarge!.copyWith(
// fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
const SizedBox(
height: 10,
),
]),
),
),
],
],
),
// const SizedBox(height: 20),
const SizedBox(height: 10),
Text(
newsItem.headline,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.headlineSmall!
.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
const SizedBox(
height: 10,
),
Text(
newsItem.description,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 20,
height: 1.25,
color: Colors.black),
),
const SizedBox(
height: 10,
),
]),
),
),
// Text("This is the bottom content"),
),

// children: Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// const SizedBox(height: 16.0),
// Text('Date: ${newsItem.date}'),
// Text('Club Name: ${newsItem.clubName}'),
// Text('Description: ${newsItem.description}'),
// Add more event details as needed
],
),
// Text("This is the bottom content"),
),
);
}
}

// class ImageContainer extends StatelessWidget {
// const ImageContainer({
// super.key,
// required this.newsItem,
// this.child,
// });

// final NewsItemModel newsItem;
// final Widget? child;

// @override
// Widget build(BuildContext context) {
// return Container(
// height: MediaQuery.of(context).size.height * 0.45,
// width: double.infinity,
// padding: const EdgeInsets.all(20),
// decoration: BoxDecoration(
// borderRadius: const BorderRadius.only(
// topLeft: Radius.circular(20), topRight: Radius.circular(20)),
// color: Colors.black,
// image: DecorationImage(
// image: NetworkImage(newsItem.imageUrl), fit: BoxFit.cover),
// ),
// child: child,
// );
// }
// }
10 changes: 6 additions & 4 deletions lib/widgets/image_container.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
import 'package:flutter/material.dart';


class ImageContainer extends StatelessWidget {
const ImageContainer({
Key? key,
this.height = 125,
this.height,
required this.borderRadius,
required this.width,
required this.imageUrl,
this.padding,
this.margin,
this.child,
this.boxShadow,
}) : super(key: key);

final double width;
final double height;
final double? height;
final String imageUrl;
final EdgeInsets? padding;
final EdgeInsets? margin;
final BorderRadius? borderRadius;
final Widget? child;
final List<BoxShadow>? boxShadow;

@override
Widget build(BuildContext context) {
Expand All @@ -34,8 +35,9 @@ class ImageContainer extends StatelessWidget {
image: NetworkImage(imageUrl),
fit: BoxFit.cover,
),
boxShadow: boxShadow,
),
child: child,
);
}
}
}
1 change: 1 addition & 0 deletions lib/widgets/list_view_builder_tab.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class ListViewBuilderByTab extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: newsItems.length,
itemBuilder: (context, index) {
final newsItem = newsItems[index];
Expand Down
84 changes: 65 additions & 19 deletions lib/widgets/news_item_card.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,78 @@
import 'package:flutter/material.dart';
import 'package:pesbuzz/widgets/image_container.dart';
import '/models/news_item_model.dart';
import '/screens/event_detail_screen.dart';

class NewsItemCard extends StatelessWidget {
final NewsItemModel newsItem;

NewsItemCard({required this.newsItem});
const NewsItemCard({super.key, required this.newsItem});

@override
Widget build(BuildContext context) {
return Card(
color: Colors.white,
child: ListTile(
leading: Container(
padding: const EdgeInsets.all(8.0),
child: Image.network(newsItem.imageUrl),
),
title: Text(newsItem.headline,
style: const TextStyle(fontWeight: FontWeight.bold)),
subtitle: Text('${newsItem.clubName} | ${newsItem.date}'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EventDetailScreen(newsItem: newsItem),
),
);
},
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EventDetailScreen(newsItem: newsItem),
),
);
},
child: Row(
children: [
ImageContainer(
// padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(20),
borderRadius: const BorderRadius.all(Radius.circular(20)),
boxShadow: const [
BoxShadow(
blurRadius: 10,
offset: Offset(1, 1),
color: Colors.grey,
),
],
width: MediaQuery.of(context).size.width * 0.3,
height: MediaQuery.of(context).size.height * 0.15,
imageUrl: newsItem.imageUrl,
),
Flexible(
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Container(
// height: MediaQuery.of(context).size.height * 0.4,
padding: const EdgeInsets.all(5),
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: Colors.grey,
),
child: Text(
newsItem.clubName,
style: Theme.of(context).textTheme.bodyLarge!.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
),
Text(
newsItem.headline,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.headlineSmall!.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
Text(
newsItem.date,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.bodySmall!.copyWith(
fontWeight: FontWeight.bold,
height: 1.25,
color: Colors.black),
),
]),
),
],
),
);
}
Expand Down