Flutter: Build a Beautiful Pokemon App | Animation | Widgets | JSON API

hey what's up guys welcome back to my flutter tutorials and in this video we are going to create another application and this video is actually mainly focused on beginners not for advanced developers because if someone is getting started with flutter he might want something to develop so it's it's good to develop something to learn a new technology or something so I have already many tutorials but because I covered this topic on on in Kolkata in a flutter stratagem I created this application so many of the viewers or you can say many of other friends of mine wanted me to make this video so I have created this video in Hindi language as well so go to my channel and check out the Hindi video as well so I am in this video is totally in English so this video is actually available in two languages so it took some time for me so depending on which language you understand you can continue so this video is totally focused on creating this Pokemon application so we'll create a Pokemon app let me just show you what kind of application it is and how it is it will look so basically it will cover some widgets and and it will also cover a hero animation and how to fetch data from the API from a server and how to decode it and then how to display it and everything so let me just show you so this is some this is the kind of application which you will see well I will make this application so this is a bouquet app and we have some pokemons here we have a grid here okay we have Bulbasaur Ivysaur Venice or and squirtle Anna and etc etc okay so these buttons does not do anything but if you will click on one of these pokemons then it will lead you to the detail screen and I guess that animation is not working yet I don't know so there is some issue with this but let me just show you if I have this example once you will click on that then this kind of screen will appear okay and here you can see and there will be a hero animation involved while going from that particular are list to this screen so this is something which we are going to make okay so if you have a little bit understanding of flutter then you are good to go and if you are very new then I will suggest you to go to this side flutter dot IO and then install flutter according to whatever operating system you have and sorry for the background noise I am totally I don't know what to do with that background noise but we cannot do actually anything okay so here in Android studio what you need to do if you don't have the flutter plug-in then go to this plug-in section from settings or whatever and then type your flutter and then you will find this plug-in and just install it and then just restart your Android studio you will get this option start a new flutter project then you have four options here the fourth one is the new one by which you can add flutter component inside your I guess Android app and then flutter application is to create flutter application flutter plug-in is to expose something which you have created in Android or iOS to flutter app so you can publish a plug-in for that like if you have a plugin for accessing the camera or for runtime permission anything it can be anything then you have flutter package then if you create some custom widget which you want to share with the community then you can use this so right now we are using this flutter application I will press next I will give it a name so let's say poke a app again for English so because I have same application already okay so then you have to give a project location description and just press next give your company domain select or unselect Kotlin or swift support if you will select Kotlin support then you will get caught lien as a language in your Android code and if you deselect it or if you just leave it unselected then you will get the Java support and similarly force we have too few just ignore this particular check then you will get Objective C if you check it then you will get shipped support just click on finish give you a country domain and it will create a flutter project for you let me just go out from here that's why I guess this way okay so it will take few seconds to build your project for the first time and then I guess you are good to go and just wait for few seconds and we will see what's happening so basically what we will cover we will see how to create a few UI is okay with the main focus is to covering few widgets and to covering how to do the resonation and all the stuff so it's it's it's totally for bigness okay and if you are intermediate also you want to check it out then please do it okay so you have these folders on the left hand side as you can see Android folder just for Android code is folder for Android is code leaf folder where we are going to walk test folder to test our application which is not for our needs so let's just delete this folder if you want to delete it because it's not of our use as of now then we have this pop specter DML file which is again necessary where we have the name of the application description and here we will add some dependencies our third-party packages if we want to use them okay so this is how it will work so right now we don't need that if I will run this application in the debug mode then you will see what we get out of the box so when we create this application using flutter SDK and let's just see what we get so it will take few more seconds to start the Xcode build and everything so again if you want to check the Hindi tutorial of this video then that is also available on my channel so please check it out and the link is also in the description and the source code will also be published on github so you can check the source code from github so this is what we get just on your screen as you can see we have this counter application where we will Wow it's not there yeah so if I will press the plus button then you can see with this counter we increase so this is not the not like the hello world app or something like that so let's just delete all the code because we want to start from this scratch because I am assuming that you are a big now maybe you have a little bit knowledge but you are again a beginner so we are in main dot dot file I'll just go to this mode or I can go to presentation mode whatever you prefer then first of all we will import here material dot dot oh sorry material package okay flutter slash material dot dot and if you want then you can use copper Cupertino or so basically it will give you the material components out of the box so this package is necessary and let me just go to that mode that will be much better okay let me just import it again then we have something called a void main method if you remember from Java then main method is actually the entry point of your application so as soon as you click on your app icon on the drawer then this X this method will be executed at you can understand it like this then we have this run app method where you we have to provide an application so it will take a visit app ok so you can pass a bridge a tap or a material app or a few Pertino app so I am using material app okay this material app will take some you can see title home and there a lot of stuff so in the title we can just say okay app okay this title will be shown when you will click on recent apps in your in your phone so this data will be shown then we have a home property where we will show our first screen which we want to show so let's say it's a home page okay which we will make after this then we have something called a theme if you want to give it a theme or whatever so we have a lot of option we don't want to show anything apart from this and as you can see we have this debug banner on the top right of your phone so if you want to disable it then you can set debug show check banner as false okay and it will work now right now it won't wait 1 2 these hot reload because we have an error and we have an error here this home page error and we have to create this so our flutter gives you out of flutter gives you this to visit state list when you tender stateful widget so these widgets are actually every widget is actually composed of these widgets ok basically every widget you will see is some kind of are stateless rst full widget and it inherits the property of those widgets so basically we have this status and stateful concept so stateless widgets are those basically which do not change any any time so let's say you have a text where my name is returned all your name is returned so your not name is not going to change so that widget can be a straight face widget suppose you have a logo so your logo of your application is not gonna change okay if it is change if it is gonna change then maybe it is not supposed to be a stateless widget so stateless widgets are those we did so which are not going to change ever and stateful widget are something like a list where you have your your list will have different you can say Lowe's in your list or different list tiles okay so that that is going to change every time you will scroll or you can have something like a text field which is while you are inputting then it that that particular text is changing every time so those widgets are supposed to be the stateful widgets okay so this homepage is right now we will make it a stateless so we will write this snippet st elias and it will give us a template where we can just make it home page now this home page extends is stateless widget and it's it is asking to override this build method which is which means that there is a build method in this stateless widget as well but because we are inheriting it so it is saying that you can give your own will build method whatever you want to do do it inside it this particular method okay so here we will have rather than a container we will have a scaffold scaffold is another widget which provides us a structure like if you will see this material application then we have an app bar a floating action button something between the app bar and floating action button and then we have our trots and all these things so we will get this in with this skateboard and so we can check the app bar and we can have this app bar ok and here we can provide a title so we can just give it a text and we can say poki app ok and now we can have a background color as well so we will provide this color as gone let's say because that's what we are having in the screenshot or whatever I shown to you okay so this is what it will look like then let me just do a heart reload so this will restart the app and as you can see this is what we are getting okay now we can also have a floating action button so we will just ask the floating fishing button class we don't want anything on on pressed so we don't want to do when someone clicks on that and then in the child we can have an icon so we can say we want icon start let's say icons dot okay and then we can for something like refresh this will not do anything just to show you I am just just to show you I am just writing this code and then we can have again the background color let's make it kion as well you can also give a proper theme in this material at widget we have this theme attribute okay so you can give it there so we have something like this now if you want to have a drawer then you can use this drawer property and then just implement this drawer and this or you will have a drawer okay this won't do anything right now but we are having a drawer now okay now we have a body here where we can have a body okay so let's say in the center we can have as a child or text where we will display something so let's say hello from Pokemon app okay so we want to display something so as you can see on the screen we have hello from Pokemon app and this is how you can use this body part okay now we want to show a list where we want to show not at least basically it's a grid where we want to show the pokemons okay if you remember so what we can do basically we need to import or we need to have these pokemons using a REST API okay so we need to call to the server from where we will get these pokemons and then we will display it okay so that means that our screen is gonna change when we will fetch data from and from somewhere it can be any kind of server okay and what what's actually happening is our we want where as soon as the user enters into the app we want to fetch then data then show the screen or until the data is not shown or data is not available you want to show the circular indicator in the center of the screen so that's what we want to do so to get some properties or some lifecycle methods in which we can you know fetch the data we need to convert this stateless widget to a stateful widget because as I told you that whenever if there is some data change what you want to perform some change in your data like earlier I was showing the as I explained I wanted to show circular indicator and then I want to change it with the data so whenever there is a change you stateful widget so I will just convert it to stateful widget using this handy tool by pressing this bell icon and then it will convert my stateful widget like this now my homepage state is actually extending this state class and now inside this you will get something called a unity state okay so this unity State method will be executed as soon as you will enter this screen before creating the UI part okay and here I can just say fetch data okay fetch data okay and then this is good now I need to create this method fetch data and okay and I'll make it a synchronous what is the meaning of that you can watch my video if you don't understand what what is it a synchronous program so I have a video for that but it actually means that user don't have to wait for that data to get fast because it can take some time and you don't want to block the user from using the rest of the things so let me just explain it like this so basically what we are going to do we are going to fetch some data okay we will wait while the data is fetching and till that time we will show circular indicator okay so for that we need an HTTP library okay and we get a less TDP package with this flood off inside it so this is the package HTTP dot we will use this as HTTP now using this HTTP variable we can make get request post request whatever request you want so we need the URL for doing the those requests so we can have a URL and I have actually those that URL here inside my snippets lab so once again guys I have this snippets lab where it is gone okay so I have this snippets lab I know now I don't know what's happening here okay so I have this now I have copied it and I will paste this URL here so this is the URL which we want from where we will fetch this data let me just show you by pasting this URL here in my browser so as you can see we get something like this we have a Pokemon list where we have all the pokemons with their properties okay like what is the weakness what is the next evolution and everything so we will use this data now to actually use this data we need to actually make a model out of it so just do one thing just copy this particular code go to this JSON dot 2 dot website and paste this code ok as soon as you will paste this code you will have this generate dart option just click on it and it will give you the whole class okay well just copy this class and just copy it okay just go back to your code go to a project in the leaf folder make a new dart file and name it some anything let's I named it Pokemon dot dot here just paste this code so basically what it is doing arm it is actually if you see here then it is actually having this class auto-generated let's let me rename this class because it is not looking good so just press shift F 6 I guess and just name rename it with let's say for K hub now this is a clasp ok how which have this list of Pokemon now it has a constructor where it is accepting this Pokemon that it has this from jason by which it will decode that particular jason to this key map key value pair and then it has to listen for the encoding purpose then the in the Pokemon class we have ID number everything so if you are not familiar with object-oriented on then you need to understand that first and then we have lists of items and etc etc then we have pokemons a lot of stuff ok so this is how and then we have an evolution class where we have a number and our name ok now back to this we have this we imported this HTTP part so again let me just import it because I have auto autosave enabled so it just deletes the code which are not used so here we can use this HTTP ok dot get and because we are making a get request we need to pass the URL so we'll pass it it will give us a response ok so we will save that response here let's say in a variable our es okay now if you will see here then let's just print this our es ok so I will just do a hot restart and we will see something on the logcat ok in the debug portion once again and you can see we got we got instance of future response ok that means that it is saying that this particular HTTP library implements the future ok which means that this request is gonna take time ok so that is why we are not getting anything out of it ok fine so forth that time we are not getting anything it's next is just a waste of time if we are like let's say during this fetch method data method let's print something after that second work ok so what it means after finishing this fast data task I want to undo some second work ok so let's just do over to restart and let's see how this will work so as you can see instance of future responds and second world basically what happened it will not even get the response from this HTTP dot cat and it printed that but we don't want that we want the actual response ok so what we will do we will actually await for it ok so as soon as you get the response do remaining work okay so what it's what it means that wait until you get the response and by that time do whatever other works you have to do so now if I will do a hot restore you will say that it will finish first the second work and then it will give you the instance of response now not future because you have already awaited it okay now to get the data just a print or a small dot body because everything is included in the body now if we will do a hot restart again because this energy state will be called only once in the life cycle of your screen or this page so that is why we need to do a hot restart every time now you can see the data we have this data now we need to decode it for decoding it what we need to do we need to import this dart converter library okay and then what we can say here we can use this JSON decode method where we will provide this rest dot body and it will decode that a sent to us and then we can say decoded jason let's say okay now what we need to do we have this poking out class which we just created using that particular website JSON to Dart now we will use this poking hub we need to import this particular okay so name is I guess capital H yeah so we will use this poke a hub now one second okay hub okay now we will use this pokey up here and we will say poke a hub dot from this and okay we will pass the jason here and it will give us the key value pair so we will pass this decoded this on here okay and now we have this fork a hub okay now what we want to do here in the body part okay if this okay have right now it is null so we want to show this that's that let's just not include it let us remove this center part and use a grid view here okay so basically if you will see we have a lot of option with grid view we are going to use this count one for the first time and now it takes a cross axis count so what how many rows you want to show in the grid so how many columns actually so we want to show golems okay as you remember from the image if you don't then don't check it out and then we have a children property here we will where we will specify all the children's okay so that's that's the only thing we need to do now if you remember here we have this polka hub and inside polka hope we have something called a populist okay so if you see this polka hub then we have this Pokemon list class okay which will give us the all the Pokemon list then we will map it okay mapping means selecting a particular Pokemon so we selected this Pokemon let's say poke now we can create a card on this okay so f for every Pokemon this card will be created and then we will call dot to list because we want to list out of it so now if we will run it and as you will see here okay we have got some error here why we got it because let's just do a hot reload and yeah this this is we are getting this error because we don't have the data yet in this polka hub again so if I go to terminal here let's just go to debug then you can see then we have some error tried calling null and everything let's do a hot restart just for a few seconds and you will see this average spawns is getting me an error what's the error let's see in the console if we have something like that one second guys okay so we are getting some error here let's try to go what's the error okay so you can see it is saying double is not a subtype of int okay so basically what is happening this average spawns if we see this is an integer so what that particular arm this particular generate dot did actually it just saw our first value of this particular for first Pokemon it was integer but for other pokemons it was double as well so it it couldn't figure it out so we need to do something with this so we will make it a string so that we can fix it so similar problem will happen with this spawn chance as well so we will make make it a string as well okay and then here in the JSON part we can just make two dot two strings so that we can't we don't get this our double is not a subtype of in terror now let's do a hot restart again and now we again got to this error which is saying that let's see what's the error okay some exception has been thrown we're on this cast okay so let's just go to this particular cast here and is saying this multipliers is sometimes null okay so that is why this casting is not possible so we'll just append a question mark here which means that if it is not null then only do the casting stuff so now let's just do a hot restart again you know if you will see we don't get that error and we are good to actually now okay second walk is done so let's just remove this particular portion of the code okay let's do a hot restart and you can see hot reload after this hot reload we have this data here okay now let's give this card a little bit padding okay and let's make it just - it looks good yeah it looks fine to me now in the card what we can do as a child we can have a column okay column means vertically we want some elements now it takes again a children which is take which will take a list of widgets okay let's have a container here okay and let's give it a height and width so height will be let's say 100 width will be hundred now it takes a decoration property where we can have something called box decoration it will take an image where we can provide a decoration image okay so decoration image will again take an image where we will provide a network image because we want to fetch the image from a network and we'll pass the URL here so we will ask our pork to give this image okay and that's it now if you will see here then we will get this images okay this looks good now we are below this container we can have another text where we will want to show the name of this particular Pokemon so we can ask okay dot name okay and we will have this Pokemon name okay it is not looking good so give it some styling and give it some font size probably so font size we can give 20 let's say and we can also give it a point weight okay so font weight could be bold and now it will look much better okay and one more thing if you want to do you if you want to give some elevation elevation more elevation to car then you have this property elevation so let's give 3.0 then as you can see we have more elevation okay now in the column we can align these elements as main axis alignment dot is spaced evenly so that they can space evenly and it is looking much better now okay so this is what we wanted to achieve and we have achieved it okay and now what what I want if I will click on this car nothing will happen so for applying this click functionality okay we need to do something with this okay but before that let's just restart our application I want to show you something so as soon as I press the hot restart you will see we got this error why this error is happening because as soon as we are fetching the data we are creating our UI and because our data takes some time to get fetched this you this bouquet hobbies remains blank at that time okay it is null okay so what we want as soon as this bouquet hop is null we want to show a circular indicator as I told you okay earlier so what we will do here in the body we will check if this polka herb is equal to equal to null so in this centre I am using here this conditional operator so in the center what I want to do I want to use a circular progress indicator and if it is not null then show the grid view okay now if I will hot reload or just to the hot restart again and you will see that there is a circular indicator okay and it is fetching it is just doing this fetching stuff but right now as you can see we are not getting our UI because right by this time we are sure if we see our console or if we want to print something we should be sure that our pocket hub is now available okay let me just do it again and let's print this pocket how okay porque hub let's say dot to JSON okay let's just just for making sure that we get this data just do a hot restart again and as you can see we have the data now but still our progress bar is still showing what's the reason behind it if the reason is that whenever we have a data change to reflect that in the UI we need to call a method which is set state okay so what it will do it will basically rebuild your widget tree it will go to this grid method and do these things again so that's what needed so when you are using stateful widgets you whenever you want to perform some data changes then you need to call this set state method okay so now if I'll just do this sad state then you will have this data okay we are fine now we want to show something on the click of this so we need to perform some click operation so the we will wrap this card using another widget which can be an interval widget or a gesture detector whatever you want to use so the main difference is that both two will provide you one tab but this interval will give you some splash support okay the material Inc support where you will then you will click you can sub have some ink effect or a splash effect okay so that's the main difference otherwise nothing so there is an untapped property what we want to on tap we want to go up go to a new screen okay so we don't have any screen yet so we will make one screen okay so go to your project in the leaf folder create a new dot file let's say name it Pokemon okay once again pokemon detail okay detail dot dot okay now this is the new file here we will do the same thing import material dot dot and blah blah blah okay and then we will have this stateless because this class is going to be stateless because we are not going to do any data change we will pass the Pokemon from that class to this class okay so no our data change will be here so we can just call it pork detail okay and yeah we are good to go now it has this container so just change this container to XK fault where we will have this app bar okay nothing else now the spoken retail wants a Pokemon okay so we will make a final variable here Pokemon we need to import this library Pokemon from this pokemon toward our class which we created using that JSON file and now we can call it Pokemon now how we will get this Pokemon using the constructor so we can say poker retail here we can use this Pokemon okay now we need to pass this Pokemon from this particular main dot dot so on tap what we are going to use we are going to use a class navigator which will help us to push this particular Pokemon to that particular class so it will take a context context is basically the location of the widget in the widget tree and it will ask for a router out is kind of a way okay suppose you have different streets in your area so this this is kind of a street okay so we will say it to go through a material page route which is a street ok this builder will take a context okay and now you have to give it the address of the home ok so I have in every street there will be a home let's say and we want to give the address so that address is spoke details ok which we just created ok now it does not understand what this detail is so we need to import this library now this spoke detail will take a Pokemon ok and we will pass our Pope to this so our pork is the actually Pokemon so we are done ok so what it is doing it it is taking the Navigator it is pushing it and we are good to go ok so and now if we go to our Pokemon detail now we have this Pokemon so let's just click on it and let's see and as you can see it is going here but it is showing nothing so in this app bar let's do one thing let's have a title and let's use this text Twitter and use this pokemon dot name and let's see if we got the Pokemon or not so if we just do this and you you get got this Pokemon Bulbasaur if I click on Ivysaur then I got this Ivysaur we know so we know salt Charmander charm and okay so this is how that means that we got the Pokemon now let's just do a background stuff a little bit so make this color else let's say icon again and it will look good okay now we can also give this background color of this scaphoid as color start key on okay and it will look good now we don't want this elevation because if you remember from our image let me just show you once again if I could one second and if you see this image here then it does not have that elevation let me just show you again okay this does not have any elevation so it looks good then we have a card on the top of it then we have again a Bulbasaur he made on the top of it okay so just remember this so what we will do we will go to a bar and we have this property elevation we will make it a zero point zero okay now you will see no elevation and this is looking good now we have this body here where we can pass the body of widgets so let's make a body widget okay and here we can make this body widget okay and this is right now let's say it has a plan container okay nothing else okay one more thing is so let's go back to main door that what we want we have this card where we have this Bulbasaur we want to perform a hero animation here okay so what we will do we will wrap this card again to another widget okay wrap with new widget which is a hero widget hero widget will take a tag which is uniquely identification of the widget where you want to perform some animation so in the tag you can give it any uniqueness ridy so let's give it the KDOT image because for every Pokemon there will be a different image so this is how we can assign this hero now we need to implement this same hero where we want to perform the animation let's say in the pocket detail class now this bodies widget have this container let's replace this with the stack widget okay why is that because we want to do some stacking on the top of it okay so like just like navigator works suppose you have our backup CD or compact disc and you push it one above one and then you pop it so similarly this stack works so we have a UI if you remember this UI where it is gone so just forget about it and we had this UI this one where we have a card then on the top of it we have this icon Bulbasaur so that that's what we want okay so we are using this stack okay this is tak take so children now let's have a first children as a container okay where we will have in the child as a card okay so let's say if we go here we have this card and in the child we can have a column let us say okay if this column will take some children now let's have a text where we can say polka dot pokemon pokemon dot name and it should show us the name and we have this name okay it is looking good now we can have another text which will show the height of this Pokemon so we can just say hide okay and then we can use string interpolation by using this dollar and this curly braces and then we can just say Pokemon dot height okay similarly we can one second guys similarly we can do one thing we can give the weight as well so we'll just replace it with weight okay then we have something called pipes so we can use this types on a second okay now we want to show the types or and it it has a list of types okay so we will use a row again because we have a list okay and in this row it will again give us a some children so we will ask our Pokemon to give the types and as you can see this type is a list of string we will map this and we will get this type here and then we will use the filter chip okay what it will do it will give us this label property okay where we can just say we want to short text and we will pass that T here which is the name of the type and on selector will take a boolean and we won't do anything here okay and then we will just make it dot to list okay and now it should look good and you can see we have this type grass and poison now we can also use this main axis alignment and we can just say let's say space evenly and it should look good yeah it is looking good okay similarly we will have the same thing for weakness so we can just say weakness okay and we can just copy this code here and we will just replace this type to weakness it also takes a list of string okay similarly we can have if you want next evolution so we can say next evolution okay and then we can have this row again here and then we can just replace this with next evolution now it will not take a text it will take a next evolution so we can say N and now we want to show and dot name okay so this is how it will work and you can see weakness we have weakness we have next evolution us or and when were saw okay and now if you want to give a colors to them you can give a color so let's give this row this filter chip of color so it takes another property it has a background color where we can just say color start let's say amber and it will give a color to this it is looking good now this also can take some color so just name it like red and these are the beacon so this looks good yeah just give some style let's say we want to change the color of text to white and second guys and it looks good I guess yeah and for the next evolution we can use the color as let's use something like green okay second green it looks good okay and we will just to use the same style which we used here and we should be good to go okay we have some problem here although what's the problem okay this is the problem okay so now it is looking good and we have next evolution and everything but we want it to be so here in the column we will mainly make we will make the main axis alignment to space evenly and it will distribute it evenly okay now what do you want we want to use this container with the let's just remove this country we don't want it we just want to use this card like this if we show this image again that this card is from the top a little bit margin is there then it has some height and width so we will use a position widget here okay so we will wrap it with another another widget which is a position widget okay what it will do it will have some properties like from top what you want from width and height and everything so let us give it a height we will use a media query here to support this screen like we can have a different resolution screen and with different size so we want to take the the phone size okay so how we can get that we can get that using this media query dot off and we will pass the context then it has this size property and then we have this height property okay now it is saying that we don't have the context so we need to pass this one text from here so we will pass this context from here now here we need to accept this as well so we will say build context context okay now we have this context now if I will refresh it then you can see we have this height now let's divide it by let's say 1.5 and this height is looking good okay now similarly we will give the width so we will say contacts dot size dot width okay and it will take all the space now let's just give it minus 20 it should look good now from the left also we can just give it 10 pixels and it looks good okay now from the top also we want some margin here so we can just copy this particular portion and multiply it with 0.1 let's say and we have this margin from here now this card can also take a shape we will provide a rounded corner to this rounded rectangular border it will ask for a border radius and we can say border radius not circular where we can just say let's say 15 as the border radius and it will look much cooler okay now it is all fine now let's give this Pokemon name some styles so style let's have this font size maybe ok font size should look good so let's give it 18 okay and phone to wait let's make it bold okay this is looking much better now yes now we want a particular image to be shown on the top of it okay so how we can do that so we have this position widget if we see here on the top of this position widget we want we will use this align widget okay this align with widget will take an alignment we will give this alignment dot top center okay then it takes a child we will give it a child as a hero because we want to perform animation and because we got we gave that tag to Pokemon dot image so same tag we need to give it here in the child part we will use a container okay where we will have a height let's say high it is 200 okay width of 200 this is the size of the image which we want then we have this decoration property where we will pass the box decoration it will take an image so we will need to provide the decoration image now it will take the network image and where we will pass the Pokemon dot image okay now just refresh it and you will see this tiny shot this Bulbasaur have not been the saw okay now this box decoration another is having another property which is fit okay this decoration image sorry okay so we have this fit and we can just say box fit dot cover so that it can cover the whole portion and it is looking good now but it has hidden our content so what we can do for the time being just to make it work we can give it us here some sized box height so we can use this sized box with it where we will give a height let's say 50 so that we can give get a margin on the top and it should look good yeah it is looking good okay let's give it to some more fun 20 okay so it is kind of looking good let's increase it a little bit maybe 70 and it is fine let's make it 25 or whatever you want okay now this is looking good now it should have that animation so let's see if it has that animation or not or what we can do one more thing here in the types we can give it a style let's say text style - ah font weight and let's make it bold because this will look much better if it is gold this types okay okay this is looking good now same for this particular week a nice widget so this should look good same for this el evolution and this is looking much better okay so this is how you will design this now let's see if we got the animation or not let's just press this back button which which we already got by default because we are using navigator navigator knows that or if there is something on the top of it so it if it knows that you will you will want to go back in the future so let's just press this back and you have you seen this animation lets me try again and as you can see we have this here animation and it is looking pretty cool let's go from Charmander from Charmeleon and you can see the types is fire weakness is water ground and rock next evolution is cherry hard let's go to cherish ad and we got some error because maybe oh it does not have this next evolution stuff so that is why we got the error okay let's just go to debug portion let's we started and it should walk because cherries are does not have any kind of next evolution so that won't work okay so this is how if we go to squirrel then it is working fine water electric city so this is how you can create your Pokemon app I hope that you enjoyed this video if you did then like the video subscribe to the channel to not be subscriber and also make sure to press this Bell icon if you want to get future updates and don't worry if you don't understand the code exactly we will cover more other videos and other topics and we will create more application and this video is again available in Hindi language as well you can watch it from there as well and apart from that everything is cool I hope you enjoyed everything this source code will be available on github every link is in the description you can follow me on Twitter Instagram Facebook everywhere follow me so that you can get all the updates on time thank you so much guys for watching and I will see in the next video bye bye take care and keep flutter

Channel: Codepur

Views: 74,092

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, google i/o 2018, flutter build app, flutter pokemon map, flutter pokemon app, flutter hindi tutorial, flutter hindi, flutter hero animation, flutter hero, flutter model class, flutter json api, flutter beautiful ui, mtechviral

Id: yeXJqZCiwTQ

Length: 48min 8sec (2888 seconds)

Published: Sun Sep 09 2018

Reddit Comments

[u/ylfiir]

I've built two apps in the last few weeks but totally forgot I originally wanted to do a Pokédex. 😅

Very nice video!