Customize the bottom menu bar buttons

Customize the bottom menu bar buttons

Live Audio Room Kit (ZegoUIKitPrebuiltLiveAudioRoom) allows you to configure the buttons of the menu bar. You can remove the default buttons or add custom ones. If necessary, you can configure the bottomMenuBarConfig:

1. hostButtons: Use this to set the prebuilt-in buttons for a host to use.
2. speakerButtons : Use this to set the prebuilt-in buttons for a speaker to use.
3. audienceButtons : Use this to set the prebuilt-in buttons for the audience to use.
4. hostExtendButtons: Use this to set the custom buttons for a host to use.
5. speakerExtendButtons: Use this to set the custom buttons for a speaker to use.
6. audienceExtendButtons : Use this to set the custom buttons for the audience to use.
7. maxCount: Maximum number of buttons that can be displayed by the menu bar. Value range [1 - 5], the default value is 5.
8. showInRoomMessageButton: Whether to display the message button, displayed by default.

If the total number of built-in buttons and custom buttons does not exceed the maxCount, all buttons will be displayed. Otherwise, other buttons that cannot be displayed will be hidden in the three dots (⋮) button. Clicking this button will pop up the bottom sheet to display the remaining buttons. The effect is as follows:

Here is the reference code:

class LivePage extends StatelessWidget {
  const LivePage({Key? key, required this.roomID, this.isHost = false})
      : super(key: key);

  final String roomID;
  final bool isHost;

  @override
  Widget build(BuildContext context) {
    List<IconData> customIcons = [Icons.cookie, Icons.phone, Icons.speaker, Icons.air, Icons.blender, Icons.file_copy, Icons.place, Icons.phone_android, Icons.phone_iphone];

    return ZegoUIKitPrebuiltLiveAudioRoom(
      appID: YourSecret.appID,
      appSign: YourSecret.appSign,
      userID: userID,
      userName: 'user_$userID',
      roomID: roomID,

      // Modify your custom configurations here.
      config: isHost
          ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
          : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience()
        ..bottomMenuBar = ZegoLiveAudioRoomBottomMenuBarConfig(
          maxCount: 5,
          hostButtons: [
            ZegoLiveAudioRoomMenuBarButtonName.toggleMicrophoneButton,
            ZegoLiveAudioRoomMenuBarButtonName.showMemberListButton,
          ],
          hostExtendButtons: [
            for (int i = 0; i < customIcons.length; i++)
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  fixedSize: const Size(40, 40),
                  shape: const CircleBorder(),
                  primary: const Color(0xff2C2F3E).withOpacity(0.6),
                ),
                onPressed: () {},
                child: Icon(customIcons[i]),
              ),
          ],
          speakerButtons: [
            ZegoLiveAudioRoomMenuBarButtonName.toggleMicrophoneButton,
            ZegoLiveAudioRoomMenuBarButtonName.showMemberListButton,
          ],
        ),
    );
  }
}

Customize the on-click menu item

Customize the menu item of the more button in the member list

If the default menu item of the more button can't meet your needs, you can listen to the onMemberListMoreButtonPressed callback of ZegoUIKitPrebuiltLiveAudioRoomConfig to customize the menu item as needed.

• The user in the onMemberListMoreButtonPressed callback corresponds to the users in the member list. You can get the info of the clicked user, save it and you can choose to show the user info when the menu shows or do other logic as you want.

The following code shows how to customize the menu item:

class LivePage extends StatelessWidget {
  const LivePage({Key? key, required this.roomID, this.isHost = false})
      : super(key: key);

  final String roomID;
  final bool isHost;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: ZegoUIKitPrebuiltLiveAudioRoom(
        appID: YourSecret.appID,
        appSign: YourSecret.appSign,
        userID: userID,
        userName: 'user_$userID',
        roomID: roomID,
        events: ZegoUIKitPrebuiltLiveAudioRoomEvents(
          memberList: ZegoLiveAudioRoomMemberListEvents(
            onMoreButtonPressed: (user) {           
              showDemoBottomSheet(context);
            }
          )
        ),
        // Modify your custom configurations here.
        config: isHost
            ? ZegoUIKitPrebuiltLiveAudioRoomConfig.host()
            : ZegoUIKitPrebuiltLiveAudioRoomConfig.audience(),
      ),
    );
  }

  void showDemoBottomSheet(BuildContext context) {
    showModalBottomSheet(
      backgroundColor: const Color(0xff111014),
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(32.0),
          topRight: Radius.circular(32.0),
        ),
      ),
      isDismissible: true,
      isScrollControlled: true,
      builder: (BuildContext context) {
        return AnimatedPadding(
          padding: MediaQuery.of(context).viewInsets,
          duration: const Duration(milliseconds: 50),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 10),
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: 3,
              itemBuilder: (BuildContext context, int index) {
                return SizedBox(
                  height: 40,
                  child: Center(
                    child: Text(
                      'Menu $index',
                      style: const TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }
}