Live Audio Room App using ZEGOCLOUD and Flutter

main.dart

import 'package:flutter/material.dart';
import 'package:main_flutter_demo/home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.brown,
          title: const Text('Live Audio Room App'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

constants.dart

class Constants{
  static const int appId = YourApiId;
  static const String appSign = 'YourAppSign';
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:main_flutter_demo/live_audio.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var host = false;

  final TextEditingController userNameControler = TextEditingController();
  final TextEditingController userIdControler = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode());
      },
      child: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: Column(
            children: [
              textField(
                controller: userNameControler,
                text: 'User Name',
                icon: Icons.person,
              ),
              const SizedBox(height: 25),
              textField(
                controller: userIdControler,
                text: 'User Id',
                icon: Icons.pin,
              ),
              const SizedBox(height: 10),
              hostCheck(),
              const SizedBox(height: 15),
              submitButton(context),
            ],
          ),
        ),
      ),
    );
  }

  Row hostCheck() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Host'),
        Checkbox(
          value: host,
          onChanged: ((value) {
            setState(() {
              host = value!;
            });
          }),
        ),
      ],
    );
  }

  Material submitButton(BuildContext context) {
    return Material(
      elevation: 2,
      borderRadius: BorderRadius.circular(5),
      color: Colors.brown,
      child: MaterialButton(
        padding: const EdgeInsets.symmetric(vertical: 12),
        minWidth: MediaQuery.of(context).size.width,
        onPressed: () async {
          Navigator.of(context).push(MaterialPageRoute(
              builder: ((context) => MyWidget(
                    userID: userIdControler.text,
                    userName: userNameControler.text,
                    liveID: '100',
                    isHost: host,
                  ))));
        },
        child: const Text(
          'Join',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 20,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  TextFormField textField({
    required TextEditingController controller,
    required String text,
    required IconData icon,
  }) {
    return TextFormField(
      controller: controller,
      onSaved: (value) {
        controller.text = value!;
      },
      decoration: InputDecoration(
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.brown,
            width: 1,
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.brown,
            width: 2,
          ),
        ),
        prefixIcon: Icon(
          icon,
          color: Colors.brown,
        ),
        contentPadding: const EdgeInsets.fromLTRB(20, 15, 20, 15),
        hintText: text,
        hintStyle: const TextStyle(
          color: Color.fromARGB(255, 182, 174, 172),
        ),
      ),
    );
  }
}

live_audio.dart

import 'package:flutter/material.dart';
import 'package:main_flutter_demo/constant.dart';
import 'package:zego_uikit_prebuilt_live_audio_room/zego_uikit_prebuilt_live_audio_room.dart';

class MyWidget extends StatefulWidget {
  const MyWidget(
      {Key? key,
      required this.liveID,
      this.isHost = false,
      required this.userID,
      required this.userName})
      : super(key: key);

  final String liveID;
  final bool isHost;
  final String userID;
  final String userName;

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        appID: Constants.appId,
        appSign: Constants.appSign,
        userID: widget.userID,
        userName: widget.userName,
        roomID: widget.liveID,
        config: widget.isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
      ),
    );
  }
}

 

Video Link: