My First Flutter App
a basic audio-video player using flutter.
On this journey of mini-app development, I learnt various new concepts of flutter app-development in a small amount of time. As the clock was ticking, I had a little time to complete the task. Here’s a brief description of what I learnt and how my code worked.
To create the home page of the app, I preferred using StatelessWidget as home page’s UI was only depending upon the configuration information in the object itself. Then using Scaffold, I defined AppBar and body of the page. I wanted to use material design and scaffold implements material design visual layout structure well. The Scaffold was designed to be the single top-level container for a MaterialApp. For the creation of the “Browse Online” button and “Play Locally” button, I used Column widget as it allows placing its children in a vertical alignment. But I wanted flexibility in adjusting padding and margin, so I wrapped the column in a container. A container allows flexible adjustments to height, width, margin, padding and also provides a method for box decoration. This pattern is common in my further lines of code with column and row widgets.
For the creation of the two buttons on the home page, I preferred Raised Button class. Raised button is based on material design whose elevation increases when the button is pressed. I also used icons in the buttons for better representation of the actions performed. These raised buttons were also wrapped in a container for flexible adjustments.
After creating the “browse online” icon, I routed it to “FormScreen” and “Play Locally” to a page which asks the user to choose from “audio” and “video”.
Creating the form page
For my online video player, I wanted to take input from the user. I thought that the user should be able to view his/her desired video. To make this happen, I created a column and used the form widget to wrap it. Form widget wraps the form field widget which maintains the current state of the form. It’s like a container for form fields. Further, the form provides us with an attribute named “key” which comes into play when there are multiple forms in the page. It helps in providing a unique value to the form. Then for the validating the input in the form field, I used TextFormField attribute. TextFormField widget contains a TextField which it conveniently wraps inside formField.
In the next step, I wanted to save the string URL obtained by the form for future use. For this, I created a function which would save the obtained text if validation was successful. The validate attribute has an initial null value, which is mutated when the user enters a new value into the form.
Creating the audio page
To make my audio player easier to use, I routed local_play in such a way that on clicking ‘Audio’, it gets directed to a third page which I named as ‘LocalAudio’. But before that, I installed the audio_player plug-in from pub.dev. Further, to make my audio player interactive, I created it with the help of StateFul widget. The stateful widget allows keeping a tab on changing state on every action. I used a timer class to initialize a timer and set the duration to 0 seconds. Similarly, I initialized a position checker and set the position minimum to 0 seconds. This was done so that the app can save different states of the audio. In this way whenever the user pauses the song, the app would save its position and time with the help of these two widgets. And in need, the app would be able to resume the audio. Also, I set the duration and position counter to record state in seconds.
Then to create the page I used the scaffold with the container as the child keeping the box decoration similar to previous pages. To give the app a better user experience, I used the AssetImage() method which fetches the image from assets bundle to put the album art in place. In the end, I used RaisedButton to create “Play”, “Pause” and “Stop” button.
Creating the video page
For online and offline browsing, I created two types of video players with almost the same layout. But both the players differ in one method. For designing the video player, I first installed video_player plug-in from pub.dev. Then with the help of StatefulWidget, I created VideoPlayerPage. To create the skeleton of my video player, I used VideoPlayerController class. The advantage of using this class is that it flexibly controls a platform video player and provides updates when the state is changing. This class provides us with various widgets like VideoPlayer widget, dispose etc. For this app, flutter would use VideoPlayer widget as a platform and calling dispose would help in reclaiming resources after use. But before using VideoPlayerController, I needed to initialize it. Initializing the controller would establish the connection to the video and prepares the controller for playback.
For online browsing, I used VideoPlayerController.network() method whereas for playing videos from the local, I used VideoPlayerController.asset() method. I also added a listener to the VideoController which helped in storing the values every time the VideoController changed. I used initState() class to initialize listener and also to initialize position checker. I made sure that this stores new state at every second. I made my video player adjustable with the help of the AspectRatio() method. This method allows the screen to adjust according to the aspect ratio of the video playing. Keeping the rest of the layout similar to the other pages of the app, I created two buttons using RaisedButton. One for “Pause/Play” and the other one for returning to the home page.
Upgrading the UI
After creating the structure of the app, my task was to make the app beautiful. For experimenting with the colours, ratios and shadows, I added ‘decoration’ inside all the containers. By using BoxDecoration, I added LinearGradient to the background. I kept the base colour to be grey and used shades of purple and grey for the gradient and the app bar.
Running the code
The code for the app is available on my Github profile. Open the main.dart and click ‘Run and Debug’. To play locally, add your favourite songs and videos in the ‘assets’ folder which is present in the Audio-Video-Player-Flutter repository.
Future scope
In the upcoming version, I plan to integrate youtube API into the app. Then the user would be able to watch youtube videos as well through my app. I also intend to extend the playlist of the app. Further, I wish to add animations in the widgets to make the app more user-interactive.
