In this series of tutorials, we will learn how to make a radio app in Flutter that works on iPhone and Android devices. By the end of this series, you will be able make a radio app that gets the top online radio stations across the globe and listen to them.

Part 2 of this tutorial can be found here where the end result of the app would look like this:

App end result in Part 2

Why Flutter?

We will use Flutter to make our radio app because we can write one app for both iPhone and Android devices! Plus, Flutter is much easier and faster to understand than doing the app natively.

What do I expect in this chapter?

We start simple and do baby steps. By the end of this tutorial, our app will have the following:

Play one online radio station (Planet Rock)

Simple UI that has a mini player at the bottom of the screen

Simple online radio app for iOS and Android

I just want the code, not the tutorial

If you are here just for the code, no problem! Just make sure that Flutter is already set up in your machine and you’re good to go. Complete source code can be found here.

themobilecoder/flutter_online_radio_part_1 Part 1 of the online radio app tutorial series. Contribute to themobilecoder/flutter_online_radio_part_1 development by creating an account on GitHub.

App architecture

The components of our app can be divided into three blocks which are the UI, the business logic and the radio service.

Radio app architecture

For this app, we will follow the BLoC pattern. This architecture works by sending events to the BLoC component while widgets listen to state updates. If you want to learn more about BLoC pattern, check out my guide.

Beginner’s guide to BLoC Pattern in Flutter This article will serve as a beginner’s guide to BLoC pattern. I will provide my own simple definitions and an example using this pattern in Flutter.

Business Logic

We put the main logic of our player in the BLoC. It is responsible for managing the states of our online radio station player, as well as playing the online stream. For simplicity’s sake, the BLoC will have two states, paused and playing state.

During this state, the online radio stream will not stream. It will also be our starting state.

Radio Player

This component will be the actual service that plays a radio station when we provide the station URL. We will use the just_audio library to implement this.

User Interface

Finally, the last component of our project is the UI. The user interface will be the visible component to our users.

Pressing a button will send a message event to our business logic component. In turn, it will play or pause our radio!

Let’s start writing code!

If you read through all the explanations above, this part should be easy to understand.

I. Dependencies

First thing to do is update your pubspec.yaml to include the libraries for BLoC, radio player and some assets

II. BLoC Setup

We need to set up the bloc in our widget tree so that we can access this component anywhere in the UI. We inject this in our main RadioApp class so that all its child widgets can use the bloc.

We also define here which radio player our BLoC will use. Let’s define how our radio player service next.

III. Radio Player Service

Our radio player service will have a simple interface that has a play and pause functions. We pass in the URL of our radio station in the play method.

We just need to make an instance of AudioPlayer which comes from the just_audio library. In order to use this, we first set the URL of our radio station. Even though this method call is asynchronous, it is a good practice to await for this call to finish before we start playing the radio.

Note that I added a boolean flag that tells us if the URL has been set before or not. The first time we load the URL, it takes a few seconds to initialise the radio station. Think of this flag as our mini cache that speeds up our radio service.

IV. BLoC Implementation

The logic of our app will be very simple. Whenever the BLoC receives a play event, BLoC will play the radio station. It will also update the current state to playing state.

The play event also includes the URL of the station to be played. It makes sense to put it here because in the next part of this tutorial series, we should be able to select a radio station from a list and be able to play them dynamically.

On the other hand, if BLoC receives a pause event, it will pause the radio and update the state to paused state.

A good practice is to first check the current state first before processing an event. In our case, the play event only plays the radio station if the BLoC is not currently in a playing state.

V. Home Screen Logic

The home screen will be just a simple scaffold widget which has an app bar on top, a status widget in the middle of the screen and a media bar that includes a button and the radio information.

For this tutorial, we are going to use the radio station Planet Rock. We define the url of this station in the home screen temporarily. I also included the image we will use as a cover art.

Widgets that listen to state changes

Live Radio URL

https://stream-mz.planetradio.co.uk/planetrock.mp3

For widgets that we want to change according to the BLoC states, we will use a BlocBuilder widget. We want to change both the status and the button when the state changes, so we wrap both of them with a BlocBuilder.

First, let’s have a look at the status widget of the home screen.

If the BLoC state is paused, then we display a static indicator. On the other hand, if the state is playing, we replace it with an animated widget.

We then do the same thing for the button. If the state is paused, we display a play button. We then show a pause button if the state is in playing state.

Don’t forget to add the button press listener! If the button is a play button, pressing it would send a play event. On the other hand, pause button sends a pause event when pressed.

Here is the source file of the home screen after combining all our widgets together.

Conclusion

That is it! We just made a simple radio app using Flutter.

We used the BLoC library to structure our app. Then, we used just_audio library to stream our live radio. We also designed our screen so that the widgets change according to the state of the radio.

What’s next?

We will continue adding features to our app. In the next part, we should be able to obtain different radio stations from any country.

Stay tuned!

Useful Links