Analysts predict the live-streaming market will grow to $223.98 billion by 2028. The sector is expanding due to increasing investments, and more companies are developing live-streaming services. In this article, I will walk you through building a live-streaming app using the Flutter Live Streaming Kit SDK.
Why ZEGOCLOUD SDK for Live Streaming App with Flutter
Flutter Live Streaming Kit is a brand-new pre-built UIKits by ZEGOCLOUD. Through it, You can complete the development of a live-streaming app within 10 minutes.
Flutter Live Streaming Kit handles all the logic and UI of the live streaming function. Include:
- UI and interaction of the live Streaming module
- Message sending and display
- Audio and video data transmission
- Camera and microphone management
- Live Viewer Statistics
You only need to implement business-related logic. For example:
- User login registration
- Live List Management
- Top up and send gifts, etc.

Preparation
- A ZEGOCLOUD developer account–Sign up
- Flutter 1.12 or later.
- Basic understanding of Flutter development
Implement live streaming
Create Project
Run the following code to create a new project.
flutter create --template app.

Add live button
Insert two buttons, one to start life and one to watch live.

import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(title: 'Flutter Demo', home: HomePage());
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
child: const Text('Start a live'),
onPressed: () => jumpToLivePage(context, isHost: true)),
ElevatedButton(
child: const Text('Watch a live'),
onPressed: () => jumpToLivePage(context, isHost: false)),
],
),
),
),
);
}
jumpToLivePage(BuildContext context, {required bool isHost}) {}
}
Set ZegoUIKitPrebuiltLiveStreaming as a dependency
Run the following command in your project root directory:
flutter pub add zego_uikit_prebuilt_live_streaming

Import the SDK
Now in your Dart code, import the prebuilt LiveStreaming Kit SDK.
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';

Implement live streaming
Use ZegoUIKitPrebuiltLiveStreaming
to quickly build a live-streaming page
class LivePage extends StatelessWidget {
const LivePage({Key? key, this.isHost = false}) : super(key: key);
final bool isHost;
@override
Widget build(BuildContext context) {
return SafeArea(
child: ZegoUIKitPrebuiltLiveStreaming(
appID: , // use your appID
appSign: 'yourAppSign', // use your appSign
userID: userID,
userName: 'user_$userID',
liveID: 'testLiveID',
config: isHost
? ZegoUIKitPrebuiltLiveStreamingConfig.host()
: ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
),
);
}
}
Now, you can create a new live or watch a live one by navigating to this live page.
void jumpToLivePage(BuildContext context, {required bool isHost}) {
Navigator.push(context, MaterialPageRoute(builder: (context) => LivePage(isHost: isHost)));
}

Configure your project
- Android:
- You need to open the
your_project/android/app/build.gradle
file, and modify thecompileSdkVersion
to 33.

- Add app permissions.
Open the fileyour_project/app/src/main/AndroidManifest.xml
, and add the following code:
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

- Prevent code obfuscation.
To prevent obfuscation of the SDK public class names, do the following:
a. In your project’s your_project > android > app
folder, create a proguard-rules.pro
file with the following content as shown below:
-keep class **.zego.** { *; }
b. Add the following config code to the release
part of the your_project/android/app/build.gradle
file.
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

- iOS:
- Add app permissions.
a. open the your_project/ios/Podfile
file, and add the following to the post_install do |installer|
part:
# Start of the permission_handler configuration
target.build_configurations.each do |config|
config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
'$(inherited)',
'PERMISSION_CAMERA=1',
'PERMISSION_MICROPHONE=1',
]
end
# End of the permission_handler configuration

b. open the your_project/ios/Runner/Info.plist
file, and add the following to the dict
part:
<key>NSCameraUsageDescription</key>
<string>We require camera access to connect to a live</string>
<key>NSMicrophoneUsageDescription</key>
<string>We require microphone access to connect to a live</string>

Run a Demo
Conclusion
Live streaming can be the best growth engine for businesses if utilized well. The live streaming app might be the most excellent option for running a business or earning money through exciting content. Develop a video streaming app, create your own streaming service, and grow your company.
Talk to Expert
Learn more about our solutions and get your question answered.