Build a Flutter Video Calling App https://getstream.

io/video/sdk/flutter/tutorial/video-calling/

All API plans include a $100 free usage credit each

month so you can build and test risk-free.

Flutter Tutorial
The following tutorial shows you how to quickly build a Video
Calling app leveraging Stream's Video API and the Stream Video
Flutter components. The underlying API is very flexible and allows
you to build nearly any type of video experience.

Scalable Chat, Video and Feeds!

Want to learn how you can typically integrate

in days?

This chat may be recorded as described in our Privacy

Policy.

Schedule a meeting

Customer Support

1 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

Build a Flutter Video Calling App

In this tutorial, we will learn how to build a video calling app similar to
Google Meet or Zoom using Stream's .

• Calls run on Stream's global edge network for optimal latency &
reliability.

• Permissions give you fine-grained control over who can do what.

• Video quality and codecs are automatically optimized.

• Powered by Stream's .

• UI components are fully customizable, as demonstrated in the

.

Let's dive in! If you have any questions or need to provide feedback along
the way, don't hesitate to use the feedback button - we're here to help!

Step 1 � Creating a new Flutter project

To begin developing your video calling app, you need to create a new
Flutter project. If you do not have Flutter or an IDE configured to work with
it, we highly recommend following the and steps
from the official documentation.

Please make sure you are using the latest version of Flutter from the stable
channel:

bash

2 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

1 flutter channel stable

2 flutter upgrade

Now, open your IDE and start a new Flutter application. For this tutorial, we
are choosing to call it 'video_calling_tutorial'. If you are using Android Studio
(recommended) make sure to create the project as a Flutter application and
keep all default settings.

You can also create a new project using this command

bash

1 flutter create video_calling_tutorial .

The next step is to add Stream Video to your dependencies, to do that just
open pubspec.yaml and add it inside the dependencies section.

yaml

1 dependencies:
2 flutter:
3 sdk: flutter
4
5 stream_video: ^latest
6 stream_video_flutter: ^latest
7 stream_video_push_notification: ^latest

3 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

7 stream_video_push_notification: ^latest

Stream has several packages that you can use to integrate video into your
application.

In this tutorial, we will use the package which contains

pre-built UI elements for you to use.

You can also use the package directly if you need direct
access to the low-level client.

The package helps in adding push

notifications and an end-to-end call flow �CallKit).

Step 2 � Initialising Stream Video

To start adding the SDK to your app, initialise the with a

user:

dart

1 import 'package:flutter/material.dart';
2 import 'package:stream_video_flutter/stream_video_flutter.dart'
3
4 void main() async {
5 WidgetsFlutterBinding.ensureInitialized();
6
7 �� Right after creation client connects to the backend and authenticates the
8 �� You can set `options: StreamVideoOptions(autoConnect: false)` if you want
9 final client = StreamVideo(
10 ' mmhfdzb5evj2 ',
11 user: User.regular(userId: ' Callista_Ming ', role: 'admin'
12 userToken: ' eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJodHRwczovL3Byb2
13 );
14
15 runApp(const MyApp());
16 }

You do not need to cache the client using state management - access
the client anywhere using

To actually run this sample we need a valid user token. The user token is
typically generated by your server side API. When a user logs in to your app
you return the user token that gives them access to the call. To make this
tutorial easier to follow we'll generate a user token for you:

Please update , ,

4 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

, and (seen later) with

the actual values shown below:

Here are credentials to try out the app with:

API Key mmhfdzb5evj2

Token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.ey…

User ID Natasi_Daala

Call ID H3dB6qX0rsU9

For testing you can join the call on our web-app:

Your user is now connected.

Before you go ahead, you need to add the required permissions for video
calling to your app.

In your file, add these permissions:

xml

1 <manifest xmlns:android="http:��schemas.android.com/apk/res/android
2
3 <uses-permission android:name="android.permission.INTERNET
4 <uses-feature android:name="android.hardware.camera"��
5 <uses-feature android:name="android.hardware.camera.autofocus
6 <uses-permission android:name="android.permission.CAMERA"��
7 <uses-permission android:name="android.permission.RECORD_AUDIO
8 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE
9 <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE
10 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS
11 <uses-permission android:name="android.permission.BLUETOOTH
12 <uses-permission android:name="android.permission.BLUETOOTH_ADMIN
13 <uses-permission android:name="android.permission.BLUETOOTH_CONNECT
14
15 ���
16 ��manifest>

For the corresponding iOS permissions, open the file and add:

xml

5 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

xml

1 <key>NSCameraUsageDescription��key>
2 <string>$(PRODUCT_NAME) Camera Usage!��string>
3 <key>NSMicrophoneUsageDescription��key>
4 <string>$(PRODUCT_NAME) Microphone Usage!��string>
5 <key>UIApplicationSupportsIndirectInputEvents��key>
6 <true��
7 <key>UIBackgroundModes��key>
8 <array>
9 <string>audio��string>
10 <string>fetch��string>
11 <string>processing��string>
12 <string>remote-notification��string>
13 <string>voip��string>
14 ��array>

Step 3 � Setting up a call

Now that the dependencies, permissions, and initialisations are set, we can
get onto creating a call.

Let's create a simple screen with a button that joins a call:

dart

1 return Scaffold(
2 appBar: AppBar(
3 backgroundColor: Theme.of(context).colorScheme.inversePrimary
4 title: Text(widget.title),
5 ),
6 body: Center(
7 child: ElevatedButton(
8 child: Text('Create Call'),
9 onPressed: () async {
10
11 },
12 ),
13 ),
14 );

To instantiate a call, you can use the method. You

then need to create this on the backend using the
method.

Once this call is created, you can navigate to the call screen which is
created in the next section.

6 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

Here is how that looks in code:

dart

1 ElevatedButton(
2 child: const Text('Create Call'),
3 onPressed: () async {
4 try {
5 var call = StreamVideo.instance.makeCall(
6 callType: StreamCallType(),
7 id: ' 9SUFIkWozGTo ',
8 );
9
10 await call.getOrCreate();
11
12 �� Created ahead
13 Navigator.push(
14 context,
15 MaterialPageRoute(
16 builder: (context) �� CallScreen(call: call),
17 ),
18 );
19 } catch (e) {
20 debugPrint('Error joining or creating call: $e');
21 debugPrint(e.toString());
22 }
23 },
24 )

The UI as of the moment is a simple button on the screen:

7 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

You have created a Stream Video call. Let's set up the call screen UI so that
the user can see other users and interact.

Step 4 � Setting up the call UI

To set up a call screen, set up a new file named 'call_screen.dart' and

create a new widget to handle the call screen:

dart

1 import 'package:flutter/material.dart';
2 import 'package:stream_video_flutter/stream_video_flutter.dart'
3
4 class CallScreen extends StatefulWidget {
5 final Call call;
6
7 const CallScreen({
8 Key? key,
9 required this.call,
10 }) : super(key: key);
11
12 @override
13 State<CallScreen> createState() �� _CallScreenState();
14 }
15
16 class _CallScreenState extends State<CallScreen> {
17 @override
18 Widget build(BuildContext context) {
19 return const Placeholder();
20 }
21 }

In this widget, we take the call we created previously as a parameter.

In the method, we use the widget - a

widget made by the Stream team to make it easy to build video calls:

dart

8 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

1 class _CallScreenState extends State<CallScreen> {

2 @override
3 Widget build(BuildContext context) {
4 return Scaffold(
5 body: StreamCallContainer(
6 call: widget.call,
7 ),
8 );
9 }
10 }

And that's... pretty much it.

Once you navigate to the after the button press, this is what
you will be greeted with:

When connecting other users, you can use the same process. The
method will create a call if it doesn't exist, and simply
return the existing call if it already does.

Customising the
9 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

Customising the

To customise any aspect of the call screen made previously, you can use
the parameter of the .

For example, if you want to add your own call controls to the call, you can
do it using the :

dart

1 StreamCallContainer(
2 call: widget.call,
3 callContentBuilder: (
4 BuildContext context,
5 Call call,
6 CallState callState,
7 ) {
8 return StreamCallContent(
9 call: call,
10 callState: callState,
11 callControlsBuilder: (
12 BuildContext context,
13 Call call,
14 CallState callState,
15 ) {
16 final localParticipant = callState.localParticipant!;
17 return StreamCallControls(
18 options: [
19 CallControlOption(
20 icon: const Icon(Icons.chat_outlined),
21 onPressed: () {
22 �� Open your chat window
23 },
24 ),
25 FlipCameraOption(
26 call: call,
27 localParticipant: localParticipant,
28 ),
29 AddReactionOption(
30 call: call,
31 localParticipant: localParticipant,
32 ),
33 ToggleMicrophoneOption(
34 call: call,
35 localParticipant: localParticipant,
36 ),
37 ToggleCameraOption(
38 call: call,
39 localParticipant: localParticipant,
)

10 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

40 ),
41 LeaveCallOption(
42 call: call,
43 onLeaveCallTap: () {
44 call.leave();
45 },
46 ),
47 ],
48 );
49 },
50 );
51 },
52 ),

When building Whatsapp/Telegram style calling, you need to add incoming

and outgoing screens to the app. The also has these
screens inbuilt and allows you to change these using the
and .

For more about building these kinds of applications, check out our
.

Recap

Find the complete code for this tutorial on the

.

Stream Video allows you to quickly build a scalable video experience for
your app. Please do let us know if you ran into any issues while building an
video calling app with Flutter. Our team is also happy to review your UI
designs and offer recommendations on how to achieve it with Stream.

To recap what we've learned:

• You setup a call: (

).

• The call type ("default" in the above case) controls which features are
enabled and how permissions are setup.

• When you join a call, realtime communication is setup for audio & video
calling: ( ).

• Published objects in and

make it easy to build your own
UI.

• is the low level component that renders video.

• We've used Stream's , which means calls run on a

11 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

• We've used Stream's , which means calls run on a

global edge network of video servers. By being closer to your users the
latency and reliability of calls are better. The Flutter SDK enables you to
build in-app , and in days.

We hope you've enjoyed this tutorial and please do feel free to reach out if
you have any suggestions or questions.

Final Thoughts
In this we built a fully functioning Flutter messaging app
with our Flutter SDK component library. We also showed how easy it is to
customize the behavior and the style of the Flutter video app components
with minimal code changes.

Both the and the have plenty more features

available to support more advanced use-cases.

Give us feedback!
Did you find this tutorial helpful in getting you up and running with
your project? Either good or bad, we're looking for your honest
feedback so we can improve.

No Almost Yes

[email protected]

Let us know what we can do

12 of 13 9/18/24, 9:41 PM
Build a Flutter Video Calling App https://getstream.io/video/sdk/flutter/tutorial/video-calling/

Start coding for free

If you're interested in a custom plan or have any questions,

please contact us.

Stream is proudly designed, built and continually enhanced in , and

; with a global remote team.

System Status

© Getstream.io, Inc. All Rights Reserved.

Terms Privacy Security

13 of 13 9/18/24, 9:41 PM