How to Create an Interactive Learning Platform in FlutterFlow

Create a 'courses' top-level collection with fields: title (String), description (String), thumbnailUrl (String), instructorName (String), totalLessons (Integer), estimatedMinutes (Integer), difficulty (String), category (String), publishedAt (Timestamp), isPublished (Boolean). Each course has a 'lessons' subcollection with: lessonIndex (Integer), title (String), type (String — 'video', 'text', 'quiz'), videoUrl (String, nullable), textContent (String, nullable), estimatedMinutes (Integer). Create an 'enrollments' collection at users/{userId}/enrollments/{courseId} with: enrolledAt (Timestamp), completedLessons (Array of lesson document IDs), completionPercentage (Double, 0-100), completedAt (Timestamp, nullable), certificateUrl (String, nullable).

Create a Course Catalog page with a GridView widget set to 2 columns (3 on tablet breakpoint). Each grid card shows: the course thumbnail image (16:9 aspect ratio), category label, course title, instructor name, estimated time, difficulty badge, and an enrollment status indicator. For the enrollment indicator, create a Firestore query on the current user's enrollments/{courseId} document — if it exists, show a 'Continue' button with progress bar; if it doesn't exist, show an 'Enroll' button. Add a search bar at the top to filter courses by title using FlutterFlow's local filtering action. Add a category filter row with horizontally scrolling chips.

Create a Lesson page that accepts a lessonId page parameter. Load the lesson document from Firestore and conditionally show the correct lesson type widget using Conditional widgets based on the lesson's 'type' field. Video lessons: use a YouTube player URL in a WebView widget (or the youtube_player_flutter Custom Widget for better control). Text lessons: use a scrollable Column with RichText for formatted content or a flutter_html Custom Widget for HTML content. Quiz lessons: use a Column with question Text, multiple choice RadioButton options, a Submit button, and a score display. Each lesson type includes a 'Mark Complete' button at the bottom that triggers the progress update action.

Create a Custom Action called 'markLessonComplete' that takes the courseId and lessonId. It first checks if the lesson is already in the completedLessons array to prevent duplicate completions. If not already completed, it performs a Firestore update using arrayUnion to add the lessonId to completedLessons, and calculates the new completionPercentage based on the course's totalLessons field. It also updates a lastAccessedAt timestamp. The action returns the new completionPercentage. After calling this action, update a Page State variable with the result for an immediate progress bar update.

1import 'package:cloud_firestore/cloud_firestore.dart';
2
3Future<double> markLessonComplete(
4  String userId,
5  String courseId,
6  String lessonId,
7  int totalLessons,
8) async {
9  final enrollmentRef = FirebaseFirestore.instance
10      .collection('users')
11      .doc(userId)
12      .collection('enrollments')
13      .doc(courseId);
14
15  final enrollmentDoc = await enrollmentRef.get();
16  if (!enrollmentDoc.exists) {
17    debugPrint('Enrollment not found for course: $courseId');
18    return 0.0;
19  }
20
21  final data = enrollmentDoc.data()!;
22  final completedLessons = List<String>.from(
23    (data['completedLessons'] as List? ?? []).map((e) => e.toString()),
24  );
25
26  // Already completed — return current percentage
27  if (completedLessons.contains(lessonId)) {
28    return (data['completionPercentage'] as num?)?.toDouble() ?? 0.0;
29  }
30
31  // Add lesson and recalculate percentage
32  final newCompletedCount = completedLessons.length + 1;
33  final newPercentage = totalLessons > 0
34      ? (newCompletedCount / totalLessons) * 100
35      : 0.0;
36
37  final updateData = <String, dynamic>{
38    'completedLessons': FieldValue.arrayUnion([lessonId]),
39    'completionPercentage': newPercentage,
40    'lastAccessedAt': FieldValue.serverTimestamp(),
41  };
42
43  if (newPercentage >= 100) {
44    updateData['completedAt'] = FieldValue.serverTimestamp();
45  }
46
47  await enrollmentRef.update(updateData);
48  return newPercentage;
49}

Create a Firebase Cloud Function triggered by a Firestore onCreate event on enrollment documents where completedAt is set. The function uses the pdfkit npm package to generate a certificate PDF: it fetches the user's name and email from the users collection, the course title from the courses collection, and generates a formatted PDF with the user's name, course name, completion date, and a unique certificate ID. Upload the PDF to Firebase Storage and update the enrollment document's certificateUrl field. In your FlutterFlow app, show a 'Download Certificate' button when certificateUrl is not null.