Video Calls with Twilio in Flutter

Flutter is a powerful cross-platform development toolkit from Google that allows you to easily create beautiful and performant apps for mobile, web and desktop. With Twilio Video, you can add real-time video and audio communication to your Flutter applications. In this tutorial, we will walk through the steps of building a simple video chat app in Flutter with Twilio Video.

Prerequisites

In order to build the video chat app, you will need the following:

• A Twilio account
• A Twilio Video API key and secret
• The Flutter SDK
• A text editor or IDE

Installing Twilio Video into Flutter

We will use the Twilio Video SDK for Flutter to add video chat to our application. To install the SDK, open your pubspec.yaml file and add the following to the dependencies section:

dependencies:
  twilio_video: ^1.0.2

Next, run flutter packages get from the command line to install the SDK.

Building the Video Chat UI in Flutter & Twilio

Now that we have the SDK installed, we can start building the UI for our video chat app. We will use the Twilio Video SDK for Flutter to create a VideoView widget, which will be used to display the video feed from the other participants in the chat. We will also create a Room widget, which will be used to manage the video chat room.

Creating the VideoView Widget

The VideoView widget is used to display the video feed from the other participants in the chat. To create the widget, we will use the TwilioVideoView class from the twilio_video package.

import 'package:twilio_video/twilio_video.dart';

class VideoView extends StatefulWidget {
  // ...

  @override
  _VideoViewState createState() => _VideoViewState();
}

class _VideoViewState extends State<VideoView> {
  // ...

  Widget _buildVideoView() {
    return TwilioVideoView(
      onVideoViewCreated: _onVideoViewCreated,
    );
  }

  void _onVideoViewCreated(TwilioVideoViewController controller) {
    // ...
  }

  // ...
}

Creating the Room Widget

The Room widget is used to manage the video chat room. To create the widget, we will use the TwilioVideoRoom class from the twilio_video package.

import 'package:twilio_video/twilio_video.dart';

class Room extends StatefulWidget {
  // ...

  @override
  _RoomState createState() => _RoomState();
}

class _RoomState extends State<Room> {
  // ...

  Widget _buildRoom() {
    return TwilioVideoRoom(
      onRoomCreated: _onRoomCreated,
      onRoomDisconnected: _onRoomDisconnected,
    );
  }

  void _onRoomCreated(TwilioVideoRoomController controller) {
    // ...
  }

  void _onRoomDisconnected(TwilioVideoRoomController controller) {
    // ...
  }

  // ...
}

Joining a Video Chat Room

Once the VideoView and Room widgets have been created, we can use them to join a video chat room. To join a room, we need to call the joinRoom method on the TwilioVideoRoom widget, passing in the API key and secret from our Twilio account, as well as the name of the room we want to join.

void _joinRoom() {
  _roomWidget.joinRoom(
    apiKey: _apiKey,
    apiSecret: _apiSecret,
    roomName: 'my-video-chat-room',
  );
}

Leaving a Video Chat Room

To leave a video chat room, we need to call the leaveRoom method on the TwilioVideoRoom widget.

void _leaveRoom() {
  _roomWidget.leaveRoom();
}

Conclusion

In this tutorial, we have walked through the steps of building a simple video chat app in Flutter with Twilio Video. We have installed the Twilio Video SDK, created the UI for our video chat app, and implemented the logic for joining and leaving a video chat room. With these steps, you are now ready to start building your own video chat apps with Twilio Video and Flutter.