Create audio spaces with Flutter

[vrajdesai78]

Objective

Build an Audio Spaces mobile app using our Flutter SDK with a well-designed UI, implementing the following features:

• Lobby screen to join a room
• Grid of listeners and speakers
• Peers list with the ability to change a user's role based on hierarchy
• Send Reactions
• Feature to send a request to speak

Picking up this issue

If you'd like to work on this, please comment "picking this up" below, and I'll assign the issue to you.

Questions

• If you need assistance or clarification, feel free to comment below.
• You can also ask your doubts 24x7 in our Discord channel.
• Check your ranking after finishing this task on the Leaderboard.

Resources

• Familiarize yourself with our Flutter SDK.
• Explore our existing sample Flutter app to learn more.

Good Luck! 🍀

[lazyMonk1010]

Hey @vrajdesai78 Picking this up!!

[rkmonarch]

Hey @vrajdesai78 picking this up

[scarlettverse]

Hey @vrajdesai78 , could you please assign this issue to @rkmonarch.

[vrajdesai78]

Hey @vrajdesai78 picking this up

Hey @rkmonarch , if you are stuck anywhere feel free to ask questions. Also, would love to know the progress you have made so far.

[rkmonarch]

Hey @vrajdesai78 won't be able to work on this issue as of now

[drraghavendra]

@vrajdesai78 please assign this issue to me i will work upon to provide the solution.

[vrajdesai78]

@vrajdesai78 please assign this issue to me i will work upon to provide the solution.

Hey @drraghavendra, thanks for picking up this, do let me know if you need any help.

[drraghavendra]

To build an Audio Spaces mobile app using Huddle01 Flutter SDK with a well-designed UI, implementing the following features:

Lobby screen to join a room:

1. Create a new Flutter project and add the Huddle01 SDK as a dependency.
2. Create a new screen for the lobby. This screen should have a list of all the rooms that are currently available.
3. Add a button to the lobby screen that allows users to join a room. When the user clicks on the button, you should use the Huddle01 SDK to join the room.
4. Once the user has joined the room, you should redirect them to the main room screen.

Grid of listeners and speakers:

1. Create a new screen for the main room. This screen should have a grid of all the listeners and speakers in the room.
2. Use the Huddle01 SDK to get a list of all the users in the room.
3. For each user, create a widget that displays their name, avatar, and role.
4. You can also use the Huddle01 SDK to get the audio levels of each user. You can use this information to highlight the users who are currently speaking.

Peers list with the ability to change a user's role based on hierarchy:

1. Create a new screen for the peers list. This screen should have a list of all the users in the room, along with their roles.
2. Use the Huddle01 SDK to get a list of all the users in the room.
3. For each user, create a widget that displays their name, avatar, role, and a button to change their role.
4. When the user clicks on the button to change a user's role, you should use the Huddle01 SDK to update the user's role.

Send Reactions:

1. Add a button to the main room screen that allows users to send reactions.
2. When the user clicks on the button to send a reaction, you should use the Huddle01 SDK to send the reaction to the room.
3. You can use the Huddle01 SDK to send different types of reactions, such as thumbs up, thumbs down, and applause.

Feature to send a request to speak:

1. Add a button to the main room screen that allows users to send a request to speak.
2. When the user clicks on the button to send a request to speak, you should use the Huddle01 SDK to send the request to the moderator of the room.
3. The moderator can then decide whether or not to grant the user permission to speak.
4. If the moderator grants the user permission to speak, you should use the Huddle01 SDK to unmute the user's microphone.

Well-designed UI:

• Use a consistent design throughout the app.
• Use clear and concise labels for all buttons and controls.
• Make sure that the app is easy to navigate.
• Use high-quality graphics and animations.

Value added tips for building a well-designed Audio Spaces mobile app:

• Use a dark theme to make the app easier to use in low-light environments.
• Allow users to adjust the volume of the speakers and listeners independently.
• Add a mute button to the main room screen so that users can quickly mute themselves if needed.
• Implement a push-to-talk feature so that users can only speak when they are holding down a button.
• Add a feature that allows users to record the audio of the room.
• Add a feature that allows users to share the room with other users.