Creating a Flutter Video Streaming App with Three Lines of Code

Meherdeep Thakur
Jul 8 · 5 min read

Using your favorite video streaming API just got easier with the introduction of the Agora Low Code Initiative, which enables users to build their video streaming application with just a few lines of code.

Creating a Flutter Video Streaming App with Three Lines of Code

When you’re setting up your own streaming application with Agora, a few technical steps might slow you down. Now with Agora UIKit for Flutter, you can create a video streaming application with just a few lines of code.

In this tutorial, we will be going over how to use the Agora UIKit for Flutter to build your video streaming application and add some customizations.

Default Functionality

  • Automatically laying out all video streams
  • Displaying the active speaker in the larger display in the floating layout
  • Allowing you to swap any stream to the larger display in the floating layout
  • Buttons for disabling the camera or the microphone, switching cameras for the local user, and disconnecting the call
  • Lots of visual customization
  • Live streaming mode with user role as a broadcaster or as an audience member
  • Two default layouts: floating and grid


  • Flutter SDK
  • VS Code or Android Studio
  • An iOS or Android device for testing the application
  • A basic understanding of Flutter development


sdk: flutter

Open your Android-level build.gradle and add jitpack to the end of the repositories:

allprojects {         
repositories {
maven { url '' }

Adding Video Streaming to Your App

Initializing the Agora Flutter UIKit

Once you have initialized the UIKit, place the AgoraVideoViewer inside the MaterialApp. The AgoraVideoViewer class is used to display the user video layout. This class requires an object of AgoraClient as an argument:

Build Method

With this, you have integrated Agora video calling into your application in no time.

In addition, you can add the AgoraVideoButtons class in your build method to add, remove, or customize buttons:

Add Video and Buttons Layout

Putting it all together:

AgoraClient Class

Agora UIKit for Flutter takes two required parameters: agoraConnectionData and enabledPermissions. You can also provide the agoraChannelData and agoraEventHandler parameters:

  • agoraConnectionData is used to initialize the Agora RtcEngine that takes an argument of type AgoraConnectionData(), through which you can pass your App Id, channel name, UID, temporary token, and/or token URL and thus set up your video call.
  • enabledPermissions takes a list of permissions that needs to be triggered before building any application. This list can contain permissions for camera, microphone, storage, location, etc.
  • agoraChannelData is used to define the properties of your channel and the user behavior in that particular channel. It takes arguments such as channel profile, client role, remote mic state, remote video state, dual-stream mode, stream fallback options, and much more.
  • agoraEventHandler extends the RtcEngineEventHandler class through which we can add functions that are executed from the given list of event handlers.

All this can be summarized by:

AgoraClient methods

Agora UIKit for Flutter automatically generates tokens for you such that you just have to provide the link to your deployed server. Have a look at this guide to follow the steps on how to generate your own token server. This can be summarized in your AgoraClient class as:

Using a token server

AgoraVideoViewer Class

Agora Flutter UIKit

Features of the AgoraVideoViewerClass :

  • Adjust the UI dynamically as the user joins or leaves.
  • Focus on the active speaker (Floating layout).
  • Pin local and remote users to the main screen (Floating layout).
  • Show the state of the camera and the microphone of local and remote users.
  • Customize the view that should be displayed when the remote video is turned off.
AgoraVideoViewer Class sample

Here is a sample code to sum it up:


To have a look at other methods and their usage, see the documentation.

AgoraVideoButtons Class

In addition, you can use the extraButtons method to provide a list of buttons that you want to add according to your styling.

AgoraVideoButtonClass sample

Here is a way to implement this:



Agora UIKit for Flutter

If there are features you think would be good to add to the Agora UIKit for Flutter that users would benefit from, feel free to fork the repository and add a pull request. Or open an issue on the repository with a feature request.

The plan is to grow this library and have similar offerings across all supported platforms. There are already similar libraries for Android, React Native, and iOS, so be sure to check those out.

Other Resources

For more information about building applications using Agora SDKs, take a look at the Agora Video Call Quickstart Guide and Agora API Reference.

And I invite you to join the Agora Developer Slack community.

Agora delivers cutting edge APIs for developers.