Full Featured Live Streaming App in Flutter in 7 Minutes - Using ZegoCloud

In this world and age of Social Media apps getting so popular, Live Streaming has become a very popular and highly Engaging part of it.

However, building and maintaining your own Live Stream Module can be a daunting task, especially with the ever-increasing need for new features and updates.

Thankfully, third-party service providers like ZegoCloud offer a hassle-free solution that allows you to create your Live Streaming Module in no time.

By using ZegoCloud, you can take advantage of the latest features and updates without worrying about any maintenance or update issues. This ensures that your Live Streaming is always up and running, providing a seamless user experience.

Setting Up Your Applications

Please follow the tutorial here: https://desiprogrammer.hashnode.dev/full-featured-chat-app-in-flutter-in-5-mins-using-zegocloud

· Get ZEGOCLOUD for 10,000 free mins: bit.ly/3pOD0d5

· Pre-built Live streaming Kit with Flutter: bit.ly/3pUmEja

· Learn about ZEGOCLOUD live streaming SDK: bit.ly/457MGiN

  Top 10 live streaming SDK for You: bit.ly/42JkwsQ

  ZEGOCLOUD live streaming SDK allows you to easily build your live streaming apps with flutter within minutes.

Adding Dependencies

Add the following dependency to your pubspec.yaml file.

zego_uikit_prebuilt_live_streaming: ^2.3.6

Follow the instructions in the Chat App Blog to connect a user as it is mandatory to start a live stream.

Live Stream Page

On this page, there are 2 buttons to each start a live stream and join a live stream.

class LiveStreamBasePage extends StatefulWidget {
  const LiveStreamBasePage({super.key});

  @override
  State<LiveStreamBasePage> createState() => _LiveStreamBasePageState();
}

class _LiveStreamBasePageState extends State<LiveStreamBasePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => const ZegoLiveStream(
                    uid: '111111',
                    username: "Start",
                    liveID: '123123',
                  ),
                ),
              );
            },
            child: const Text(
              "Start Live Stream",
            ),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (_) => const ZegoLiveStream(
                    uid: '121212',
                    username: "join",
                    liveID: '123123',
                  ),
                ),
              );
            },
            child: const Text(
              "Join Live Stream",
            ),
          ),
        ],
      ),
    );
  }
}

Then we have another page to start the live stream.

class ZegoLiveStream extends StatefulWidget {
  final String uid;
  final String username;
  final String liveID;
  const ZegoLiveStream({
    super.key,
    required this.uid,
    required this.username,
    required this.liveID,
  });

  @override
  State<ZegoLiveStream> createState() => _ZegoLiveStreamState();
}

class _ZegoLiveStreamState extends State<ZegoLiveStream> {
  @override
  Widget build(BuildContext context) {
    return ZegoUIKitPrebuiltLiveStreaming(
      appID: appId,
      appSign: appSign,
      userID: widget.uid,
      userName: widget.username,
      liveID: widget.liveID,
      config: widget.uid == '111111'
          ? ZegoUIKitPrebuiltLiveStreamingConfig.host()
          : ZegoUIKitPrebuiltLiveStreamingConfig.audience(),
    );
  }
}

Here based on the passed Id, a live stream will start with host or audience configuration.

Video Explanation