This flutter radio player tutorial will show you how to stream live radio inside a mobile app that runs on both Android and iOS. Whether you run an online station, a church broadcast, or a local FM channel, having your own app puts your stream one tap away from listeners.
Flutter is a great choice because you write one codebase for two app stores. In this guide, we will keep things simple and beginner-friendly, step by step.
What You Need Before You Start
Before writing any code, make sure you have a few basics ready. This will save you time and frustration later.
- Flutter SDK installed and working (run flutter doctor to check).
- An editor such as VS Code or Android Studio.
- A real device or emulator for testing.
- A working radio stream URL, usually from a Shoutcast or Icecast server.
The stream URL is the heart of your radio app. If you do not have one yet, you can get a stable stream from a radio streaming plan such as SonicPanel Radio Lite, Pro or Max on our hosting page.
Step 1: Create Your Flutter Project
Open your terminal and create a new project. Give it a clear name, like my_radio_app. Then open the folder in your editor.
Run the default app once to confirm everything works. It is much easier to fix setup problems now than after you add audio code.
Add the Audio Packages
For this flutter radio player tutorial, we will use just_audio, a popular and reliable audio package. Open your pubspec.yaml file and add it under dependencies. If you want lock screen controls and background play, also add just_audio_background.
Save the file and run flutter pub get to download the packages.
Step 2: Build the Basic Radio Player
Now for the fun part. The basic idea is simple:
- Create an AudioPlayer object when your screen loads.
- Give it your stream URL using setUrl().
- Call play() and pause() from your buttons.
- Call dispose() on the player when the screen closes, to free resources.
Your screen can be a simple StatefulWidget with the station logo, the station name and one big play/pause button. Keep the first version minimal. You can always add style later.
Show the Right Button State
Listeners want to know if the radio is playing, paused or loading. The player offers a playerStateStream that you can listen to with a StreamBuilder. Use it to show:
- A spinner while the stream is loading or buffering.
- A pause icon while audio is playing.
- A play icon when audio is stopped or paused.
This small detail makes your app feel polished and trustworthy.
Step 3: Enable Background Playback
Radio listeners rarely keep the app open. They lock their phone or switch to another app. Without background support, the music stops, and that is a bad experience.
Android Settings
With just_audio_background, you initialise background support in your main() function before running the app. You also need to add the required permissions and service entries to your AndroidManifest.xml, as described in the package documentation.
iOS Settings
On iOS, open your Info.plist and enable the audio background mode. Without this, iOS will pause your stream as soon as the app leaves the screen.
When background audio is set up, you can also pass a MediaItem with the station name and artwork. This shows nicely on the lock screen and notification panel.
Step 4: Handle Errors and Weak Connections
Live streams depend on the internet, and connections drop. A good radio app handles this gracefully instead of freezing.
- Wrap setUrl() in a try/catch and show a friendly message if the stream fails.
- Offer a retry button so users can reconnect easily.
- Use HTTPS stream URLs where possible. Plain HTTP streams may be blocked by default on Android and iOS unless you change security settings.
- Test on mobile data, not only Wi-Fi.
A reliable streaming server also makes a big difference. Frequent drops are often a server problem, not an app problem.
Step 5: Add Extra Features Listeners Love
Once your basic player works, you can make the app more engaging. Popular ideas include:
- Now playing info: show the current song title from your stream metadata, if your server provides it.
- Sleep timer: stop playback after a set time, perfect for night listeners.
- Volume slider inside the app.
- Share button so fans can invite friends.
- Multiple stations in a simple list, if you run more than one channel.
Add features one at a time and test each one. This keeps bugs easy to find.
Build It Yourself or Use a Ready-Made App?
Following a flutter radio player tutorial is a great way to learn. But publishing a polished app to Google Play and the App Store takes much more work: design, icons, store listings, testing on many devices and ongoing updates.
If you want to launch faster, a ready-made solution can help. Our Single Radio Flutter app is a single-station radio app for Android and iOS with a music visualizer, sleep timer and AdMob support. You can browse more radio scripts and apps on our products page.
Need something unique for your brand? Our team offers Flutter app development for custom cross-platform apps built from one codebase.
Final Tips for a Successful Radio App
Before you publish, keep these points in mind:
- Test on real phones, both Android and iPhone.
- Check that audio keeps playing with the screen locked.
- Use a clear, recognisable station logo as your app icon.
- Keep your stream URL stable, because changing it means updating the app.
We hope this flutter radio player tutorial gives you a clear path from an empty project to a working live radio app. Start small, test often, and improve step by step.
Ready to bring your station to mobile? Tell us about your radio app idea and get a free quote from our team today.
Frequently asked questions
Which Flutter package is best for a radio player?
Many developers use just_audio for playback, often paired with audio_service or just_audio_background for lock screen controls and background play. Both are popular and well maintained.
Can a Flutter radio app play in the background?
Yes. You need a background audio package plus the right settings, such as background modes on iOS and the needed service permissions on Android.
What stream formats work in a Flutter radio player?
Common formats like MP3 and AAC streams from Shoutcast or Icecast servers usually work well. HLS (.m3u8) streams are also supported by most modern audio packages.
Do I need my own streaming server for a radio app?
You need a stream URL from somewhere. If you run your own station, a radio streaming hosting plan gives you a stable URL to use in your app.
Is there a ready-made Flutter radio app I can use?
Yes. If you prefer not to build from scratch, a ready-made Flutter radio app script can save a lot of development time.
