Steemit Learning Club S23W1 - Building a Movie Browser App with Flutter – Exploring API Integration and UI Design

Assalamualaikum my fellows I hope you will be fine by the grace of Allah. Today I am going to participate in the steemit learning club season 23 week 1 by @mohammadfaisal under the umbrella of steemit team. It is about the technology and development. Let us start exploring this week's learning club.

Made with Canva

I have worked with Flutter in last season. And Today I will be creating an application with the help of the Flutter Framework. I have decided to create an application like a movie finder where the users can explore different movies such as the popular, top rated, and upcoming movies. This application will serve like a Movie Browser.

In my this project of movie browser there will be these features:

• HomeScreen
• Displaying different categories of movies using API
• Dynamic Search Bar
• Movies Details Screen
• Watch Trailer option

These will be the major screens and features of my this movie browser.

I am going to use the movies API from the widely used website https://www.themoviedb.org/settings/api. This API will help me to fetch and display the data. To use their API I have created an account on the website and after verifying the email I generated the API to use.

And in order to fetch the API data and to display the images and playing the trailers I will have need of following packages:

• http: ^1.3.0
• provider: ^6.1.2
• cached_network_image: ^3.4.1
• youtube_player_flutter: ^9.1.1

These are the latest versions of these packages at the time of building the application and it can be changed later on with the new updates.

I have created a constant.dart file to store the constants in this file. In this application there a total of three constants which do not change over time. The first is the API key I have removed the API because of the security reasons. And then there is a base url of the API. The third is the image base url.

I have created a movies_service.dart file which handles all the functionality of the core features of the application. It handles the fetchMovies, loadTrailer, and searchMovies functions which are the core features of the application.

This is the asynchronous function to fetch movies from the API. There is the use of the if-else condition. It checks if the response from the API is valid then it returns the result in the form of the movies otherwise it shows the exception error.

In the movies_service.dart file this is the search function which allows to filter the movies on the basis of their name. It fetches all the available movies with similar keywords and display them in the list while fetching their thumbnail and name.

Similarly this function allows the application to fetch the trailer of the relevant movie from the youtube. It uses the flutter youtube package to fetch the trailers of the movies. We can play those trailers in the application to check out the story of the movie.

This is the home screen of the movies browser application. This home screen shows the different categories of the available movies in the API. At the top it shows the popular movies. Then it shows the top rated movies. After the top rated movies the home screen shows the upcoming and now playing movies.

Each movie is shown using the Card widget and inside the card widget there is a column which have ClipRRect widget to display the poster of the movie and a Text widget to display the title of the movie. And when the user clicks on any movie then it is redirected to the detail screen.

This is the details screen of the movies. In this screen there is the complete poster of the movie, a short description of the movie and a button to play the movie trailer. If the trailer of the movie is available then it starts playing the trailer and on the other hand if the trailer of the movie is not available then it display an error message to inform the trailer is not available.

Here you can see the trailer has different options for the video. We can accelerate the video. There is a speedometer and with the help of this meter we can increase or decrease the speed of the video. The quality of the video is also very high and the trailer runs very smoothly in the application without going outside of the application.

This is the search bar of the application. It is how the search bar works. When the user searches anything like a keyword of the movie then it dynamically searches and return data based on the keyword. In this picture you can see I wrote the keyword hindi and it displayed all the movies relevant to this name.

In the GitHub repositroy I have uploaded all the necessary. These necessary file are visible in the screenshot of GitHub repository.

This is the complete movies browser to search and find the movies and watch their trailers to decide whether you are interested in that movie or not. Moreover I will be looking forward for the improvements in this application with the help of the Technology and Development club mentors.

---

I invite my friends @kouba01, @sergeyk, and @chant to show their capabilities in this technology and development learning club.