A Simple and Beautiful Sound Recorder. Hello Hello.. mic check 1..2..3…GO!..
We all have definitely used a sound recorder before. Now it’s time to make our own. You will also learn some new things along the way like how to store and delete files, etc. You’ll see that there is so much going in the background of a simple sound recorder. We will also separate business logic and the UI. I will use Flutter Bloc but should work with any state management technique you like.
This project is also available on GitHub.
The sound recorder should be as simple and sweet. We should get our work done with minimum taps as possible. For now, we will only make two screens.
- HomeScreen (usually with a BIG mic in the middle, where we record)
- Recordings List Screen (list all our recordings and hear them)
We need to start recording when the microphone button is pressed. Stop the recording when stop button is pressed. Save the file to a specific folder and hear our recordings.
Packages I’ll use
- record — To record through the microphone of our device
- just_audio — To play our recordings
- flutter_bloc — To handle our app’s state management
- permission_handler — To request and check necessary permissions
First we will look at record cubit and record state
When the user presses the microphone button startRecording() is called. Necessary permissions are first checked and recording is started.
Recordings are named with current milliseconds since epoch.
For Example: - 162722255734.rn
File type I have used is .rn, because I am naming this app as “Rapid Note”. But you can use ‘.m4a’ or any file type of your choice. After this process RecordOn state is emitted.
Advantage of using different file types is that our recordings will not be played while listening our favorite songs. Audio player does not have any problem as long as its codec is supported.
When pressed the stop button stopRecording() is called. RecordStopped state is emitted.
The amplitudeStream gives us the amplitude dB value in doubles ranging from roughly -40 (silent) to 0(loud). This will help us show the audio visualizer when the recording is on.
Dart recognizes system files as FileSystemEntity. But we need more information of a recording file like its duration and the time it was recorded so we will create a Recording class. Since we are naming our files in milliseconds we can convert them to DateTime objects.
Recordings also need to be grouped according to days to view recordings of separate days. We will create a RecordingGroup class with will contain a DateTime property and a list of Recording instances.
Files cubit is used in recordings list screen. The getFiles() method is required to make instances of Recording and store them in state. If you wonder why we are using an audio player controller here. It’s just to get the file duration. The setPath() method returns Duration?.
Recordings are being stored as List<Recording> in the state. But we need them to be sorted according to dates to be able to view them nicely inside our screen. Here comes the sortedRecordings getter which returns RecordingGroups instances and does the work for us.
Our backend word is almost done. To be able to hear our recording we need to create the Audio Player Controller class.
All the backend work is done! Now it’s time to work on the UI.
I will implement some Dark Neumorphic Design in the screens.
When clicked on MY NOTES it will navigate to Recordings List Screen.
The Recordings list screen contains grouped recordings with record timing as their title and its duration in the trailing of the list tile. Recordings get deleted when swiped right or left using the Dismissible Widget.
When the waveform at the bottom nav bar is clicked the recording is stopped.
This is how we can create a basic sound recording app in Flutter.
Thank You for reading this. I have tried my best to keep it short. Feel free to contribute to this project and help others. Happy Fluttering!
You can check out the Github Repo of this project.
Follow me on Linkedin