import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:chipin_blogpost/features/authentication/services/auth_service.dart';
import 'package:chipin_blogpost/features/events/models/attendee_model.dart';
import 'package:chipin_blogpost/features/events/models/event_model.dart';
import 'package:chipin_blogpost/features/events/services/event_service.dart';
class EventDetailsScreen extends StatefulWidget {
final MyEventModel event;
EventDetailsScreen({required this.event});
@override
State<EventDetailsScreen> createState() => _EventDetailsScreenState();
}
class _EventDetailsScreenState extends State<EventDetailsScreen> {
Future<void> joinEvent(MyEventModel event) async {
AttendeesModel myAttendeeModel = AttendeesModel(
eventId: event.eventId,
userId: currentUserId,
);
bool result = await EventService.joinEvent(myAttendeeModel);
if (result) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Successfully joined event!'),
duration: Duration(seconds: 2),
),
);
} else {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Failed to join event. Please try again.'),
duration: Duration(seconds: 2),
),
);
}
}
String currentUserId = '';
@override
void initState() {
super.initState();
getCurrentUserId();
}
Future<void> getCurrentUserId() async {
currentUserId = await AuthService.getCreatorId();
}
@override
Widget build(BuildContext context) {
final dateFormat = DateFormat('EEEE, MMMM d, y');
final timeFormat = DateFormat('h:mm a');
return Scaffold(
appBar: AppBar(
title: const Text('Event Details'),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.event.title,
style: const TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
const SizedBox(height: 16.0),
Table(
columnWidths: const {
0: FlexColumnWidth(2),
1: FlexColumnWidth(3),
},
border: TableBorder.all(),
children: [
_buildTableRow(
'Date',
dateFormat.format(widget.event.dateTime),
Icons.calendar_today,
),
_buildTableRow(
'Time',
timeFormat.format(widget.event.dateTime),
Icons.access_time,
),
_buildTableRow(
'Location',
widget.event.location,
Icons.location_on,
),
_buildTableRow(
'Description',
widget.event.description,
Icons.description,
),
],
),
const SizedBox(height: 16.0),
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>',
),
const SizedBox(height: 16.0),
ElevatedButton(
onPressed: () => joinEvent(widget.event),
child: const Text('Join Event'),
),
],
),
),
);
}
TableRow _buildTableRow(String label, String value, IconData icon) {
return TableRow(
children: [
TableCell(
child: Row(
children: [
Icon(icon),
const SizedBox(width: 8.0),
Text(label),
],
),
),
TableCell(
child: Text(value),
),
],
);
}
}
- Importing Packages:
- The code begins by importing necessary packages that provide additional functionalities and components to the app. These packages include:
flutter/material.dart
: Contains widgets and classes for building user interfaces.
intl/intl.dart
: Provides date and time formatting capabilities.
chipin_blogpost/features/authentication/services/auth_service.dart
: Contains authentication-related services.
chipin_blogpost/features/events/models/attendee_model.dart
: Defines the model for event attendees.
chipin_blogpost/features/events/models/event_model.dart
: Defines the model for events.
chipin_blogpost/features/events/services/event_service.dart
: Provides services related to events.
- Defining the EventDetailsScreen Widget:
- The
EventDetailsScreen
class is declared as a stateful widget using the class
keyword.
- It takes a required parameter
event
of type MyEventModel
, representing the event to be displayed.
- The
@override
annotation is used to override the default behavior of the widget's methods.
- Defining the State for EventDetailsScreen:
- Inside the
EventDetailsScreen
class, the _EventDetailsScreenState
class is defined as the associated state class.
- This state class extends
State<EventDetailsScreen>
, indicating that it manages the state for the EventDetailsScreen
widget.
- joinEvent() Function:
- The
joinEvent
function is defined within the _EventDetailsScreenState
class.
- It is an asynchronous function denoted by the
Future<void>
return type, meaning it can perform tasks asynchronously.
- The function takes an
event
parameter of type MyEventModel
, representing the event to join.
- Inside the function, an
AttendeesModel
object is created, representing the user's attendance for the event.
- The
EventService.joinEvent
method is called to attempt joining the user to the event, returning a boolean result.
- Depending on the result, a SnackBar is displayed with a success or failure message using
ScaffoldMessenger.of(context).showSnackBar
.
- Initializing currentUserId:
- A variable called
currentUserId
is declared and initialized as an empty string.
- It will be used to store the ID of the current user.
- initState() Function:
- The
initState
function is an overridden method from the State
class that is called when the stateful widget is inserted into the widget tree.
- In this case, it calls the
getCurrentUserId
function to fetch the current user's ID.
- getCurrentUserId() Function:
- The
getCurrentUserId
function is defined within the _EventDetailsScreenState
class.
- It is an asynchronous function that retrieves the current user's ID using the
AuthService.getCreatorId()
method.
- The
currentUserId
variable is assigned the fetched ID.
- Building the Widget Tree in build() Method:
- The
build
method is responsible for building the widget tree that represents the UI of the screen.
- It takes a
BuildContext
object as a parameter, representing the context in which the widget is being built.
- The method returns a
Scaffold
widget, which provides a basic layout structure for the screen.
- Formatting Date and Time:
- Two
DateFormat
instances are created: dateFormat
and timeFormat
.
- They are used to format the event's date and time, respectively, according to specified patterns.
- AppBar:
- An
AppBar
widget is displayed at the top of the screen, providing a header with a title.
- SingleChildScrollView and Column:
- The
body
property of the Scaffold
widget is set to a SingleChildScrollView
widget.
- The purpose of
SingleChildScrollView
is to enable scrolling if the content within overflows the screen.
- Inside the
SingleChildScrollView
, a Column
widget is used to arrange the various components vertically.
- Displaying Event Details:
- The event's title is displayed using a
Text
widget with specific styling properties.
- A
Table
widget is used to display the event details in a tabular format.
- Each row in the table is created using the
_buildTableRow
function, which takes a label, value, and icon.
- The event's date, time, location, and description are displayed using the
_buildTableRow
function.
- An image is displayed using the
Image.network
widget, loading the image from a specified URL.
- Join Event Button:
- An
ElevatedButton
widget is displayed, labeled as "Join Event".
- When the button is pressed, it calls the
joinEvent
function, passing the current event as a parameter.
- _buildTableRow() Function:
- The
_buildTableRow
function is a helper function defined within the _EventDetailsScreenState
class.
- It takes a
label
, value
, and icon
as parameters.
- The function returns a
TableRow
widget that represents a row in the table.
- Each row consists of two
TableCell
widgets: one displaying an icon and label, and the other displaying the corresponding value.