import 'package:chipin_blogpost/features/events/models/event_model.dart';
import 'package:chipin_blogpost/features/events/views/event_details.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class EventCard extends StatelessWidget {
final MyEventModel event;
final bool showJoinButton;
final VoidCallback? onJoinPressed;
const EventCard({
required this.event,
this.showJoinButton = false,
this.onJoinPressed,
});
@override
Widget build(BuildContext context) {
// Format the date and time to display in a readable format
final formattedDate = DateFormat('EEE, MMM d, y').format(event.dateTime);
final formattedTime = DateFormat('h:mm a').format(event.dateTime);
return GestureDetector(
onTap: () {
// Navigate to the event details screen when the card is tapped
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => EventDetailsScreen(event: event),
),
);
},
child: Container(
margin: const EdgeInsets.symmetric(vertical: 8.0),
decoration: BoxDecoration(
color: Colors.transparent, // Updated to a transparent color
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Display the event image
Image.network(
'<https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80>',
fit: BoxFit.cover,
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Display the event title
Text(
event.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.black,
),
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
const SizedBox(height: 23.0),
Row(
children: [
const Icon(
Icons.access_time,
size: 16.0,
),
const SizedBox(width: 4.0),
Text(
'$formattedDate at $formattedTime',
style: const TextStyle(
fontSize: 15.0,
),
),
],
),
const SizedBox(height: 16.0),
Row(
children: [
const Icon(
Icons.location_on,
size: 16.0,
),
const SizedBox(width: 4.0),
Text(
event.location,
style: const TextStyle(
fontSize: 15.0,
),
),
],
),
const SizedBox(height: 16.0),
Row(
children: [
const Icon(
Icons.account_circle,
size: 16.0,
),
const SizedBox(width: 4.0),
Text(
'Created by ${event.creatorId}',
style: const TextStyle(
fontSize: 15.0,
),
),
],
),
const SizedBox(height: 16.0),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Icon(
Icons.description,
size: 16.0,
),
const SizedBox(width: 4.0),
Expanded(
child: Text(
event.description,
style: const TextStyle(
fontSize: 15.0,
),
),
),
],
),
],
),
),
if (showJoinButton)
ElevatedButton(
onPressed: onJoinPressed,
child: const Text('Join'),
),
],
),
),
);
}
}
- Importing Packages:
- The code starts by importing necessary packages required for the code to work correctly.
- These packages include:
chipin_blogpost/features/events/models/event_model.dart: Contains the event model definition.chipin_blogpost/features/events/views/event_details.dart: Contains the screen for displaying event details.flutter/material.dart: Provides widgets and classes for building user interfaces.intl/intl.dart: Provides date and time formatting capabilities.
- Defining the EventCard Widget:
- The
EventCard class is declared as a stateless widget using the class keyword.
- It represents a card that displays event information.
- It takes several parameters including
event, showJoinButton, and onJoinPressed.
- build() Method:
- The
build method is responsible for building the widget tree that represents the UI of the card.
- It takes a
BuildContext object as a parameter, representing the context in which the widget is being built.
- The method returns a
GestureDetector widget, which detects gestures on its child and triggers the specified actions.
- Formatting Date and Time:
- Two
DateFormat instances are created: formattedDate and formattedTime.
- They are used to format the event's date and time, respectively, according to specified patterns.
- GestureDetector:
- The
onTap property of the GestureDetector widget is set to a function that navigates to the event details screen when the card is tapped.
- It uses the
Navigator.push method to navigate to the EventDetailsScreen, passing the current event as a parameter.
- Container:
- A
Container widget is used as the outermost widget of the card.
- It provides margin, decoration, and constraints to the card.
- Image.network:
- An
Image.network widget is used to display the event image.
- It loads the image from the specified URL and uses
BoxFit.cover to fit the image within its container.
- Padding and Column:
- A
Padding widget is used to add padding around the content within the card.
- Inside the
Padding, a Column widget is used to arrange the various components vertically.
- Displaying Event Information:
- The event's title is displayed using a
Text widget with specific styling properties.
- The
overflow and maxLines properties are used to handle text overflow and limit the number of lines to two.
- The date and time of the event are displayed using a
Row widget, with an icon and the formatted date and time text.
- The event location is displayed in a similar manner, using an icon and the location text.
- The creator of the event is displayed using a
Row widget, showing an icon and the creator's ID.
- The event description is displayed using a
Row widget, showing an icon and the description text.
- The
Expanded widget is used to allow the description text to take up the available horizontal space.
- Join Button (optional):
- If the
showJoinButton parameter is set to true, an ElevatedButton widget is displayed.
- The button's label is set to "Join" and its
onPressed property is set to the onJoinPressed callback.
- When the button is pressed, the
onJoinPressed function, provided as a parameter, will be executed.