How to perform the CRUD operations in Flutter Calendar using Firebase database
In the Flutter Event Calendar, perform the CRUD operation on appointments using Firebase database.
Refer the following guidelines to create the Firebase database.
https://firebase.google.com/docs/flutter/setup?platform=android#create-firebase-project
Refer the following article to add the appointments to Firebase database and show the same in the Flutter calendar.
STEP 1: Add the required packages in Pubspec.yaml.
syncfusion_flutter_calendar: ^19.1.58 firebase_core: ^1.1.0 cloud_firestore: ^1.0.7 firebase_database: ^6.1.2
STEP 2: Fetch the data from the created database and subscribe the listener for Firebase database query using listen method. Unsubscribe by using cancel method.
getDataFromDatabase() async {
var getValue = await meetingQuery.once();
wireEvents(meetingQuery);
return getValue;
}
void wireEvents(Query meetingQuery) {
onMeetingAddedSubscription =
meetingQuery.onChildAdded.listen(onMeetingAdded);
onMeetingDeletedSubscription =
meetingQuery.onChildRemoved.listen(onMeetingRemoved);
onMeetingUpdatedSubscription =
meetingQuery.onChildChanged.listen(onMeetingChanged);
}
@override
void dispose() {
onMeetingAddedSubscription.cancel();
onMeetingDeletedSubscription.cancel();
onMeetingUpdatedSubscription.cancel();
super.dispose();
}
STEP 3: In initState() populate the appointments from the Firebase database, using the fetched result by converting to the custom appointment.
@override
void initState() {
_initializeEventColor();
meetingQuery = fireBaseInstance
.child("CalendarAppointmentCollection")
.orderByChild('Subject');
getDataFromDatabase().then((results) {
setState(() {
if (results != null) {
querySnapshot = results;
var collection = <Meeting>[];
Map<dynamic, dynamic> values = querySnapshot.value;
List<dynamic> key = values.keys.toList();
if (values != null) {
for (int i = 0; i < key.length; i++) {
var data = values[key[i]];
final Random random = new Random();
collection.add(Meeting.map(
data, _colorCollection[random.nextInt(9)], key[i]));
}
}
events = _getCalendarDataSource(collection);
}
});
});
super.initState();
}
static Meeting map(dynamic data, Color color, String key) {
return Meeting(
eventName: data['Subject'],
from: DateFormat('dd/MM/yyyy HH:mm:ss').parse(data['StartTime']),
to: DateFormat('dd/MM/yyyy HH:mm:ss').parse(data['EndTime']),
background: color,
key: key,
isAllDay: false);
}
STEP 4: From the onChildAdded, onChildRemoved, onChildChanged notify the listeners of the Firebase database query. Flutter calendar can update its view by using notifyListeners with appropriate action.
onMeetingAdded(Event event) {
if (!isInitialLoaded) {
return;
}
if (event.snapshot.value != null) {
final Random random = new Random();
Meeting meeting = Meeting.fromSnapShot(
event.snapshot, _colorCollection[random.nextInt(9)]);
events.appointments.add(meeting);
events.notifyListeners(CalendarDataSourceAction.add, [meeting]);
}
}
onMeetingRemoved(Event event) {
if (!isInitialLoaded) {
return;
}
if (event.snapshot.value != null) {
int index = events.appointments
.indexWhere((element) => element.key == event.snapshot.key);
Meeting meeting = events.appointments[index];
events.appointments.remove(meeting);
events.notifyListeners(CalendarDataSourceAction.remove, [meeting]);
}
}
onMeetingChanged(Event event) {
if (!isInitialLoaded) {
return;
}
if (event.snapshot.value != null) {
final Random random = new Random();
Meeting meeting = Meeting.fromSnapShot(
event.snapshot, _colorCollection[random.nextInt(9)]);
events.appointments.remove(meeting);
events.notifyListeners(CalendarDataSourceAction.remove, [meeting]);
events.appointments.add(meeting);
events.notifyListeners(CalendarDataSourceAction.add, [meeting]);
}
}
|
