How to Create a Virtual Event Platform in FlutterFlow

In the Firebase Console, create an `events` collection with fields: title (String), description (String), startTime (Timestamp), endTime (Timestamp), type (String — webinar, conference, or workshop), streamUrl (String), maxAttendees (int), hostId (String), recordingUrl (String), and isLive (bool). Then create a subcollection `events/{eventId}/attendees` with fields: userId (String), registeredAt (Timestamp), and hasJoined (bool). Back in FlutterFlow, go to the Firestore tab and import both schemas so they appear in your Backend Query options.

Create an Events page with a Backend Query on the `events` collection ordered by startTime ascending. Drag a ListView and bind it to the query results. Inside each list item, add a Container with the event title (Text), date and time formatted with a Custom Function, event type badge (Container with colored background), and attendee count. Add a Register button that creates a new document in the `attendees` subcollection with the current user's ID, sets registeredAt to the current timestamp, and hasJoined to false. Use Conditional Visibility to show 'Registered' text instead of the button if the user already has an attendee document.

Create a Custom Widget named LiveStreamPlayer with a Component Parameter streamUrl (String). In the build method, return a SizedBox wrapping a WebView widget that loads the streamUrl (e.g., a YouTube Live embed URL like https://www.youtube.com/embed/VIDEO_ID?autoplay=1). Set the widget height to 250 and width to double.infinity. On the Event Detail page, add this Custom Widget and bind the streamUrl parameter to the event document's streamUrl field. Wrap it in Conditional Visibility that checks event.isLive == true so the player only appears during live broadcasts.

1// Custom Widget: LiveStreamPlayer
2import 'package:flutter/material.dart';
3import 'package:webview_flutter/webview_flutter.dart';
4
5class LiveStreamPlayer extends StatefulWidget {
6  final double width;
7  final double height;
8  final String streamUrl;
9
10  const LiveStreamPlayer({
11    Key? key,
12    required this.width,
13    required this.height,
14    required this.streamUrl,
15  }) : super(key: key);
16
17  @override
18  State<LiveStreamPlayer> createState() => _LiveStreamPlayerState();
19}
20
21class _LiveStreamPlayerState extends State<LiveStreamPlayer> {
22  late final WebViewController _controller;
23
24  @override
25  void initState() {
26    super.initState();
27    _controller = WebViewController()
28      ..setJavaScriptMode(JavaScriptMode.unrestricted)
29      ..loadRequest(Uri.parse(widget.streamUrl));
30  }
31
32  @override
33  Widget build(BuildContext context) {
34    return SizedBox(
35      width: widget.width,
36      height: widget.height,
37      child: WebViewWidget(controller: _controller),
38    );
39  }
40}

Create a subcollection `events/{eventId}/messages` with fields: senderId (String), displayName (String), text (String), and timestamp (Timestamp). On the Event Detail page below the video player, add a Column with a ListView bound to a Backend Query on the messages subcollection ordered by timestamp descending. Set Single Time Query to OFF for real-time updates. Inside each list item, show the sender's displayName in bold followed by the message text. At the bottom, add a Row with a TextField for message input and a Send IconButton. The Send action creates a new document in the messages subcollection with the current user info and the text value, then clears the TextField.

Create a subcollection `events/{eventId}/questions` with fields: userId (String), displayName (String), text (String), upvotes (int), isAnswered (bool), and timestamp (Timestamp). Add a TabBar on the event detail page with two tabs: Chat and Q&A. In the Q&A tab, add a ListView bound to the questions subcollection ordered by upvotes descending. Each item shows the question text, author name, upvote count, and an upvote IconButton. The upvote action uses FieldValue.increment(1) on the upvotes field. To prevent double-voting, create a subcollection `questions/{questionId}/voters` and check for the current user's document before allowing the upvote. The host sees an 'Mark Answered' button (Conditional Visibility: currentUser.uid == event.hostId) that sets isAnswered to true.

After the event ends, the host updates the event document to set isLive to false and add the recordingUrl field pointing to the saved stream recording. On the Event Detail page, add a Conditional Visibility block that shows when isLive is false AND recordingUrl is not empty — display a Video Player widget or WebView with the recording URL. Below it, add a feedback section: a StarRating widget (1-5) and a TextField for comments. On submit, create a document in `events/{eventId}/feedback` with the user's rating, comment, and timestamp. Show a summary of average rating using a Custom Function that queries the feedback subcollection.