How to create a SoundCloud Waveform in Flutter?

Using Flutter Audio Waveforms package!

If you have ever checked out the SoundCloud website then you would definitely remember the cool audio waveform they have in there.👇

It’s a great one!✨

In this article, we’ll see how we can recreate that waveform in flutter using a package which I recently published called Flutter Audio Waveforms.

Disclaimers:

• Some details of the process might be neglected due to the scope of the article.
• Colors/gradients in the design may be adjusted for the sake of the article.

Table Of Contents :

1. Installing the package
2. Getting and processing the audio data
3. Breakdown of the design
4. Creating the waveform

1. Installing the package :

Add the following dependancy in your pubspec.yaml file.

flutter_audio_waveforms: ^1.1.1+2

This package is an UI library for easily adding audio waveforms to your apps, with several customization options.

2. Getting and processing the audio data :

As the scope of this article is to demonstrate how you can use this package to create the SoundCloud waveform so the details regarding this section won’t be discussed in this article.
You can refer to this prev article I wrote that talks about this section in details.

Once you’ve gone through it, we can move on to the interesting part now! That’s creating the waveform!😁

3. Breakdown of the design:

Down below I’ve broken down the SoundCloud waveform.

So we have Major and Minor waveform both of which are the same but have few differences in them

• Height of Minor waveform is smaller than Major waveform.
• Minor waveform is just a copy of Major waveform but flipped/inverted.
• Colors/gradients of Active and InActive waveforms are different for both of those.

With this information in mind, let’s see how we can recreate it.

4. Creating the waveform :

The package offers us the several Waveform Types that we can use and customize as we want.

One of the waveform type called RectangleWaveform and some features were heavily inspired by the SoundCloud waveform. We’ll be using it to create the SoundCloud waveform.

Major waveform :

So here we have 3 more important things beside the dimensions of waveform.

• samples : This are the data points that we use to draw the waveform. Check out this article to learn how to generate this.
• maxDuration : Maximum duration of the audio.
• elapsedDuration : Elapsed duration for the playing audio, based on this active waveform is shown.

For the scope of the article, you don’t have to worry about how we got these parameters, we’ll focus only on the UI part and also I’ll have the source code shared at the end of the article for you to explore.

Result :

There’s our Major waveform with it’s active and inactive waveforms. If you notice carefully, then some of its points are drawn below the main axis.
So we’ll need to find a way to make waveform drawn in the absolute direction i.e upward.

For this case, every waveform type has a parameter that lets you achieve this called absolute .

Result :

Looks cool, right! Now, let’s add the gradient to the Active waveform and update the color for InActive waveform.

Alongside gradient we’ll also update the border colors and width for both Active and InActive waveform through the activeBorderColor , inactiveBorderColor and borderWidth parameters respectively.
This will add a subtle difference to the waveform but will look great!

Result :

With this we are now almost halfway through our design.🙌

Now onto adding the minor waveform.

Minor waveform :

As this is exactly same as the Major waveform, we’ll just duplicate the Major waveform and update somethings.

Our Minor waveform is inverted, for this we’ve a special parameter in the waveform types called invert . This will flip/invert the waveform upside down and we’ll add it below the Major waveform with a bit of spacing in between.

Result :

Way to go! Let’s make the final updates on its height and gradients/colors to make it look a bit different from the Major waveform as per the design.

Result :

Wohhh!😍 This looks beautiful!

Summary :

• Learned how to recreate SoundCloud waveform design with few design differences.
• Learned about Flutter Audio Waveforms to create the waveforms.

🙏 Thanx a lot for making it this far. Hope you enjoyed todays article. There’s lot more to explore into the audio waveforms and I’ll be pushing some exciting articles around this in upcoming weeks.
I may just have something coming up next week!😉 about real-time audio waveforms so, stay tuned!🙌😁

As always you can find the source code here.

👏 Enjoyed the article! Would appreciate the clap :)
🚀 More such articles coming where we explore flutter and other interesting stuff in app development.
👋 Follow up for upcoming articles if you enjoyed reading and learning from what I write.
💬 Let me know what you liked and what you would like to read in upcoming articles.

Explore other articles from the stack 💙

Flutter Design Challenge : Spotify Album Scroll Interaction

Animations in Flutter : Implicit Animations