How to Set Up a Community Forum or Discussion Board in FlutterFlow

Create a categories collection with fields: name (String), description (String), icon (String — icon name like 'chat_bubble' or emoji), order (Integer for display sorting), and threadCount (Integer — denormalized, incremented on new thread). Create a threads collection with fields: categoryId (String), authorId (String), authorName (String — denormalized), title (String), body (String), replyCount (Integer — denormalized), lastReplyAt (Timestamp), isPinned (Boolean, default false), isLocked (Boolean, default false), createdAt (Timestamp), and upvotes (Integer, default 0). Create a subcollection threads/{id}/replies with: authorId (String), authorName (String), body (String), timestamp (Timestamp), and upvotes (Integer, default 0). Add 3-4 test categories (General, Help, Feature Requests, Off-Topic) with a few threads and replies each.

Create a CategoriesPage with a ListView bound to a Backend Query on categories ordered by order ascending. Each list item is a Container with a Row: an Icon widget (mapped from the icon field via a Custom Function or hardcoded per category), a Column with the category name in bodyLarge bold and description in bodySmall secondary color, and a Badge Container (circular, primary color) showing threadCount. On Tap, navigate to ThreadListPage passing the categoryId and category name as parameters. Add an AppBar with the forum name and a search IconButton that navigates to a SearchPage for finding threads across all categories.

Create a ThreadListPage that receives categoryId as a parameter. Add a ListView bound to a Backend Query on threads where categoryId == parameter, ordered by isPinned descending then lastReplyAt descending. This puts pinned threads at the top and sorts the rest by most recent activity. Each thread row shows: a pin Icon (Conditional Visibility: isPinned == true), the title in bodyLarge bold, a Row with authorName + relative time from createdAt, a Row showing a reply icon with replyCount text and an upvote icon with upvotes count, and a lock Icon if isLocked == true. On Tap, navigate to ThreadDetailPage with the thread document reference. Add a FAB for creating a new thread: opens a page with TextField for title, TextField (multiline) for body, and a Post button that creates the thread document and increments the category's threadCount using FieldValue.increment(1).

Create ThreadDetailPage receiving the thread document reference. At the top, display the original post: title in headlineSmall, author info Row (CircleImage avatar + authorName + relative time), and body Text. Below, add a Divider and a Text showing 'X Replies'. Then a ListView bound to the replies subcollection ordered by timestamp ascending. Each reply is a Container with: author info Row (avatar + name + relative time), body Text, and an upvote/downvote Row — IconButton thumb_up that increments the reply's upvotes field, a Text showing the count, and IconButton thumb_down that decrements. To prevent duplicate votes, create a subcollection replies/{id}/voters with voter UID documents. Check if current user exists in voters before allowing the vote. If the thread is not locked, show a reply input at the bottom: TextField (multiline) + Send IconButton. The send action creates a reply document and updates the thread's replyCount (FieldValue.increment(1)) and lastReplyAt to now.

For admin users (check currentUserDocument.role == admin), add a PopupMenuButton on each thread in the list and on the thread detail page with options: Pin/Unpin Thread (toggles isPinned boolean), Lock/Unlock Thread (toggles isLocked — locked threads hide the reply input), and Delete Thread (sets a deleted boolean or removes the document, decrements category threadCount). On the thread detail page, add a Report button for regular users that creates a document in a reports collection with threadId, reporterId, reason, and timestamp for admin review. When a thread is locked, show a banner: 'This thread is locked. No new replies can be posted.' and hide the reply TextField using Conditional Visibility on isLocked == false.