How to Build a Learning Management System (LMS) with FlutterFlow

In Firestore, create a top-level courses collection with fields: title (String), description (String), instructorId (String), thumbnailUrl (String), price (Double), category (String), enrollmentCount (Integer, default 0). Under each course document, add a lessons subcollection with fields: title (String), content (String), videoUrl (String), order (Integer), durationMinutes (Integer). Create a separate top-level enrollments collection with fields: userId (String), courseId (String), completedLessonIds (List of Strings, default empty), enrolledAt (Timestamp). Set Firestore rules so any authenticated user can read courses and lessons, but enrollments are restricted to the owning user.

Create a CourseCatalogPage. At the top, add a TextField with a search icon prefix for keyword search and a Row of ChoiceChips bound to an Option Set of categories (Design, Development, Marketing, Business). Below, add a GridView with crossAxisCount 2 bound to a Backend Query on the courses collection. Apply filters: if a category chip is selected, filter where category equals the selected value. For search, use a whereGreaterThanOrEqualTo on the title field with the search text. Each grid item is a Component showing the course thumbnail Image, title Text, instructor name Text, price Text, and enrollmentCount with a people icon. Tap navigates to CourseDetailPage passing the course document reference.

Create CourseDetailPage that receives the course document reference as a parameter. Display the course thumbnail as a hero Image at the top, followed by the title, description, instructor name, and price. Below, add a ListView bound to a Backend Query on the courses/{courseId}/lessons subcollection ordered by the order field ascending. Each lesson row shows an order number, title, durationMinutes, and a checkmark icon. Add an Enroll button at the bottom. The Enroll button's On Tap Action Flow: create a document in the enrollments collection with userId set to the current user's UID, courseId set to this course's ID, completedLessonIds as an empty list, and enrolledAt as the current timestamp. Then use Update Document to increment the course's enrollmentCount by 1 using FieldValue.increment(1). After enrollment, hide the Enroll button and show a Continue Learning button instead using Conditional Visibility based on whether an enrollment doc exists for this user and course.

Create LessonPlayerPage that receives the lesson document reference and the enrollment document reference as parameters. At the top, place a FlutterFlowVideoPlayer widget with its URL set from the lesson's videoUrl field. Below the player, display the lesson title as a heading and the content field as body text. Add a Mark Complete button at the bottom. The On Tap Action Flow: use Update Document on the enrollment doc to add this lesson's ID to the completedLessonIds array using FieldValue.arrayUnion([lessonId]). After the update, show a SnackBar confirming completion and navigate back to the CourseDetailPage. Use Conditional Visibility to hide the Mark Complete button if the lesson ID is already in the enrollment's completedLessonIds array.

On the CourseDetailPage, add a LinearPercentIndicator widget between the course info section and the lesson list. Create a Custom Function called calculateProgress that accepts two parameters: completedCount (Integer) and totalCount (Integer). It returns completedCount / totalCount as a Double (handling division by zero by returning 0.0). Bind the indicator's percent value to this function, passing completedLessonIds.length from the enrollment doc and the lesson list length from the Backend Query result count. Set the progress bar color to your theme's primary color and the background to grey. Next to the indicator, add a Text widget showing the fraction as a string like '3 of 8 lessons complete'. On each lesson row in the ListView, use Conditional Visibility on a checkmark Icon: show it when the lesson's ID is contained in completedLessonIds.

Create an InstructorDashboardPage accessible only to users with an instructor role or matching instructorId. Add a ListView bound to courses where instructorId equals the current user's UID. Each item shows the course title, enrollmentCount, and Edit/Delete IconButtons. The Edit button navigates to a CourseEditPage pre-filled with the course fields. Add a FloatingActionButton to create a new course. On the CourseEditPage, include a Manage Lessons section: a ListView of the course's lessons subcollection with Add Lesson and Delete buttons. The Add Lesson form includes fields for title, videoUrl, content, durationMinutes, and order. On save, create a new document in the lessons subcollection. This lets instructors manage their content without leaving FlutterFlow.