Mastering the Art of Live Streaming with ZEGOClOUD SDK and Flutter
Tags: flutter, dart, zegocloud, livestreaming
Published: 2023-04-15 10:00:17

[ZEGOCLOUD](https://www.zegocloud.com/) is a real-time audio and video conversation platform that offers developers with the equipment they want to build audio and video communique programs, consisting of video name apps, live streaming apps, and on line training apps. ZEGOCLOUD offers a ramification of equipment and assets which can assist builders save money and time whilst constructing real-time audio and video verbal exchange packages.
ZEGOCLOUD uses the brand new era to deliver  audio and video. ZEGOCLOUD can be scaled to meet the wishes of any application, so that you can reach more customers with your real-time audio and video communique packages.
ZEGOCLOUD offers numerous software improvement kits (SDKs) for several programming languages such as Java, Python, and Flutter. The Flutter SDK is specifically designed to facilitate the creation of high-overall performance audio and video communique packages that can run seamlessly on cell devices.
![ZEGOCLOUD](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaaeydn3lhaq02g35gea.png)

Using the ZEGOCLOUD Flutter SDK, builders can without difficulty build audio and video call apps with chat and stay streaming features. In this article, we can stroll via the procedure of constructing a [Live Streaming app](https://www.zegocloud.com/product/live-streaming) using the ZEGOCLOUD Flutter SDK. the use of the ZEGOCLOUD Flutter SDK.


![Live Streaming](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afdc8tm33h0ff7i71bmg.png)
Before creating stay Streaming software using ZEGOCLOUD Flutter stay Streaming SDK, it is essential to accumulate an App id and App signal from the ZEGOCLOUD Console. these identifiers are vital in your application to connect with the ZEGOCLOUD platform and utilize its audio and video streaming talents.
here are the stairs to obtain your `AppID and AppSign` from the ZEGOCLOUD Console:

1.Go to the ZEGOCLOUD `Console` website [Console](https://console.zegocloud.com/account/signup)
2.sign on for an account and input your personal facts.

![Signup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prbkjs4b9os6enk2u6sh.png)
3.After developing an account, you'll be caused to create a venture. click the "Create" button to create a new assignment.

![Create project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww5gq6pftkiwlu6pqq15.png)

4.Enter a call on your mission and select the right vicinity to your task. Then click on the "Create" button.
![Name](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pynpfexickghtzkl1lv.png)
5.Once your challenge is created, you will be redirected to the mission dashboard.

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29exigdyc3l7xvecv166.png)
6.You will see your `AppID` and `AppSign` displayed on the web page. Make a note of those values as you'll need them later when configuring your app.

**Observe**: The `App sign` is a mystery value that need to now not be shared with every person. hold it safe and at ease.

##Generate the Flutter Application
Let's move on to creating our Flutter application:

Use the command "flutter create flutter_LiveStreaming" to create the project.

Next, we need to install [zego_uikit_prebuilt_call](https://pub.dev/packages/zego_uikit_prebuilt_call)
`flutter pub add zego_uikit_prebuilt_call`
Release the challenge the use of your `IDE`, and carry out a few initial adjustments to make sure that the assignment runs smoothly.
Begin by accessing `android/app/build.gradle` and making modifications to the below-listed values:

1. `compileSdkVersion 33`
2. `minSdkVersion 22`

3.` targetSdkVersion 33`
![build.gradle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6b72bvw68aeur7ii2i3.png)
It is necessary to specify the permissions that the application will require. this can be carried out by including the permission declarations within the show up tag within the `AndroidManifest.xml `file:

```
<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"/>
<uses-permission android:name="android.permission.VIBRATE"/>
```
![Permission](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg6l0jp5sl94lwqiel9o.png)
Add the following permissions upload in your info.plist report for iOS:

```
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) camera use</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) microphone use</string>
```
Now that we've completed the vital configurations, we can begin writing our Dart code. to start, you may alternative the code in the `lib/main/home.dart` document with the code supplied underneath:
```
import 'package:zego_zimkit/zego_zimkit.dart';
import 'package:zegocloud/inApp_chat/main_screen.dart';
final String userID=math.Random().nextInt(1000).toString();
void main() async{
await ZIMKit().init(appID: Utils.appID,appSign: Utils.appsign);
WidgetsFlutterBinding.ensureInitialized();
  // await ZIMKit().init(appID:Utils.appID, appSign: Utils.appsign);
  // WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}
class MyApp extends StatelessWidget{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  HomeScreen(),
    );
  }
}
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
  // Generate Live Streaming ID with 6 digit length
  final liveIDController = TextEditingController(
    text: '1111',
  );
  // Generate userID with 6 digit length
  final String userID = Random().nextInt(900000 + 100000).toString();
  @override
  Widget build(BuildContext context) {
    var buttonStyle = ElevatedButton.styleFrom(
      backgroundColor: const Color(0xff034ada),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
      ),
    );

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(
          horizontal: 24,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const SizedBox(
              height: 20,
            ),
            Text('Your UserID: $userID'),
            const Text('Please test with two or more devices'),
            const SizedBox(
              height: 30,
            ),
            TextFormField(
              controller: liveIDController,
              decoration: const InputDecoration(
                labelText: 'Join or Start a Live by Input an ID',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              style: buttonStyle,
              child: const Text('Start a Live'),
              onPressed:(){
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => LiveScreenView(
                      liveID: liveIDController.text,
                      isHost: true, userID:"$userID",
                    ),
                  ),
                );
              },
            ),
            const SizedBox(
              height: 16,
            ),
            ElevatedButton(
                style: buttonStyle,
                child: const Text('Join a Live'),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => LiveScreenView(
                        liveID: liveIDController.text,
                        isHost: false,
                        userID: '$userID',
                      ),
                    ),
                  );
                }
            )
          ],
        ),
      ),
    );
  }

}
```

```
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:zego_uikit_prebuilt_live_streaming/zego_uikit_prebuilt_live_streaming.dart';
import 'package:zegocloud/main/utils.dart';
// Live Page Prebuilt UI from ZEGOCLOUD UIKits
class LiveScreenView extends StatelessWidget {
  final String liveID , userID;
  final bool isHost;
  LiveScreenView({
    super.key,
    required this.liveID,
    this.isHost = false,
    required this.userID
  });
  // Add your app id here and app sign in
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveStreaming(
        appID: Utils.appID,
        appSign: Utils.appsign,
        userID: userID,
        userName: 'user_$userID',
        liveID: liveID,
        config: isHost
            ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
            : ZegoUIKitPrebuiltLiveStreamingConfig.audience()
          ..audioVideoViewConfig.showAvatarInAudioMode = true
          ..audioVideoViewConfig.showSoundWavesInAudioMode = true,
      ),
    );
  }
}
```
As soon as you have got configured the specified settings efficiently, you have to be capable of begin a **live Streaming ** app the use of the furnished code.
## End
In precis, we've got discovered the way to expand a stay streaming utility utilizing the ZEGOCLOUD Flutter SDK. The process involved acquiring an `AppID and AppSign` from the ZEGOCLOUD Console, which allowed us to connect with the ZEGOCLOUD platform and leverage its audio and video streaming skills. We created a Flutter software and included the important dependencies. ultimately, we implemented the `stay streaming` capability thru Dart code, which includes initializing the SDK, connecting to a digital area, and publishing or subscribing to a transmission. with the aid of following these steps, you could create your very own `stay streaming application` the use of the ZEGOCLOUD Flutter SDK.
[Sign up for 10,000 free mins](https://bit.ly/3UgdPv9) 
[Find out more about ZEGOCLOUD ](https://bit.ly/3nRyoBR)