How to Build a Live Streaming App With Flutter

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:

1. You need to open the your_project/android/app/build.gradle file, and modify the compileSdkVersion to 33.

2. Add app permissions.
   Open the file your_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" />

3. 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:

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