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.

![flutter twilio video](https:&#x2F;&#x2F;devbrite.io&#x2F;media&#x2F;cover4.jpg)
## Prerequisites

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

- A [Twilio account](https:&#x2F;&#x2F;www.twilio.com&#x2F;try-twilio)
- A [Twilio Video API key and secret](https:&#x2F;&#x2F;www.twilio.com&#x2F;console&#x2F;video&#x2F;runtime&#x2F;api-keys)
- The [Flutter SDK](https:&#x2F;&#x2F;flutter.dev&#x2F;docs&#x2F;get-started&#x2F;install)
- A text editor or IDE

## Installing Twilio Video into Flutter

We will use the [Twilio Video SDK for Flutter](https:&#x2F;&#x2F;pub.dev&#x2F;packages&#x2F;twilio_video) to add video chat to our application. To install the SDK, open your &#96;pubspec.yaml&#96; file and add the following to the &#96;dependencies&#96; section:

&#96;&#96;&#96;yaml
dependencies:
  twilio_video: ^1.0.2
&#96;&#96;&#96;

Next, run &#96;flutter packages get&#96; from the command line to install the SDK.

## Building the Video Chat UI in Flutter &amp; 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](https:&#x2F;&#x2F;pub.dev&#x2F;packages&#x2F;twilio_video) to create a &#96;VideoView&#96; widget, which will be used to display the video feed from the other participants in the chat. We will also create a &#96;Room&#96; widget, which will be used to manage the video chat room.

### Creating the VideoView Widget

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

&#96;&#96;&#96;dart
import &#x27;package:twilio_video&#x2F;twilio_video.dart&#x27;;

class VideoView extends StatefulWidget {
  &#x2F;&#x2F; ...

  @override
  _VideoViewState createState() =&gt; _VideoViewState();
}

class _VideoViewState extends State&lt;VideoView&gt; {
  &#x2F;&#x2F; ...

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

  void _onVideoViewCreated(TwilioVideoViewController controller) {
    &#x2F;&#x2F; ...
  }

  &#x2F;&#x2F; ...
}
&#96;&#96;&#96;

### Creating the Room Widget

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

&#96;&#96;&#96;dart
import &#x27;package:twilio_video&#x2F;twilio_video.dart&#x27;;

class Room extends StatefulWidget {
  &#x2F;&#x2F; ...

  @override
  _RoomState createState() =&gt; _RoomState();
}

class _RoomState extends State&lt;Room&gt; {
  &#x2F;&#x2F; ...

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

  void _onRoomCreated(TwilioVideoRoomController controller) {
    &#x2F;&#x2F; ...
  }

  void _onRoomDisconnected(TwilioVideoRoomController controller) {
    &#x2F;&#x2F; ...
  }

  &#x2F;&#x2F; ...
}
&#96;&#96;&#96;

## Joining a Video Chat Room

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

&#96;&#96;&#96;dart
void _joinRoom() {
  _roomWidget.joinRoom(
    apiKey: _apiKey,
    apiSecret: _apiSecret,
    roomName: &#x27;my-video-chat-room&#x27;,
  );
}
&#96;&#96;&#96;

## Leaving a Video Chat Room

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

&#96;&#96;&#96;dart
void _leaveRoom() {
  _roomWidget.leaveRoom();
}
&#96;&#96;&#96;

## 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.

Video Calls with Twilio in Flutter

About

Legal

Products

Resources

Category: