Flutter Voice Messaging App.
In this article we will see how to implement Whatsapp like voice messaging feature in our chat app.
Prerequisite:
- Firebase Project
- Flutter App connected to firebase project
- Enable Google Sign In (remember to add SHA keys to the project)
Step 1:
Get the the dependencies in the pubsec.yaml file. You can get all these on https://pub.dev
Step 2: Creating the sign in page.
Since our focus is on show voice message functionality we’ll make simple login page.
First we have to initialize Firebase in our flutter app main.dart file.
After the Initialization, we will add our sign in code as our logic to check if user already signed in or not.
Step3: Creating the Home Page
Our home page will be populated with other user-IDs which are signed in our app other than current user-ID.
Step 4: Creating the chat page
First we will get the chat room-ID from Shared Preferences to get all messages between friends user-ID and current user-ID.
Now we’ll write code to start, stop and play the voice message, for this we will need to import record_mp3, audioplayers, path, permission_handler and path_provider libraries in chat.dart page
Now we’ll need to send these voice messages to our friend, for this we need to import firebase_storage library. First we’ll upload the voice message to firebase storage and send the URL of voice message returned by the upload function in the content field while sending or saving the message in cloud Firestore.
Now finally we’ll build the UI of conversation , timestamp we’ll be used as message id.
With this we have completed all the code snippets, now lets combine all this together and build it.
To view the complete Project head on to https://github.com/abhay1205/voiceChatApp and give a star if found it helpful.
In the next part we’ll see how to implement Whatsapp audio and video call feature and search functionality. Till then Namaste
