movie app flutter flutter movie app using tmdb api flutter complete project movie app tutorial

hello everyone from today onwards we will be starting a new series on building the complete uh movie recommendation app using flatter application for the State Management we wouldn't use any provider or block or Riverport instead we will use only Sate for the Simplicity also we will be fetching the uh movie and other TV series data from the tmdb API so you will learn more about fetching data and displaying it in the UI also based on the user preference uh we will suggest user the similar movie or we'll try to recommend the user uh the movie which they mostly like also I'll provide all the code in the GitHub and we'll try to update it throughout the series uh this will be the full Place uh complete flutter movie application so stay tuned throughout this whole series all right so here we have the minimalistic boiler plate code for your flutter application inside the main do dot we have the minimalistic UI which return the homepage also we have the API key folder which contain the API key L on this video I'll tell you how to get that API key from the tmdb API and our homepage screen return return the scaffold and inside the body it custom scroll view so this is our folder structure and I'm creating a new folder repeated function in which we are going to place the most repeated function now let me show you how to get the API Key by using this API key you can basically fits everything you like every movies TV series around the world once you go to the tmdb website click on the two register API key create your account and get the API key after you get the API key store the API key under the string API key variable you will need this API key to request the uh URL which will provide the J of the movies and TV series so inside the training section there's one method get trending uh you can see how it works in the variable section I am pasting my API key uh just for the demonstration and media type let's select all now let's get the trending movie of the week so you get the U URL when I enter this URL I get a huge list of J of the trending movies oh sorry of the trending movies plus web series I can easily pass this s and see it by using the Jon parser when I past the complex Jon the Jon parser website break down the J and here you can see the every detail like name Revenue ID popularity release date a short description Etc okay so basically by just changing some parameter in the URL we can get trending movies uh for the day for the week okay I change week today and I got list of the for the trending movies or web series on that particular day so check out this website here's a lot of thing also you can search movie now inside the movie section I just go to the top rated and paste my API key now I can select the number of pages it will return return and by using this link I can get a list of Json of the top rated movies so once you register and get the API Key by using various link you can get the various type of Jon and only thing you have to do is to just put that gon output or the uh gon response from the tmdb website to your flutter UI it's pretty much easy now I think I have given pretty much a quick overview of the tmdb website Also I suggest you to check it once in this file I have provided the different type of link for each different type of link will give you the different type of Jon for example the trending movies URL will get the Json response of all the trending movies for creating the beautiful UI and a beautiful fade between the body and the Apper I have used the custom scroll view inside it I have use sliver which should contain the sliver app bar and also it should contain the sliver list delicate I think for the app bar I have uh placed only trending text now our slipper app bar is complete for the slier list I'm going to write a simple sample text on the center all right now for the front part I want to to see a large Apper which shrink when user scroll through it also I want the automatic playing list of the top trending movies or series and users should be able to select between the weekly and daily trending movies so this is pretty much our abar UI for this automatic sliding movies in the front UI part we need a slider and there's one beautiful package in the pop. de it is Carousel slider you might have heard of it I recommend you to go through Carousel slider package once it let you create the sliding effect on the number of image in various form you can see it in the demo you can use various type of image sliding as shown in the demo also you can directly use it by copying the carousel slider function code from this for the fetching URL purpose uh we also need one package name YTP okay this this package has 5,000 likes so you can install this package I use the pups check assist vs code extension which allow me to directly add package from the vs code terminal you can add this two package by any method after we successfully import we need to create one future function I have created future function name trending list home inside it I have created one variable trending week response and I'm going to call one method await sttp . kit U.P and we need a URL which will give us all the trending week movies are Series so here's the URL I'm am going to paste it the http.get request inside the trending week response container status code if it success means 200 then basically it will give us the Jon data and we have to decod it so I have stored the J decoded data inside our temp data variable and if you see the Jon is in form of like this and all the data we need is inside the uh result if you look at carefully so our trending week session uh contain all the data inside the result variable I think it's clear up to this now inside the result we have lots of movies it is showing the 20 movies so we are going to look through each and extract each of the data so I have created a for Loop and I'm constantly adding to the trending list here you can see the parameter there is ID Bo AAS profile path uh General ID popularity vot average so I we can get all the data by specifying under the uh square bracket and each time I'm going to add this in the trending list variable which is of list type of map and string okay now in the abar we are going to uh add our UI so that the data can be shown here I want to create very large appar so I'm going to give the expanded height of 0.5 and I'm going to create a flexible container and inside the flexible container background I have created a future Builder which will call the function trending list home which we have just created it will uh check for the snapshot and if the connection stage is completed then it will show our slider else it will return the circular progress indicator I can copy all Carousel slider code from the pop. de but in the item I have ma the variable trending list to each index so here's our variable to the list now I have written a builder uh I'm going to return gesture detector it is for the letter purpose if we want to see the individual detail of the movie in our home screen okay uh basically I want to get the ontap property inside the just detector now inside it I will create a container and inside the container I want to place the movies or series image okay now you can see the images and inside the container I have uh given some URL which is inside the poster path if you search to the Google how to uh get the poster path from the tmdb then you will get something so okay this website SCE that the to get the image from the tmdb we can use this website or sorry we can use this link okay so I have used the same link and from the any Json file I can copy the poster path and replace the poster path with the copied URL then I we get the image of the specific movie or series uh okay oh what's going on here let's put this there oh there's one square bracket we have to remove it uh you can see we got the image successfully if we want to uh get the image of the different movie or series then we can copy the poster path paste it in the poster path URL okay okay in this way you can get the poster path of the any movie or series you want I have written the same thing over here inside the network image as you know we have added our all Json data to the uh trending list variable so and we have mapped this trending list variable inside our Carousel so each time it is calling the poster path of the every movie Inside the trending list variable if you check the description you can see the GitHub Link in which I have post all the code and you can see it and try to figure it out so this is it for today video so far we have created a large app bar in which we are showing the list of the movies now I want a user selectable button so that user can switch either he or she want to see the uh trending movie of the day or trending movie of the week so for implementing another one I'm going to create a new variable same as above there's nothing difference the only difference is the URL which we pass and I have created a new variable U uh which will help me determine whether it is a trending movie of the day or trending movie of the week okay so let implement the uh select table uh selectable icon which is our drop down menu I'm creating a small container and I'm decorating a little bit a little bit of padding and inside the child I have made a drop- down button so I will be using that U Val value and on change property we will uh Define it later so this top down button will have value of the U which I have defined by default as one so far we are seeing the small uh drop down icon in the item we have to define the number of element which is drop down menu item in which the first item I have defined is as a text of weekly and given it the value one similarly for the second drop down menu item I have given side text daily and value of two from here I can control it perfect as you can see uh the value is not being changed when user select it it's because we haven't write anything in the unchange property uh before writing some code in unchange property let us make it even more beautiful this is just optional now for the on change property whenever the user uh try to change the drop down menu value then we are going to call our set state which will reload our UI in this abar the all movie and TV series data are inside the trending list variable which we have updated by using the above future function in our previous video so first of all on change property we should clear that variable it means we should remove everything movie and DV data from the trending list variable so it's empty and after it we have to update the U varable to the selected drop down menu value for an example for a weekly trending the U will be one and for the daily training when user select the daily the UL will be updated to Value two it is successfully updating but as you can see uh the movie and TV series are same so uh I think it's not working you can see I have assigned a weekly as in value one and daily as in value two I have also updated the value but the problem is every time the movie and series data inside the trending list variable is same we have to do a slight modification in the future function in our future function if you Val uh if value is one then we should call the trending a weekly URL a weekly trending URL and if the value is two then we should call trending day URL inside this if block I can paste the code which will update the trending list variable with the weekly trending movies and Series in the lcf block I can write a few equal equal to and I have to shift the below code which will update the trending list variable with the daily trending movie and series you can easily shift it and put it inside the lft block okay now it will update the trending list our main variable of type map string and dynamic okay I think now it's looking good daily trending shows the Wanda forever belong The Last of Us and on changing to weekly it's so different type of movies and Series so I think we have done it correctly so far we have successfully completed our abar part below our Apper you can see we need three more tab for that we have to define the tab controller we need the three separate tab so that we have given the length of three to our tab controller to use the tab controller we have to do a slight addition in our homepage state by writing with ticker provider State mixing so that's it now we can modify our body part inside this laor list we can define a container of height 45 inside the child we have Define the T Bar and the tab the tab canap our list of wiget which need the controller so we have defined controller to our tab bar a tab controller you can see Theo valid value range is MP or zero if we change our length to zero then the error will go when we change our length to three it expect the uh three list of wiet in the tab you you can see the tab accept the children so it is expecting the uh three children uh before defining our three children let us slightly modify something and make it look our Taber a little beautiful you can see I have successfully provided the three wiget inside the tab now again below it we need the selected content so I'm going to define a container inside the child of container we Define the tab bar view it also expect the same number of widget which we have given in our tab or in our above length it also need the controller and inside the children it also need the uh three widget so for TV series I have defined TV series widget for the movies I have defined movie widget and for the upcoming I have defined the upcoming widget when we select the TV series it will call the TV series widget when we select movie it will call the movie widget and similar for the upcoming so our TV series movie and upcoming widit areen Define uh we have to start let me create one separate folder for each TV series movies and upcoming so that the file structure will remain pretty I have created a new folder section base inside it I'm going to create TV series do dot uh movies do do and upcoming Dot in movie dot dot I going to create a stateful pisard name it the be similarly for the TV series dot dot I'm going to create a stateful widget and name it as TV series whenever in our homepage when someone click the TV series movies or upcoming it will call uh this three widget which I have just created so we have to import all these three file first of all we going importing movies. dot then we'll import TV series do dot then we'll input upcoming dot dot perfect uh let me quickly create a body of Center and inside the child I'll add text of D series so that we can see either it's working or not I'm going to copy it and paste the same for the movies and upcoming I only edit the text okay it's throwing some error I think okay we haven't given the height of the container it is simply calling the three wizard and the three wizet also doesn't have any height because I have written scaffold in all of these three so I have to define a height of the container returning scaffold isn't necessary here because the homepage already container scaffold that's not necessary okay as you can see the text is being showing at the center so this is it for the part two of our series also you can visit the link in the description I have given the GitHub Link in the description from which you can download all the source code our today task is to list all the TV series in the horizontal LP builder in our UI okay uh So based on your category you can get the Jon this is my API key and this is the link uh this is the TV series link which you can get from the tmdb API developer account the Jon is in form of this okay now let's get started the API key and all api. okay uh in today TX we will be using this link which is the same link as this and the Jon is in form of like this now now the only task is to use this s decode it and show it in our UI as beautifully as we can Okay so let's get it started first of all we need to import convert because we are using the Json decode function to De to decode our Json that's why we need this do convert packages uh second we need HTTP package because we will be requesting the URL popular TV series URL using HTTP the third is API key. file API key. file which contain the API key in the form of string okay as in the previous video we will eStore all the Json decoded Json decoded uh movie or TV series into one single variable for that I have created one variable of list of type map string Dynamic so the first part is always string as you can see here the first part is always string the J we get the first part it is always a string and for the second part it can be anything so that's why I have given the dynamic part to it now we are creating variable of type map string and dynamic and I'm going to name it popular TV series for now it's MP later on when we decode the output the and we will put it into this variable now as you can see the URL is like this api. themoviedb.org /3/ tv/ poopular and in part of the API key uh we will write our own API key which we got from the developer account so that is the same URL now I'm going to create one future function of type boid okay and the function name is TB series function which is async so I'm going to uh call this URL by Method AIT HTTP uh so I'm going to call it HTTP do get and inside it I'm going to parse it so URI do par u. par and this link popular TV series URL okay so now I'm going to check it if the popular TV response it means if the response I get status code is either 200 or not so if it's 200 then it's success and I'm going to store all the output in this variable temp data so if the status code is 200 it means I'm going to uh get all this Jon output okay and when I write popular TV response. body and decode it by using J decode function uh which is why we need this do convert package then I have all the J decoded uh data inside our temp data variable so this temp data variable has scope uh inside only this block or I can't accept uh I can't access the temp data variable outside this scope okay so you can call it the uh temporary variable also now the temp data contain the uh whole this whole s so if you look it carefully the temp data contain all of this okay but I don't need this page or the total page or the total result so that's why I only need the result value and inside of the temp data and inside the result uh the data the data inside the result I'm storing it into the another variable so temp data contain all of this data and I am restricting my data to only this result so I only want uh data of this result that's why the temp data result our confined data is stored into another variable now in this popular tation variable it only contain this data the data inside the result and as you can see the result contain the 20 number of item that's why uh I'm going to Loop it from 1 to 20 using you know for Loop instead of writing 20 I'm going to write popular tation plate which is is same as 20 okay both are same thing and inside this for Loop I'm going to add all the data to this variable popular TV series. add now inside it I'm going to first of all uh add the name of the TV series now we can access the name by writing popular TV J which is all data contain in the result variable and inside it the first TV series and the first name okay so inside of this you can see there are a lot of TV series okay so inside of this variable popular tation popular tation zero means this block one means this block two means this block so first of all the block will be zero and name so zero and inside its name and the second for Loop will contain this name uh 0 1 2 3 and so on up to 20 so in this way I would be able to add all the name of the TV series inside this list Name ID okay also I'm going to create a new ID poster path under this variable and I'm going to add all the poster path of the series so in the same way I can get it also I need the boat average I need the date I need the [Applause] idid now if the response. status code is not 200 it means uh we did not get response as we expected then we can simply uh print the error okay so this is it we have successfully made a call to the API and extracted all the required data and also we have stored everything inside our uh list variable popular TV series it contain uh inside the popular TV series name it contain all the name of the series inside poster path it contain all the poster path of the series inside V aage inside date and inside ID it contain their similar field now we need to create a simple UI part and in the UI we are going to return a future Builder which contain which we should give the future function as an argument so we give future function S TV series function which we have just recently created also in the future Builder we we are required to give the Builder function and in the Builder it accept the context and the snapshot now if snapshot uh do connection state is waiting then we are going to return our circular progress indicator okay so uh if it's waiting then uh we are going to show it by circular progress indicator and if its connection snapshot connection state is uh you know successfully completed then we are going to return a simple column and inside it I'm going to give a little padding and I'm going to write a simple popular TV series okay you can see the popular TV series over here now I want a container of height 250 uh side and I'm going to create a horizontal list view of the popular TV series movie so that's why I have used the Lis Builder physics bouncing scroll physics scroll Direction I'm going to make a horizontal list and item count item count is 20 which is same as popular TV series. length the amount of data our variable contain okay now in the list vi. Builder we have to give the item Builder and in item Builder it contain the context and index now we are returning the just detector which has ontap property and in the child I am going to use the container with margin and the width of 170 uh if I run it there's nothing because I haven't done anything in the UI part now in this container I'm going to give an image of the DV series so we have completed this image part in our previous video the link of the image is like this you can get any tmdb API image by using this link okay and after this we have to write the poster path so we have stored all the poster path uh inside our popular TV series and inside the poster path ID inside our popular TV series under poster path ID we have stored all poster path of the movie so I'm going to write popular TV series and in the bracket poster path oh sorry first of all index and after it poster path so for the first index the first movie poster path will be displayed for the second the second poster path will be displayed and so on so for making it even more beautiful I'm going to apply some color filter first of all let's see how it look uh okay you can see so far I have created a list view. builder in a horizontal [Applause] Direction and item count popular TV series. length which is 20 inside it I have created a container in the container I have added a image and the image I have used the official tmdb uh you know of getting the image of the poster path link and I have given the poster path also so here I have the list of 20 20 series furthermore I'm going to apply some color filter color. black with opacity 0.3 and blend mode to dark if you look carefully inside this popular TV series variable we have various field like it contain the name of all series poster path of the all series BO aage date and ID so far we have only used the poster path and displayed it in our UI so I also want to show the date uh V AAS uh that's why I'm going to create a row and inside the children I'm going to give a little padding inside the text I'm going to write the uh date so it will give the release date of all the series if you look carefully so here you can see the date is being displayed also I want to display the rating I have given the padding and in the container a little bit of decoration okay so a little more decoration and inside the Row first of all I'm going to write to get the rating uh we have to call the popular TV series and index and v aage in this way we will get the rating of all the movies so first of all popular TV series index and then vot aage do to string which will convert uh the number into string basically uh the text the text we expect to be the uh string in the form ofing and the boat aage I think it's in the form of double or something like number 4.3 3.6 that's why we have converted to string and you can see the rating is successfully displayed now also in this uh row I'm going to add a small icon of star of color yellow so it's not necessary but to make it look good I have added the star also okay uh so that's it for the video if you like it then then please give it a like and furthermore follow up in this series also you can check the description I have provided the link to GitHub repository uh you can figure it out over there also um so if I want print in the a detector po popularity TV series and IMD X popular TV series index and I think uh name name uh so basically the reason that I have wrapped it under the just detector is you know further more in our series we have to display the detail of the individual movie or Series so for it I have under the onap property I have written a simple print statement which will print the selected name of the TV series which is inside popular TV series index and name so if I tap it here you can see the name is in displayed in the uh console okay uh you can see the name is displayed in the console and I can display the ID also now if I tap it I get a unique ID so whenever the uh user will tap to any movie then I'm going to uh navigate Navigator do H Navigator do I think post replacement Navigator post replacement uh material material page route and I'm going to go to the new screen maybe movie detail screen so I haven't created movie detail screen and I'm going to pass the ID and based on that ID I can show the description because uh tmdb can give you the uh Link in which you can provide the ID of any movie and you can get the full detail of that movie so for the today video I think only this much uh thanks for watching on the next video we will complete like everything uh the movie part the upcoming part so basically it's same I have uh call the API for the 20 popular TV series in the same way you can uh call for the movie and call for the upcoming list also okay the process is same the only thing difference is the link the only difference is the link and maybe the uh name of the ID in which we get Json might differ other than that everything is simp so far we have created a simple UI for the TV series now okay uh we have used one URL which give the popular TV series or list and by using that URL we have our Json data and we have displayed the Json data in our UI perfectly as similar to the popular TV series I have copied and pasted a whole bunch of code which is same as this one but instead of the popular we are getting the on TV response [Music] now similar to the popular TV series URL or similar to the uh you know popular TV series response I have created another top rated response which is basically uh everything same as the popular TV response the only difference is the variable name I have used here okay for that I'm going to need one top rated URL and I'm going to need one on a TV series URL and I'm going to create a new variable to store all the top rated TV series inside it and I'm going to create a new variable on your TV series to store all the on your TV series data inside this variable so far if you look down carefully we have already cre Creed the popular TV series variable and we have already written uh this bunch of code in our previous video so if you notice down carefully I have created two more variable so this variable we have covered it up in the previous video of the popular TV series and I have created two more variable top rated and onor TV series uh to get the Json data here's the URL uh it I think I have covered it in the first video I have all the URL which give the J data of the movie series also I have the URL for the upcoming we will be talking about it in the our later video I was in the TV series okay uh similar to the this block of code I have created a this block of code so same thing is over here and getting a jent response I have decoded it and I have run the for Loop and I have exploded everything in the top rated variable and for the ontv also I have uh you know requested and I have get response I have decoded the Json data stored in the variable I have stored result in the variable and I have looked uh through 20 times which is a length and I have stored everything in this variable okay so it's not different now now the only thing remaining is to uh show this two things which is the top rated TV series and on TV series in our UI so for that uh one method is that as you can see I have to copy all this and I paste it two more time and I have to change this popular TV ser is with the top rated but as you can see it is roughly about 50 to 70 Line and if I copy two more time then our alog together code will be more than 200 line so it's not good and what I was thinking is to create one common function okay so in the LI I'm going to create a new file repeated function and I'm going to create a slider Dot what is it I'm going to take one parameter string list let's give it a name I also need a title and also I need type and let's import item count also for the Simplicity okay now I'm going to return return actually I can copy paste it from the TV series okay in this else part to this column I have cut it now I'm going to paste it over here okay fine uh in the item count item count the popular TV series I'm going to first list name I'm going to uh take the whole list as a parameter also in this popular DV series text I'm going to replace it with category title I'm going to also take the parameter constant okay and item Builder so I have to replace the this popular TV series with first list name first list name and first list name okay now I think I'm good to go okay item count perfect now I have created one uh separate widget slider list so that I don't have to write code again and again for it which take the whole list as a parameter name first list name it take category title it take the type and it take the item count okay so far now in the TV series section I'm going to return a column main AIS alignment main AIS alignment start in the children I'm going to call the function uh slider list okay I need the four parameter for it first of all popular TV series category title uh category title I want to give a popular TV series type I'm going to give TV and item count let's give it 20 perfect oh wait some error expect to find where where where where where okay perfect okay it's working fine now what can I do is I can just call this function to more time and now you can see okay perfect so it has created the whole list three times uh in the popular TV series I'm going to write what on the air and uh top rated series uh this both is TV TV 2020 it's good now in the popular TV series I have to write one year TV series which is list of map string and dynamic okay also in the top R I have created one variable of type string list of map string comma Dynamic I have to pass it so once I refresh the page you can see the series will now change so okay in the popular air TV you are getting the popular in the oner you are getting the oner and in the top rated series you are getting the top rated series of the all time I think so uh that's it now it will be very easy for us to just call slider list function also we have to make uh the same for the movies and the same for the upcoming so it will be easy we have already made our slider list function now the only thing remaining is to just call our API link for the movie store all the data inside one maybe popular movies uh list of type map string and dynamic uh popular movies and top rated movies uh maybe popular on the day something like that and everything will be perfect so uh okay in our movie section so far we have only written a movie text uh if you come over to the tmdb website you can see a lot of of things so that you can add some element in our movie section and as you can see there's a link for the popular movies now playing movies topet movies and upcoming movies now we have to show this all in our UI oh so for that I have to copy it in our movies do Dot popular movies okay now I have to create a variable popular movies top movies uh movies and finally up coming movies perfect now what else so I have to create one Function movies list it is the facing fun and I have copied and pasted the old code which is just repetition of the all code from our previous videos okay also YTP HTP dot do API key now this import is remaining HTTP dotp perfect uh okay now it's good we have created three variable uh list which contain the list of all the popular top rated and now playing movies also we have created one future function which call this three link and I have also created a three block of code which will add the selected movies data into the selected variable now only thing remaining is to show it in our UI okay so that's not uh difficult thing to do now I'm going to return a future Builder oh sorry sorry I messed up a little bit [Applause] future Builder our future function is the movie list movie list I think I have TV series function and the movie mob list okay context and snapshot uh uh if snapshot. connection State equal equal connection state. waiting return circular progress indicator color colors color do Ember now for our else part okay what to return return a simple column main AIS alignment access alignment at start now I have to provide the children okay column section huh what's error perfect now error has come constant column I have to call the slider list uh it wasn't necessary okay first name list popular movie top rated movies now playing movies so for our first parameter it accept the variable I think oh no not the case popular movies it should show it is a variable of list of type string and dynamic but also it's fine popular movies type movie and item count is still 20 perfect now let us see in our UI okay circular progress indicator not running quite good H now it's good in the movie section we are getting our popular moving only thing remaining is to just like this instead of popular uh top R and I forget one okay now playing movies now playing movies here it need the top rated movies so now playing and top top rated movies okay fine it's looking good so we have completed our TV series part and also we have completed our uh movie section part furthermore you can make the UI very much beautiful we have created a beautiful UI for our app bar similarly in our body section we have created a beautiful UI for TV series for movies in similar way you can create for the upcoming section you can visit the giab repository in the description for full code uh in this series I think I'm not going to do the part for the upcoming upcoming movies or series because it's typically same as TV series and movie section so do it yourself in this video we will focus on the uh detail page so let's get started uh so okay let us let us separate our code and and create a new folder for showing all the detail for movie detail we're going to create a separate file for TV series detail we are going to create a separate file quickly import material Dot and let me quickly create one state full widget uh description check UI I'm going to WR a simple scold and bear new type it going to take two parameter this do new ID this. new type okay perfect okay let me quickly create simple function check type and check it if uh which Dot new type equal equal movie then return movie detail inut material do TV series detail if it's movie movie let's if which it do new type equal equal DV in then we are going to return TV series detail okay perfect uh else return UI perfect which it ER okay we have created a simple minimalistic UI for the error page and also we have completed the Checker do do file we check whether it is movie or TV series and based on that it redirect us to the either movie details or TV these details so also in the movie details we need to create where let create movie ID because based on this we can get the detail also in the TV series detail we have to create the where TV ID and TV series detail this do DV ID okay perfect now in the uh ID parameter okay I think okay in movie ID we can provide wet. new ID and wet. new ID see from the slider list uh we will pass the new ID and type to our description check UI based on the type either it is movie or series it will redirect to the movie detail page or TV series detail page and also we'll get the ID of the specific TV or movie then we can uh get that ID and get all the details perfect now let's build our TV series and movies detail page all right now in slider dot dot we have to do a few modification instead of printing the ID on the terminal uh if you can see in the slider list we have make an parameter type so that we can identify between the movies or series uh if type equal equal movie I think we can see it in the DV series do do okay for DV series it's TV and for movie we have passed movie as a type so if type call movie then we want to navigate Navigator do push material page route context material page route context we want to go to uh movie detail movie detail now it require ID parameter uh we have also ID okay if you notice down carefully we have this whole list first list name first list name uh index and ID let me check it quickly okay I have stored ID as an ID so it's good perfect similarly uh else if type equal equal DB we want to go to TV series detail perfect and else uh you want to go to Checker do do check description description what is happening oh it's not necessary either it will be TV or series The M Spot Will Never Come ah perfect okay we haven't code anything that's why we are facing some error first of all let us start by creating variable list of map of type string and uh Dynamic pleas store some movie details perfect also for more variable for restoring user review similar movie list recommendation similar movie and movie trailer okay let us Define one more variable I think list of type movies GN R yes it's optional if we can do it then we will use it perfect now again same as in prev previous video we are going to create a future function the future function is Sy synchronous and as you can see I have uh listed all the API it's only for the simpler UI part also for this detail screen perfect you can see I have pasted lots of URL so all these URL you can easily get it if you play around with some tmdb okay so let's change it to ID only Perfect the movie details is already defined expected to find expected and identify okay perfect if [Music] I wait for a second movie detail you are all this URL I have gotten it from the dmdb API if you copy it uh widget ID and API key widget ID and API key so I don't think with J ID and I need my API key I have gotten all this link from the tmdb okay it's not [Music] working the movie API wait wait wait wait there's something more API key equal API key I forget B okay now if we have the ID then we can get the detail movie detail and the detail is like this so we got the path which we can show our poster path we got the ID we got the name of the movie and uh we got the movie homepage we got the IMDb ID also we got the overview a little description of the movie which we can show we got the popularity of movie we got the detail of the production companies we got release date we got the total revenue a runtime total minute how many a minute we got the status and many more Serv basically we get everything about the movie by using this link also by using this link we get the user review of the particular movie ID similarly for the particular um movie by particular movie ID we can get the similar movies list a recommendation and by using the ID we can get the movie trailer also so all this link I have given in the description and you can get the GitHub repository for it now we have to create a future function and inside it we have to write the five block of code 1 2 3 4 five six block of code which will call the individual link decode this individual link and add the data to this uh six list so that we can show it in our detail UI so we have basically covered it up and we have called the API by using future function several time in this course that's why we are not going to be doing the same thing over and over again I'm going to instantly pasted the link or instantly pasted the code now I have to import dot convert also I have to input HTTP package HTP package s HTP and I think we are ready to go movies let's comment it out movie details. add so basically we have made an call to movie detail URL if it's 200 the status is Success then we have decoded the body and stored in our variable movie detail s after it uh we haven't created a new variable and stored the result of the movie detail J J because if you look carefully uh we directly get all the detail so no need to further go down after it as you can see the data is only one in case of the in case of building our homepage showing the slider list here it was the 20 list of the movies or Series so we have to write the movie detail jon. length but in case we know it's only one G it's total one G inside it uh there is nested J so the for Loop should run only once perfect now in movie genre map of string and dynamic also we have run another loop to get the movie genre so for it we have to create a new variable or I think without variable also we can do it basically it's a nested J inside our um main response we have a sub response of genos which is again J so the particular movie or series is of type animation family fantasy and comedy it contain uh five different genre and we are going to store all these five in this movie gen list perfect if you look it closely again for the user review I have got the same again I have got all these link from the tmdb website you have to really uh work out and play it around quite a bit to get all these URL I think by the time I post this video the API might have been updated or they may have made an easy way out of it but when I was doing it uh I did a lot of Google and a lot of searching on their website to get the individual API link it's only that also for the recommended movie response the same thing again and again basically once you find the link you can directly go and search it you like you will get Jon like this pass it and based on that create a variable and store it everything same for all of it all right so for hour pop Pi [Applause] assist for the lots of Icon we need one package name font of some flutter also I think is everything fine okay everything perfect and I'm going to import the package font some flutter sorry sorry I'll will do it later okay now let's come to our UI part for the movie detail currently it's showing only scaffold I need a background color and I want to col a future Builder movies detail now we need the Builder context any snapshot previous in our previous video we have done it like more than five or 10 times if connection is done then we'll return the custom scroll View and if it's not then we'll go to elpc later on so we are returning the custom scroll view because I want to use the sers uh basically it's lagging but I can show the effect like you can see the above app bar is slowly fading slowly slly feding and it became now abar so this effect can be achieved by using custom scroll view by using sliver AB bars and slivers that's why I have used it for slip bar abar I have created a simple back button icon by using front of some icon flutter also in our also there's one extra home button which uh redirect our user to home Okay okay perfect now I have pinned it and I need the slier app bar expanded height equ according to the Android device that user use I have used the media query off context do size. height into 0.4 which is 0.4 times the height of the device the user use in the background as in the homepage you can see the sver app bar contain the images so in the detail screen I want the appar to contain a trailer so I'm going to so I'm going to later on create a new function trailer watch which will allow to watch our trailer of any movie and Series so it it should have the parameter name trailer ID which we can easily get by using movie trailer list z. key if you look at carefully in the you can see we can we have stored all our trailer ID and data in the uh movie trailer list so it will be helpful for us now in the sver list our body part our abar part have been completed I only want to show the back button the home button and the trailer in the abar just like there is showing picture in this homeing screen for our body part I have defined a column children and inside it I have defined a row now in the first row I'm am going to list the genre of the movie The genre may be one two or three like Adventure sci-fi horror in this r i want to placed it inside the lp. Builder which is horizontal and I have written a simple container with a little bit of decoration I have completed all of this uh just now that's why I have uh just control child text movie genre index perfect so it will give us the uh movie genre list inside this beautiful container which is the uh which is in the horizontal axis of the disputed Builder perfect now I need another row again the same decoration I might have made a new fun function for it but let it be so in the next row I have uh created one text which give the movie detail its first index and the runtime perfect so it will give how many minute or the length of the movie in minute again we have stored all the movie detail in the movie detail variable now I'm going to this is all inside the uh Children of the column so I'm going to define a padding and write a text movie story after it I'm going to write the movie story which I get from the uh API which is stored inside the movie detail and overview ID you can see movie detail and inside movie detail we have backdrop path title Bo AAS overview release date runtime budget and revenue of the movie so we can displayed all the detail in our UI perfect now I have also created another padding and for the review section I want to show the user review which again we will reord another link so that we can get the all user review based on the particular name or the particular uh unique ID of the movie basically the movie name might be same for two or more movie so the tmdb provide a unique ID for Unique movie from which we can get the uh all the user review so I have made a separate widget review UI which we will build later on and definitely it required some parameter or I have pass all this user review list basically if you uh see this user review list and in the okay user review response you can see I have added the uh name of the user the review what review does user give about that particular movie also I have given the user rating and I have used the null safety if uh user has rated then it will be shown if not then it will not be shown also uh tmdb API give the user photo reviewer reviewer photo I have also used that data and and the creation date and the user full review URL perfect so I have stored all in this uh list user review and I have passed it to the review UI which I will build later on basically I am doing this because the code will be drastically long uh that's why so let's go down further I have created a next padding and inside it I have shown the budget of the movie basically uh the detail of the movie which can be shown within one line I have shown inside this so for example uh the release date of movie would be only one so that's why I have displayed it in the single line but the review of the movie uh the review have been done by the a lot of user so for it I need to write a lot of code for that uh so for the Simplicity and minimalism Code Practice I have created a separate review UI with that now again in another padding we can can show the revenue of the movie and after all of this we can show our favorite function slider list so the slider list take uh the list of map string and dynamic which is similar movie list the text the type and the length perfect we can also see show the recommendation movie so you can see recommendation movie list if I over over there I have all the data for the similar movie and recommendation movie basically whenever user visit uh the detail or whenever user try to get the detail of the movies or TV series I have one code block okay if you see over here whenever a user visit to our detail page the detail of the specific movie will be passed to the API and if you user click the particular movie then it is possible or it is most likely that user will like our similar movie basically the similar movie API is also provided by the tmdb based on the movie ID you provide basically uh if user click on some horror type of movie then uh the particular ID of that movie will be sent to this function similar movie and the tmdb will automatically generate a list of similar and recommendation movie based on it so I have used API no more than that perfect now I think our uh movie detail page is good and perfect okay now we can see there's a little bit of error in our code I think the first movie genre must be a list only because there's not a lot of data there's only one data there's only a single list and the next I think I have not imported the font or some icon okay and the next review you why is not I have commented out the function which haven't been defined defined yet let us quickly see the overview of the movie If I click this movie I haven't defined the trailer okay perfect so the trailer is not showing in the appar as we haven't made it till now so you can see the uh five category this movie has the sorry this movie have the five genre we can see it over here this movie 92 minute the simple movie Story the release date the budget the revenue and we have used slider list for the similar and recommendation movie which is provided by the uh tmdb API uh perfect if we click here we can again uh go to the detail of the movie so this cycle continues on good now the only thing remaining is only thing remaining is to show the trailer over here and to show the user review over here okay uh let me find the commented code okay not working like this review UI I'm going to un uncomment it also I have something like trailer watch or yes trailer watch I'm going to uncomment it so for that in our repeated function okay two to repeated function let me delete this one in our repeated function we are going to create a trailer UI dot dot I'm going to inut material do Dot stf T trailer what also we need a variable trailer YT ID basically basically the tmdb uh gives the movie ID and through which we can get the all the detail of the movie Inside the trailer we get the specific ID so we get the ID of the YouTube because the most movies and TV series trailer are available on YouTube so the YouTube ID we can easily get any trailer or movies YouTube ID if I uh type movie trailer YouTube okay okay you can see one trailer over here I'm going to pause it so if you not notice it carefully we have this ID this is the ID if we get the ID then we can flip any video on the YouTube see we are using the same ID now this variable trailer YT ID is the ID of the YouTube video after it I have to uh create this trailer ID Perfect trailer UI do and again I have to user review. file I'm going to import material user review Perfect trailer watch and trailer YT ID perfect now review user user review uh review details where is user review M detail our user revie is a type okay list string and dynamic so if it's this string and dynamic then uh I have to this start details perfect okay now let's build our trailer so far we know this ID is the YouTube ID of the trailer of official movie now we need something so that uh we can play the YouTube video in the app bar for that I have a package there's one beautiful package in the pop. D YouTube player flutter with over 1200 like almost 1300 so it's beautiful and excellent and this is what I need you can see I want to uh display the YouTube video trailer in the app bar also it has a controller and many more function I suggest you you go and check it out perfect and along with you along with this YouTube flutter YouTube player flutter I need a web view flutter package with over almost 3500 likes it will help us to display the any web or any web URL in the flutter UI so this would be really helpful now let's import the package first of all web view flutter and YouTube player flutter I think I have written the package name correctly perfect uh YouTube player flutter and I'm going to import web view flutter perfect I suggest you to come over the official uh official pop. Dev and check out these packages you can see it has all the code so basically I'm not going to write anything new I'm going to uh copy paste all the code from this okay now I'm going to return padding inside it I'm going to uh place our YouTube player also this YouTube player app parameter name thumbnail which we can give our image as an parameter so I have given the image as an thumbnail also I have given a fit box fit cover we have the control timeout expect r your controller so progress indicator buffer indicator and child also we can give the progress indicator color as color. Ember I have used all over in my project also in bottom action uh we can show our current position we have the Progress power also we can show remaining duration fully screen button and many more perfect so all this code I have copied it from this official pop. packages there's nothing new okay also uh we should give the in the unit state I'm going to create a controller and a final video ID uh and there's one function YouTube player. convert URL to ID in which we have our trailer ID and I have defined a controller which I have used it over here also there's one flag you player flag enable caption true auto play true mute false Force SD true and at last I'm going to define a late yoube player controller controller perfect so if you noticed it carefully I have copied everything from this page and pasted it over here so that's it okay uh I have to import YouTube player flut and import the web view flut good still some error controller and uh where is control perfect okay now you can see our thumbnail has been successfully loaded and there's some error I think or my network is unable to play the video controller not ready for call all right I'm going to start all right now our trailer is working fine we have the controller also if we pause at any moment then our thumbnail will be loaded perfect now the only thing we have to do is to create this user review section uh basically in a row I have written the user review text and solist text at first we only want a single user review but I can click over all review and it will show me all du review perfect so I have already created it uh that's why I'm going to show it to you very quickly instead of writing line by line I will just uh undo it and you can see the procedure or procedure how I make it okay so let's go to our uh user review. do I have cleared out everything now I'm going to undo it and you can see how I create this uh user review perfect so uh you can see in the movie detail I have called the user review function and I have passed the user review if you click over this then this user review is the list and it contain all data related to user review let me quick show it to you what it contain okay user review if you look over it carefully it contain the uh name of the reviewer the review of the reviewer the rating reviewer G uh the reviewer Avatar Photo uh creation date at which date the review was given and full review URL perfect I don't so if you can see there's a full review URL also uh so perfect and all this data is inside our user review list which I have passed in this screen so I have get that all the detail of the user viiew inside this list and I have used the Constructor now in our widget I have made another variable name uh review details which is same as the uh this detail this r details so basically these two are same instead of writing widget. rep detail everywhere now I can write uh review detail now if uh review detail length is zero it means if uh the movie or trailer is underrated or either very new or upcoming then there might be a chance that there is no review at all so to Ure so to ensure it if there is no review then I don't think we have to show anything and I will return the EMP Center if there's no review then nothing will be some perfect now if uh there is some review then I'm going to give a little padding you can see the padding over uh the review section and I'm going to write the user review so this is the same text as you see right on your screen perfect now if you look it carefully I have reloaded the page and as you can see only user review is showing now a little bit of style and just a detector okay now we are in the row and in the row uh the first element is the text of user review and the second element will be also of the text either so all review or uh only one review so more or so less first of all we have to create the variable bull so all isal to false it means when the First the movie or series detail is loaded we don't want the all review to be shown we only want one review we only want only one review to be shown but uh if someone press under this just a detector then I want to okay complement instead if there's only one review then I want to show all if there's is many review then I want to show only one okay now under this gesture detector I have defined the set state which will refresh our UI also in the child row I'll create a condition if so all is false then what should be done a text should be displayed here and if the so all is true then this highlighted text should be shown here okay so if so all is equal to false if this condition is false then this will be executed uh the so less will be displayed and if so equ equal to false it means that this text will be displayed in our UI perfect now after the all review I'm going to write review detail. length which is the total number of review this WID contain or this uh sorry this widget or this list content basically both are same now if I refresh my page you can see the changes over the right and a little bit of styling also here a little bit of stting you can see all review 48 and it is updating for just now the Justa detector through the jesta detector uh the bull so variable is changing and if it's changing then our condition would be executed if it's false then this text if it's true then this text perfect now for making it um more beautiful I'm going to give one icon okay all review 60 soless all review 60 soless now based on the uh whenever the solest text is there then under it we have to show only we have to show many review if we click on the show list and whenever the text is all review 60 it means the state of the application if the state of this text is all review 60 then we have to display only uh one review and we have option to see all 60 if we click it then our state our text stage is so less it means we have to S uh all review perfect now I'm going to again write another condition we are inside the column if you notice we are inside the column and it's the children and all this thing were inside the row the user review and so is were inside this row and all of this is inside the column now if so all equal equal true then I want to display this container and if so equal equal false which means uh this this container will be displayed so it's just the con mention instead of writing the if else uh block which increases the number of line in the code I have written the short form of the condition so if so all is uh true it means we are we the user have already clicked on the uh all review 60 it means uh user want to see all the review then we have to display a container and if the user want to see all review then there is a lot of review which need to be placed inside the uh list view there is a list of the review and the axis will be horizontal the physics bouncing scroll physics item count review detail. length now we are going to return a padding and we are going to return the column and children so this children is for many review basically it's not like only one review would be there if so equal to then we have to display all review so first of all uh we have created a column and again we have defined a row it means we have created a column and in the column the first row we want to display the user detail it means user photo uh at which dat the user has given the review Etc like that and we have a Define our expanded in the column the first one is of Flex 2 and the second one is of Flex one now again we have inside the inside the first expanded we have created one row which contain a container and inside this container I want to show the uh user photo which is stored inside the review detail index and ofar photo if you go over it you can clearly see we have stored all the user uh photo in the AAR photo okay in this way we can access the uh user photo also pit is box fit. cover again uh the 10 width apart I'm going to create another column and a fitted box and I'm going to write the text in which it contain the uh reviewer name so it is inside the review detail index name I don't think I have to show it once again and again a little bit of styling and a size box of five again text I want to show the uh date at which user has posted the review perfect now our first expand dat is completed for our second EXP funded I have simply created one children and a simple fitted box okay let me refresh it and see what it look like in the UI so far I haven't done anything like only two to three things okay you can see when I uh click on all review it is loading the all reviewer uh profile picture name and the date and the icon icon. star now I want to write uh the reviewer rating inside the text perfect now the reviewer rating is inside review detail index and rating okay now I don't have to uh explain it to you if I refresh the page you can see the rating as well okay perfect now it's the best part again I have defined one row inside all of these things are inside one main column if you noticed and if I click uh so more now if I refresh our project one second we can easily see the review which reviewer gave again so okay this was it if you have noticed earlier I have written one condition if so all equal equal true it it means if so all equal true when I click this all review then so all will equal will equal to be true then this container will be displayed so I have written everything inside this container and at last the review is also shown first of all only profile pick and rating was there now I have uh review also see you can easily see all the user detail their creation date their rating and their review but if so all equal equal false by default if so all is false the false condition appear only two times when the first time uh the movie or series detail is loaded uh the default condition will be so equal to True only one review is to be shown and another is when user create when user click on the so list buttton okay so for so so equal true we have already written everything in our container and for so all equal false we are going to be uh you know so only one review in this container so in in this container there should be only one review now again uh I have defined one column again if you think about it I can surely make it a function uh because surely make an function and which which take an parameter either so all or so less either one Boolean parameter based on that the function return a list of review or function return only one review but instead of Mak making function I have written everything under the shim file which make it a little bit more tedious but as soon as I completed this I directly made the video okay so far I haven't done anything I have only created a container and stuff like that decoration you can see if so equal false which is the current condition I have only defin one container Etc and I'm going to load the Avatar Photo of the user here if you noticed in the list view I have written this index I have written this index everywhere in the list view. builder in the list view. Builder there is context and index which will Traverse through everything which is inside this variable okay this variable contain all user detail sorry all reviewer detail their review their name their photo everything and by this index I am able to Traverse between all of the reviewer data but if I want to show only one review then I can select anyone so I'm showing the first review the zero means the first index and the one means the second index to third index so I can um basically choose anyone and tmdb suggest that you should select the first review also the review is like most relevant review is always at the first index that's why I have selected the zero now fitted box and riew detail name okay our terminal just crash oh so if you have noticed then this container is same basically instead of the uh index I have written the zero the everything layout and everything is same if you noticed it carefully also the same style to the creation date same style to the font weight the same expanded box the same icon the same icon star the same size and in the fitted box the same style of the rating the same fite I have basically uh copied everything from the above condition and pasted it over here text okay what's error overview text sorry lagging or what okay now it's completed for single review uh this container for list of review this container and I have copied and the both container are literally same only in place of the index the below container contain the uh first value and the above container contain the list view the difference is only that now so far we have already completed the TV series part the movies part and the movie detail part okay you can see the review is working perfect the trailer is also playing and I think that's it for the video now only thing remaining is the search bar in this uh sample text in the place of the sample text I want to create a beautiful search bar in which the user can search between the movie and TV series so for this series I think we have completed we have successfully created our TV series UI and also we have successfully created our um movies part UI and I have left over the upcoming part to you basically the all part is same the only thing is just you have to decode the and stuff like that also I suggest you to go to my description you will find the GitHub repository Link in which uh you will contain a very beautiful and a well organized code if you see it over here I have a lot of messy code uh it's such a mess but on my GitHub I would try to make a code clean and understandable as possible so from that also you can figure out and you can think of how it work if you find it a little bit of confusing we will be implementing search bar in our homepage between the Apper and between this three category for this I'm going to remove the text sample text and instead I'm going to write a separate function if I Implement everything within this file then the file will be probably large and the line of code will be very Nar complexity will increase so to make our code clean I'm going to implement it in a different file so in the repeated function I'm going to cre create a new file search bar function perfect and I'm going to written the dest detector I will call this function on we need one packages name phot toast you can install the package from the pop. I have the extension named pop speec assist which help me download the package using vs code only after successfully downloading the packages you can go on to the next step I'm am going to make all the necessary input that is required after it I just need a two variable one Boolean and one uh variable Val one also for the s box I need the text editing controller after it to store the search result I have to create the variable of type list inside it it is the map of the first parameter string and the next parameter maybe anything like the string number anything we already have the AP key also we have all the link record but for today we need the link which will take the string as a parameter and will give us the Json output so we have to create the function name it the search list function after it we have to pass our string as a parameter it's the syn function it will call the URL asynchronously with the parameter or screen if you search over the tmdb you can find this URL for the search result in which we have to provide the AP key and the string at last as a parameter it will get the M response so we are going to run one uh get request http.get provided by the package http in which we will pass our URL and all the response will be stored in our uh variable now we know that this is the Json response so for that if this response status code is a success then we have to Decode by using the in decode and I'm temporary storing data into the variable temp data after it as in the previous video also the for format at the top of the J format all the response is included inside the result I am again restoring all the data necessary in the search s after it every item in this sub session we are going to be looping and a simple if else condition to omit the null data if ID is null or poster path both or media type is nve then we will execute LC statement if ID poster path both aage and media type is not none all must be a valid data then only we will execute the statement so we have created the variable search result to store our data as required and if all the field have the valid data then we are going to store the necessary time now idid poster path P media type popularity and overview perfect also if result is greater than the 20 then we will remove all the result that are from the length 20 onwards to the length it means we are only keeping the uh first 20 result in our variable if you search a simple like only string coning one character then the response may of the 100 or more so for that to make our application optimize and to run it smoothly we will only request the first 20 data if response status code is are n then we will just print it on our console and we'll do nothing so far our data fing part is completed now for the UI part we have WR the Gest detector so that after the search result the user will be able to go to the description page for the respected series of movings also on the on T property we have to uh manage our focus when user first time click on it also we have our solist variable so when the user will tap on the search bar then the solist variable uh will get complemented if the data was so then on tapping uh the data will be removed and if the data isn't there then on De the data will be same this is pretty much the simple and we are creating a simple Diner who hyped he is 50 and we up to the whole device with Let Me Wait Until the command is completed in our outbut we can see the gap of height 5050 let us give a simple decoration so that it will look like a search bar on the container we have the child text field also on change value we have to clear our search result which is the this variable so that one changing we have to first of all clear the search result and we have to add the a new changed value to our search result variable after that we are calling the setstate function although you can use the provider I'm using setstate for just Simplicity uh this will hold up a much more load to our application but it's okay it's just for the Simplicity now also on submitted after user type in something and press the tick button on their keyboard then also we are going to clear the previous search result and we are going to again call the set State and we will update the string in the value one so this variable Val one always contain the uh latest string which have to be searched and to be displayed so we are updating this Val one now we need a future function which will call our function search list function and we have to pass the Val one as it string as it contain the latest value also in the text Feld we are going to add the controller search test have already created a controller SE text table perfect now auto focus to follow also a simple decoration in suffix icon we need a simple icon also in the suffix icon I'm going to uh create a simple like clear like button which on press will clear all the thing on our text field so our controller search text contain the text inside the T which will be cleared also we are going to show a beautiful message name cleared search clear cleared also I'm going to add a little icon over there to make our search bar more beautiful so far we have included the prefix icon search and in the suffix icon I have created the arrow back if I press the arrow back then everything I have typed inside the text field will be get cleared and the user will get a simple post message saying search PR okay also I'm going to update the H text with the search and it's pretty much perfect so far we have completed only the simple UI for our search bar on some it will come I'm pressing the okay we get the message search cleared when pressing the back button and now we are heading over to the logic part if search text. text length is greater than zero it means if user are typing some certain character then our van one will be updated to the latest text which user have entered so we have to call the future Builder and it will call the future function search list function with our variable P one which contain the latest text to be search after it we are going to build we take the context and snapshot if snapshot. connection is connection State then we are going to display the data else we are going to return return a circular progress indicator so in our If part we are going to return return a container of height 400 to show the list of the movies side this q. buer item count the length of the response which is SAR result so it require an item Builder item Builder we are going to return return just the detector so that user can further see the detail and tapping it we are calling the descriptioni which we have covered in the previous one so our description sqi needed the ID and the media type and it will take us to the description page also on the just detector side we need container so the container will be of height 100 each different movie or series list will be of height 100 and which we will include in title and description of it a simple decoration simple border radius and out side her containing and vision on the first container we will face the image from our Network image which I have already talked about in the previous video how we can get the image on the tmdb so this is the link to get an image which we need the ID of the movie or Series so the ID is stored in the search result and index and poster path the ID is stored inside the search result variable poster path and the index will look through uh it's in the search result variable so far if I refresh this space then we have created a children in row inside it a container with the image of the movie or series which we have searched my network connection is very slow as I'm recording at night if we search on something we are getting the result but image is not loaded if I restart my application instead of the hot reload then the image would obviously load perfect so far in the r we have added the image also in the same r i want to add the title reading popularity and a small description okay you can see the image has been loaded uh if I write Inception so far we have only created a container list of container with height 100 every container is of height 100 and inside the each container Carri is a row in the row we have the container and the container height is dynamic according to screen size it is 0.4 * the screen size of the mobile width around half of the screen we are seeing the images of the source text on the other half I am also going to create a simple column in the first T I have only placed the image but in this second half uh I maybe put the description over here uh the popularity or the rating over here so for that it is a row inside the row there is first container containing image and there is second container and again in the second container there is column so the column is for the this text and this text so the UI part is pretty much simple the first text I'm going to write is the media type it is of type either movie or series it is a movie so we are getting the movie we are getting the movie to movie also if we type DV series then uh it will give us media type as a TV TV Mi TV series I'm going to give a little bit of decoration and inside it I'm going to create a icon star we are inside the row and I have created the icon star after it I want the uh both both aage perfect now I want the popularity for it I'm going to create a small icon uh and inside the text I'm going to write the popularity you can customize the UI part as your need so I not focusing on the UI part rather than I'm focusing on a logic part only so far I have created only the rating and the popularity now I want the description media title so so for that I have created a simple container and below this we will have the uh description means overview of the movie which is St inside the search result overview I also want the reading and popularity at the top instead of bottom perfect now I'm going to give a little bit of a style it's perfect in detail I have created the container height 400 to display all theer so you can see this container is of height exactly 400 and container this whole container height is 400 and each sub container height is 100 in the row I have first placed the image using the link and in this part I have created a column with one two or maybe three container in the first we have add the media type in the second I have again created a rope and in the first I have created the displayed the popularity sorry displayed the rating and in second popularity in the third container I have displayed the simple description so this is it it's our full search bar also on on T property I have provided the ID and type so it will go on to the description secui function the description check UI function we'll check and validate and we give us the proper description page with the trailer and the full description so the netw is very slow and also this app is in debug mode that's why you are seeing a lot of lag if you want the full application link then you can go over to the description and download the complete application so that you can see how it look so this is it

Channel: Flutter Tips

Views: 7,824

Keywords: movie app, flutter movie app tutorial, flutter movie app ui, movie app flutter, flutter movie app api, flutter movie app github, flutter movie list app, flutter movie streaming app, flutter movie app design, movie app using flutter, move app flutter tmdb, movie app flutterflow, movie app flutter bloc, movie app flutter api, flutter movie app firebase, movie app tutorial, flutter streaming app, flutter trailer player app, flutter movie app project, flutter complete project

Id: 53oakgbXZOU

Length: 148min 12sec (8892 seconds)

Published: Fri Dec 22 2023