Build a Movie App in Flutter Using the TMDB API (Step-by-Step Tutorial)

greetings everyone how's it going in today's tutorial I'll be creating a movie application with the movie database API that the tmdb API so if you're interested to see this build and learn a lot from that consider subscribing like and share so with that said let's Jump Right In so to ensure everyone is on the same page my made of that file just created a home it returning it scaold right so this is the site where we be fetching our movies from that's the movie database so here you're interested in fetching the popular movies the top rated ones and also the outcoming ones so make sure you have an account created on the movie database right to get access to the API so I already have my account created over here and to get access to the API move on to your profile the settings tab you can see the API session over here just click on that there you go you can have access to your API key and also the access token right so the next step we interested in getting the popular movies the top rated ones and also the upcoming ones right so to get the popular movies you need to hit the end point that get us the popular movies right so as you can see the link over there that's AP pointing getting the popular movies right so I'll just copy that over here and open a new tab right so in here I'll just paste in that question mark and passing my API key so this will make a request to get the popular movies endpoint right so I need to paste in my API key so I'll just grab that from my API session over here so I can just paste it over here and make that request and get in the popular movies there you go you can see you get the results back so this is the response of the request in getting the popular movies and you're interested in in getting the backdrop pu and also the original title the title right here and the poster PA right so the next step is to create a model for the movie right so within my I'll be creating a new directory and I'm going to name this directory as the model right so within the model directory is going to be a new file so this file is going to be named as the movie model do do yeah so here I'll start by creating a class of movie and within this class we will Define what we need over here right so first of all we need to get the title of this movie right so final string title so the return type of this title is going to be a string you also need to get um you also need a backdrop path right if I'm right yeah the backdrop puth we also need the overview and finally the poster puff right so that's basically it so let's check over here we are interested in the title the poster path the backdrop path can feel free to add any additional information from the right so let's convert that and require that in the constractor so in here let's proceed to create um to map and also from map method right so Factory movie do from map and this will create an instance of the movie so this basically help us with serialization and der serialization of the object right the response we get back is ajing response right which we need to convert convert it into a map so movie do from map that takes in a map with string and dynamic values right so in here return a movie instance right so with the title is going to be the map then we assess the title in this field so this title basically points the title in the request right so should be the same as the one within the response over here so the back drop path also needs to be the same and also the overview over here map of overview right and finally the poster path so these are the details we need in the movie right you can feel free to add the additional ones if you need that so once we have our from map method created let's proceed to create out to map method right so it's basically going to be a map of string with Dynamic values right and the method name is going to be to map that returns an object so in here it's going to return an object right so the key is going to be the title that points to the title so and also the next one is going to be the backdrop path so I'll be doing same for each of them the overview the poster path right so let's proceed the functionality in fetching the movie so I'll be creating a directory within the LI folder known as the API within that I'll be creating another file with the API that that will handle the functionality in fetching the movies right so I'll proceed by creating a class of API so in here you'll be fetching um the upcoming movies the top rated ones and also the popular ones so I'll be having three different end points to get all this information right so I'll be creating a variable to hold the end points the first one is going to be the upcoming API URL the next one is going to be the popular API URL and finally the top rated API URL right so to get access to these end points let's head to over to the website can see you can just grab the URL over here and just past it right so if you don't want to expose the this API keyy I think I can just create a file over here and name it as constant that right so this is where you're creating the API key and assign your API key value right so let's rename that to a con so it's going to be cons API key there you go soin the API that you can just access your API key over here so let's proceed with the popular endo you also need to pass our API key as well right the upcoming ones so the first one is going to be upcoming / API key and the next one is going to be popular then pass the API key finally let's move on to the top rated ones right so these are mend points in getting the list of movies right so let's proceed to with the functionality fing the movies right so in here you're going to have um a method or a function right and that's going to be called get upcoming movies right so this function is going to get the list of movies so we need to import the movie model so here we be having three methods one that gets the upcoming movies the next one also gets the popular movies and the last one get us the top rated ones So within the get upcoming movies so first of all let's install the HTTP package that will help us with the functionality making the request right here there you go so in here we creating a response variable then let's import our HTTP we can I wait let's import our HTTP package so http.get right then we can just pass in our upcoming API URL so this url. pass makes sure that the endpoint is in a valid format right so in here we check the response status if the response status code isal to 200 meaning everything was successful can just proceed right if the response St to 200 the data that comes back comes as a less of dynamic right so we need to do Cod that using the code then we pass in our response. body right and the data we need is found within the results field right so we can just assess that then we just proceed to transform this data into our list of movies right so we want our return TI to be in the form of this list of movies and the variable name is going to be movies then we can just take our data variable and transform that using the from map method we just created so this data map and for each movie we take a movie model from map then passal movie then we convert that to a list and later we can just return our movies there we go so we need to handle the exception in case the response code is not equal to 200 right so in this situation you can just throw an exception over here with a message of fail to load the upcoming movies so you're going to have the similar implementation Within I get popular movies and also get top rated ones right so here we only need to change the end point there we go so let's save any changes over here so let's proceed to display the information on the UI So within my home page and the home state I'll be creating three variables to hold the upcoming movies the popular movies and also the top rated ones right so it's going to be future that comes as a list of movies and the variable name is going to be upcoming movie so let's import the movie assign the late initializer over here so let's repeat this two more times and change this to get or hold the popular movies and the last one is going to be the top rated ones so below here be having an in state where you call our API to get Sr upcoming movies the popular not to the top rated ones so over here we assign our upcoming movies variable then we call our API class that will get us the upcoming movies we'll be doing same for the popular movies and also the top rated ones there you go let's proceed so in our scafold let me bring my simulator over here with need the SC fold over here so let's start with our bar so be having an wiget with a leading right and this leading place the widget at the very start in the bar right and it's going to be an icon button that comes with the on press and also the icon right the on press is going to be the function that get called when you click on the icon and the icon is going to be the menu icon right so the icon is going to be icons. menu as you can see over there right go going to have a title within the bar right the title is going to T in the text widget in the name of the title or the movie is going to be the show spot can feel free to give it any title as well also we be having an actions and these actions place the widget at the very end of the bar and it comes as a list so you can have multiple widgets within the ACs so here be having two widgets right two icon that's the search icon so the notification icon let's proceed to Center the title as well there you go so that's basically the bar and let's set the background color of the scold to be a black color so it's going to be colors do black so you'll be repeating same in the Y bar right and let's say the foreground color to be color white there you go so let's proceed with the body right so let's start with a single chart scroll View and the chart is going to be a column the column tting the children so let's set the cross a element of the column to be cross a alignment of start right that will align the widget at the very start so the first one is going to you're going to show the upcoming movies over here right so we going to have a test of upcoming so let's start a test so with the start attributes you can assign the test style over here and change the color of the test to a white color as you can see over there so let's wrap the column within a pattern which affect all size a value of eight and saving the changes there we go so below the test you're going to have a Caro cell that will display the the upcoming movies right so first of all we need to fetch the mov right so we can use the future Builder that comes with the future and also the Builder the future is going to listen to a function that's why you provid it upcoming movies function and also the Builder comes with a context and the snapshot right the snapshot is what actually holds the data over here so here let's check for the state of the snapshot right so if Snapshot not has data right so let's check for the upsite of that if you don't have data yet you can actually return a cirular progress indicator to show that something is loading right and if we indeed get a data back I'll be creating a movies variable over here then we can assign our snapshot data in that variable then we can just proceed to return our Carousel slider so make sure you have that dependency installed right so carel slider so we want to build a method on this right that comes with the item count the item Builder know what the options the item count going to be our movies. length and also the item Builder is a function that t in the context the context the index and also one additional information that's the movie Index right and returns a ret and also the option takes in the carousel options so let's get rid of this comments there we go so wein the item Builder over here let's return um so first of all let's extract the single movie so to do that I will create a movie variable then we can move into our movies passing the index and this will get us a single movie so in here you can just return a container provide a withth value of double do infinity and also some decoration so in the decoration we passing our B radius the circular then pass a value of eight so the chart of this container is going to be image it's going to be image right so image. Network then you pass in the source so the source of this image is going to be from our movie dot the backdrop path right let initialize AR so let's what restart there we go we can see the carer but the image is not showing up right so let's provide some options to this Carousel slider let's set auto play to be true and also set the enlarge interet to be true and the as aspect ratio to be 1.4 and also the autop playe T right we want that to be 3 seconds should change every 3 seconds there we go so let's head over to the website and see how we can just make effect to the image we have right so under the images you can see the basic so this is the end point right so you can just grab up to the original so here can just replace that then you can just access our movie back drop filter or back drop PA there you go as you can see it's over here so let's proceed So Below the upcoming movies you going to display the popular movies as well so let's start with a test that will show the popular so let's proceed to change the color of this test right so with a style tribute we can assign it a test style and change the color instead the color to be colors. white right there you go as you can see over there so below that it's going to be a container so let's provide this container margin and it's going to affect it from top and down right so I provide it a vertical value of 20 and so let's provide a height to this container value of 200 so the chart of this container is going to be a future Builder that comes with a future and the future is going to listen to a function that's why it provided our popular movies and also it comes with the Builder and the builder takes in the context and the snapshot right so in here we need to check for the state of the snapshot right so if a snapshot has data so we check the opposite of that if this is false we can actually return a cirular progress indicator indicating that something is loading right so if we inde get our data back so here I'll be creating a movies where I I can assign my Snapshot data in that variable so once we have that I can just return a list view so list view. Builder so in the item builder takes in the context and also the index and returns a reg right so the list view Builder comes with the item count right so you can just pass in our movies. length and within the item Builder so in here let's say the scroll as this direction or the scroll direction to be as this do horizontal so here can just extract our single movie by passing the index to our list of movies right and we can proceed to return a container and provide a width of 150 and also provide some manin right going to be EDG instead of symmetric with a horizontal value of 10 and also some decoration provide some color color is going to be colors white and also a b radius as well for rounding the container or providing a container cular ship right a value of 15 so the chart of this contain you're going to have a clip r with a border radius right the Border radius going to be B radius circular we pass in a value of 15 and the chart of this clip AR is going to be image and the source of this image is going to be from the network right so I can just grab this URL over here there you go so once you save it you can see it reflect over there so over here let's say the height of this it made to be 120 and also the width to be double dot to Infinity this the available width and set the Box fit to be cover there you go how cool is that so these are popular movies can proceed to display the title as well so let's proceed to show the top rated movies as well so I'll just copy and paste this and changing the text over here to be top rated right so in fetching it we need to fetch our top rated movies so we need to change the future as you can see over here how cool is that so that's basically seeing our tutorial until then stay tuned

Channel: CodeWithDarkwa

Views: 1,671

Keywords:

Id: Ixxy5f5OqUQ

Length: 22min 53sec (1373 seconds)

Published: Fri Jan 26 2024