Making a Video Collaboration Platform With Flutter Feed SDK

12 min read

A video collaboration platform is a software application that enables users to share video and/or audio content and collaborate in real-time. This can be used for various purposes, such as online meetings, webinars, and distance learning.

Sacha A.
Sacha A.
Published August 2, 2022
Flutter Video Collaboration Platform

Some examples of video collaboration platforms are Frame.io, Wipster, or Vimeo. They are extremely useful for video editing teams collaborating on a video project.

There are many benefits to using a video collaboration platform, such as:

  • Increased collaboration and productivity
  • Improved communication and coordination
  • Reduced travel costs
  • Enhanced distance learning and training

However, there is no precise answer to this question as it depends on the specific features and requirements of the platform. Some key considerations for coding a video collaboration platform include:

  • A good media player and watching experience.
  • Backend and frontend logic for uploading video.
  • Allowing for real-time communication and interactions between users: one key feature is to be able to comment at a specific timestamp and jump to this timestamp.
  • Notifications.
  • Managing project status.

Stream provides many of these features out of the box, and Flutter has a good ecosystem around the video player, with various plugins, such as Chewie. This article will focus on the collaborative side of things using Streams Activity Feeds SDK.

Why Activity Feeds?

Activity Streams is a specification for syndicating social activities and activity-related information. It is designed to make it easy for users to follow the activities of friends and colleagues across the web.

There are many reasons why you might want to use Activity Streams. For example, you might want to:

  • Keep track of the latest activities from your friends and colleagues.
  • Create a news feed that includes activities from all your social networks.
  • Build a social network that allows users to share activities with each other.
  • Create a video collaboration platform that lets users share and discuss videos.

In this article, we will explore some of the core concepts of activity feeds by making a collaborative video platform and show you how easy it is to integrate with your application.

If you’re completely new to Activity Feeds, we recommend reading our Flutter Feeds Tutorial for a comprehensive getting-started guide. You can also take a look at the Feeds 101 documentation.

How To Make a Video Collaboration Platform Using the Stream Activity Feed SDK for Flutter

In the following sections we'll implement the Flutter code for creating video projects and displaying them.

We are also going to implement the most interesting feature in our project - leaving feedback to a video at a specific timeframe. In order to do so, we will:

  • model video projects as activities
  • create a feed_group of type "video_timeline"
  • use activity's extra_data such as the video_url, the project's description and theproject_name
  • model comments as reactions, in those comments we will store timestamp and the actual text

Creating & Displaying Video Projects

Let's inspect the code that will allow us to create a new video project.

We will need the following:

  • TextFields to fill out the project name and description.
  • Logic to upload the video file.
  • Logic to create a new activity (video project) and store all this information.

To accomplish the above we'll use the UploadListCore widget along with the image_picker package to choose the video from the user’s device. We only need to pick one video file. Then we’ll store all the information in the activity’s extraData field.

Uploading attachments is a common operation, and the Stream Feed Flutter Core package provides convenient controllers and UI to easily upload content.

We are going to need to override the mediaPreviewBuilder callback and implement a VideoPreviewCard widget because by default the core package doesn't handle video previews:

dart
class NewProjectDialog extends StatelessWidget {
  const NewProjectDialog({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    final projectNameController = TextEditingController();
    final projectDescController = TextEditingController();
    final uploadController = FeedProvider.of(context).bloc.uploadController;
    return SimpleDialog(title: const Text('New project'), children: [
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
            controller: projectNameController,
            decoration: const InputDecoration.collapsed(
              hintText: "Enter Project Name",
New video project screen

The file picker is just an icon button, when clicked it takes the user video path and uploads it to the Stream CDN backend using the uploadMedia method. The url will then be available with the getMediaUris method from StreamFeed's Bloc.

dart
class UploadVideoPicker extends StatelessWidget {
  const UploadVideoPicker({
    Key? key,
  }) : super(key: key);

  
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
          icon: const Icon(Icons.file_copy),
          onPressed: () async {
            final ImagePicker _picker = ImagePicker();
            final XFile? video = await _picker.pickVideo(
              source: ImageSource.gallery,

Displaying the Video Projects

We should have a way to display a list of projects on the home screen. We are going to use the FlatFeedCore widget along with a GridView of ProjectPreviewCard.

The FlatFeedCore widget comes from the feeds package and provides easy-to-use builders to display a list of activities. By specifying the feedGroup you can determine which activities the widget should handle. For this application the feed group was set to video_timeline.

dart
class ProjectPreviewBuilder extends StatelessWidget {
  const ProjectPreviewBuilder({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return FlatFeedCore(
      feedGroup: 'video_timeline',
      userId: FeedProvider.of(context).bloc.currentUser!.id,
      loadingBuilder: (context) => const Center(
        child: CircularProgressIndicator(),
      ),
      emptyBuilder: (context) =>
          const Center(child: Text('No video to review')),
      errorBuilder: (context, error) => Center(
        child: Text(error.toString()),
Building your own app? Get early access to our Livestream or Video Calling API and launch in days!
Stream Feed project preview

The ReviewProjectModel is a convenient model where we do our casting operations on activity's extra data.

It makes the code a bit easier to read:

dart
class ReviewProjectModel {
  final EnrichedActivity activity;
  final int reactionCounts;
  final String projectName;
  final String authorName;
  final DateTime publishedDate;
  final String description;
  final String videoUrl;

  ReviewProjectModel({
    required this.activity,
    required this.reactionCounts,
    required this.projectName,
    required this.authorName,
    required this.publishedDate,

The ProjectPreviewCard is just a Card widget that can be clicked. It displays a preview of the video and opens the ReviewProjectPage.

At the top of the ReviewProjectPage page we have the video player, the project's name, author, description and published date. The Chewie boilerplate code was taken from their example repo.

dart
class ReviewProjectPage extends StatefulWidget {
  const ReviewProjectPage({
    Key? key,
    required this.reviewProjectModel,
  }) : super(key: key);
  final ReviewProjectModel reviewProjectModel;

  
  State<ReviewProjectPage> createState() => _ReviewProjectPageState();
}

class _ReviewProjectPageState extends State<ReviewProjectPage> {
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;
  

Leaving Feedback on the Video

We are going to model feedback around reactions and child reactions on the activity we just created with the dialog.

The CommentSectionCard is at the bottom of the ReviewProjectPage. It's a textfield in a Card but when clicked it pauses the video. When the Send button is clicked we retrieve the current player position from the video controller along with the actual comment/feedback.

The VideoPositionIndicator is just a widget that displays the current video position in a performant way.

dart
class CommentSectionCard extends StatelessWidget {
  const CommentSectionCard({
    Key? key,
    required this.videoPlayerController,
    required this.userProfileImage,
    required this.onComment,
  }) : super(key: key);
  final VideoPlayerController videoPlayerController;
  final String userProfileImage;
  final Future<void> Function(int timestamp, String text) onComment;

  
  Widget build(BuildContext context) {
    final textController = TextEditingController();
    return Card(

In the CommentHeader we display the FrameAvatar, the username and the published date (formatted in a fuzzy matter, for example a day ago or a moment ago).

dart
class CommentHeader extends StatelessWidget {
  const CommentHeader({Key? key, required this.commentModel}) : super(key: key);
  final FrameCommentModel commentModel;

  
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          FrameAvatar(url: commentModel.avatarUrl),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(

The frame comment model stores reaction extra data.

dart
class FrameCommentModel {
  final int? timestamp;
  final DateTime date;
  final String text;
  final String username;
  final String avatarUrl;
  final int? numberOfLikes;
  final int? numberOfComments;
  final String lookupValue;
  final bool isLikedByUser;
  const FrameCommentModel({
    this.timestamp,
    required this.date,
    required this.text,
    required this.username,

In the content widget, we need an interactive text for the timestamp. When the timestamp is clicked, the player should advance the video to the desired timestamp.

dart
 class CommentContent extends StatelessWidget {
  const CommentContent({
    Key? key,
    this.onSeekTo,
    required this.commentModel,
  }) : super(key: key);
  final Future<void> Function(int timestamp)? onSeekTo;
  final FrameCommentModel commentModel;

  
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        onSeekTo != null
Comment box

In the CommentFooter, we need a like button and a reply button. When clicked, the reply should display a TextField and a send button. On click of the Send icon, it should send the comment to Stream using bloc.onAddChildReaction().

dart
class CommentFooter extends StatefulWidget {
  const CommentFooter({
    Key? key,
    required this.commentModel,
    required this.onToggleLikeReaction,
    required this.onReply,
  }) : super(key: key);
  final FrameCommentModel commentModel;

  /// The callback to reply to the comment
  final Future<void> Function(String reply) onReply;

  /// The callback to toggle the like reaction
  final Future<void> Function(bool isLikedByUser) onToggleLikeReaction;

Finally, in the FameComment widget, along with the comment header and content we explained earlier, we need to display the number of comments. And when clicked it should drop down a list of comments. The operation should be reversible, and you should be able to collapse the list.

dart
 class FrameComment extends StatefulWidget {
  const FrameComment({
    Key? key,
    required this.onSeekTo,
    required this.onReply,
    required this.onToggleLikeReaction,
    required this.buildReplies,
    required this.commentModel,
  }) : super(key: key);
  final FrameCommentModel commentModel;

  /// The callback to seek the video to the timestamp of the comment
  final Future<void> Function(int timestamp)? onSeekTo;

  /// The callback to reply to the comment
Stream feed reactions and child reactions

The CommentListViewBuilder is just a thin wrapper around ReactionListCore combined with a Listview. The widget should be generic enough for displaying top-level comments and child comments i.e., "threads." The CommentListView is just a ListView of FrameComment, that we explained in the beginning.

dart
class CommentListViewBuilder extends StatelessWidget {
  const CommentListViewBuilder({
    Key? key,
    ChewieController? chewieController,
    required this.lookupValue,
    this.lookupAttr = LookupAttribute.activityId,
  })  : _chewieController = chewieController,
        super(key: key);
  final ChewieController? _chewieController;
  final LookupAttribute lookupAttr;
  final String lookupValue;

  
  Widget build(BuildContext context) {
    return ReactionListCore(

Finally, in CommentListView we build a list of frame comments. We define all the FrameComment callbacks including buildReplies where we return CommentListViewBuilder in a recursive manner.

dart
class CommentListView extends StatelessWidget {
  const CommentListView({
    Key? key,
    required this.lookupValue,
    required this.reactions,
    required ChewieController? chewieController,
  })  : _chewieController = chewieController,
        super(key: key);

  final String lookupValue;
  final List<Reaction> reactions;
  final ChewieController? _chewieController;

  
  Widget build(BuildContext context) {

Conclusion

We built a nice proof of concept for our video collaboration platform, but where to go next?

You could build a feed of video projects and add in-app chat for private conversations. Use webhooks for sending notifications for when a comment is posted. You could also go the other route of an audio platform and build an audio player like SoundCloud to comment on specific timestamps.

You can find the full source code of this project here.

decorative lines
Integrating Video With Your App?
We've built an audio and video solution just for you. Launch in days with our new APIs & SDKs!
Check out the BETA!