Flutter For Web: Getting Started | Migrating PokemonApp to Web

I was up guys welcome back to my youtube channel and today we are going to talk about flutter for web I know I am little bit late but trust me I was having a very good time in San Francisco it was kind of a memorable time which which was like that the one of the best time of my life you can say and it was very memorable so that's why I thought about waiting for some time later Berkeley I just do some stuff with the lot of announcement which happened last week so now I am back to India so let's talk about flutter for web so if he'll go to flutter dot dev slash web then you will see this page where you will see that how flutter for web actually works so one thing which has changed is that now flutter for web is not called hummingbird they have dropped that name maybe because because flutter for web is it is making more sense rather than hummingbird which feels like it's a different kind of technology so that might be the reason and one more important part is that this flood of app web is right now available as a technical preview which means it's not stable at all and you should not do any production work with this because it's still in the development mode so now if you'll see this diagram then you will understand that you know the framework remains the same only the engine part which you can see this off amber color which is the engine part which has changed and that's how you are able to run the same application the same existing code on different platforms so this is the idea and you can see lot of notes on this technical preview that who should use it what's the purpose how it's like how the work has been done okay and what are the temporary package available and another thing is that this particular flutter for web is right now available as a separate repository which means that they have created a separate branch for this and that's why you need a different package for developing for web although that will be merged later into the main SDK which is the flutter SDK so don't worry about that but because it's right now in preview so you cannot expect that to have otherwise there will be a lot of for problems so I'm not talking about that I'm gonna let you know how to get started and then what we will do will convert one of our Pokemon application which we made earlier in the past you might have seen the video if you haven't then I'll put the link in the description that video will convert to flutter 4 well first of all we will fetch it from my github account and then we'll see what we can do so going back to Visual Studio code or IntelliJ whatever you prefer when you will press command shift P in Visual Studio code then you will see Follette a new web project ok just write flutter and you'll see this flutter new web project let me just increase the brightness a little bit and now you'll click enter and then it will ask you that what will be the name of the project so I'm gonna name it web demo okay so let's let's call it flutter web demo which makes more sense and then I'm gonna select up path here and this is this is fine and then I'll select the folder and it will create a project for me for sure but if you don't want to use Visual Studio code it's totally fine even you can go to flutter if you'll go here into this flutter web repository which is flutter dot-com sorry github.com / flutter slash flutter underscore web so you will see the guide to how to you know use the samples and how to getting started with this so all of these details are here so now we'll go back here and we'll see that what's happening so it's installing some packages and then you'll see that what we get here is little bit different from what we used to get with flutter SDK so now we get up web folder which has this index dot HTML where we have this index file where you can see it has this HTML tag head tag body tag and the same thing but you'll see in the script part that they are including main dot dot dot J else which means we have main dot dot but it will be compiled to J's file after you will like built this political particular project so that we get the idea okay and the type is gonna be JavaScript because you know that on web HTML CSS and JavaScript are the three things which works so anyhow this start is gonna be changed to JavaScript and if you go to main dot dot then you will see this flutter web UI as UI dot dot and what about so I will take a look so this is the main method which will be called for first of the time in main dot dot which is a part of web then this is calling ab dot main which is your lip folders main door dot where we usually write flood or apps so if you see this is not flutter slash material dot dot this is flutter underscore web slash material two dot and they have kept kept it separate because of like not producing any kind of issue to the main sdk and this will be merged later and then it will be same like this after some time but right now it's different so that you don't get that kind of issues now let's try to run this app and let's see what happens so if you'll go to terminal you have to just write web dev surf and web dev so we'll do this building script snapshot and all that and then it will run your project to a localhost and let's see what happens and if this command does not works for you let's say web dev so then what you have to do first of all you have to activate the web dev for that if you'll go here then there should be a command for this so this is the command flutter pub global activate web dev and then also if this web dev serve does not work for you then you can write flutter pub global run captive and then serve or build whatever you want to use so now you can see this is now working serving web on localhost 8080 is the port now if I'll click just here and then it will open this 8080 and you can see flutter demo homepage hello world let's try to change a little bit let's rather than let's just delete all these things I don't want this kind of stuff here so let's delete and hello let's say I'm changing it to Pawan Kumar and now if I'll go back this will not work because this is not hot restart or something I'll just refresh my browser for the time being and you can see hello Pawan Kumar now what I can do I can just go here and I can write web dev okay and then if you'll go to the documentation then you will see something like this which is web dev serve auto restart which means that it will do the hot reload part only for stateless components not for stateful as of now but that will be fixed later so let's do that serve and then what was that auto it should be like this restart oh oh I missed something yes this okay now it's saying that it is working okay fine now if i refresh this this looks good now let's try to change this a little bit and let's save it and you can see this has changed so this is working pretty good and hello Kumar let's try and save it and you can see hello Kumar so this is how flutter for web actually works look now what I will do I just delete all of it and let's try to import again let our web slash material dot dot then the same thing why it mean run app okay and then I'll gonna save my app so I'm just doing it from scratch you can say and then what I'll do I'll make a method a stateless widget stateless widget and I'm gonna name it my app which is fine rather than container I am gonna write material app and in the place of child I'm gonna first of all I'm gonna make the banner as falls in the home part I'm gonna say homepage which now we are gonna make homepage okay so stle s widget we are gonna say it homepage now here other than container we are gonna have a scaffold and then we have gonna have an app bar which make sense okay and then we can have an app bar and then we can have a title in the title we can write text okay oh this is interesting now in the text we will write flutter Oh web then it will have something called a background color let's change the theme a little bit here so for theme it will be themed data oh it's not showing me so many things here let's change the primary swatch so I got call it color start red for the time being it looks much better and then up to the app bar um I can have the body where we can say huh in to this Center I'm gonna have a child where I'm gonna say not text why just showing prefix and all that I don't know oh there's something wrong with this I don't I'm not sure what's the problem but I'm gonna fix it soon so in the child text I'm gonna say welcome to web and then in the floating action button I'm gonna write floating action button nothing is working for me to be honest wine I don't know so probably I bought a new laptop that's why it's happening okay so I'm gonna just write icon I can start at then on the unpressed i'm gonna do nothing okay now let's refresh it and you can see welcome to web and as you can see I have this app bar but this button is not showing the icon welcome to web is fine and let's try to add a drawer here so what I'm gonna do I'm gonna add a drawer and yes so this is the drawer and now if I'll refresh it then you can see this is showing some random is the square icon which is which is like the icon is missing or something like that if I'll go to inspect part then go to console and you can see that you know font manifest does not exist so this is the issue which we are getting that you know we have to make this file font manifest where we can specify that from where you can fetch the material icons so any kind of font you want to add you have to make an asset so in the web folder we will make up different folder which is which we'll call assets and here we will make a new file which will be found many first daughter Jason okay this file will have a code which I'm gonna take it from here so this will be the code where we will have an array inside our we will have a JSON object where we will specify the family family is material icons and we are going to fetch the fonts from this particular side which will return as the off to format of the material icons font now if you will refresh it just go to main road or just go back and you can see you have the drawer icon you have the plus icon it's looking so good now what I'm gonna do in the body part let's do one more thing let's make a list view here so what I'm gonna do I'm gonna add a list view dot builder and eye item count let's say 50 and for 50 items what I'm gonna do I'm gonna return list tile okay and then I'm gonna have the title as text and item and then I'm gonna name it index and let's try this so if you see here we have a list looks good so it has item 49 items and it's so good now what I'll - I'll try - okay I let's try this way to make it see that whether it is responsive or not and it looks like fine so far so if you'll press this plus this looks good so everything almost looks good to me at least and so this is what we can get and similar things we can do here with this project and I'm gonna push it on the on my github and you can see that if the link will be available in the description but now what I want to do we can do a lot of things they are right we what we do usually with any kind of application but now what I want to show you is that how to do the same thing with the existing app how to make it work in the existing app so if you'll see here we have a lot of things they are in the pub spec dot EML let's take a look so in the pub spec dot EML you can see that we have build Ronna we have build web compilers and we have floater web and all that these kind of things available here so this is these are the settings which we need to do with any other application which we are going to use so what I'm gonna do I'm gonna just and this particular thing and I'm gonna go to my github comm / IM / one and here you will see that I have in the repository section if you will write Pokemon okay and now I'm also gonna publish the flutter for web version of my flutter uikit so this is the flutter UI kit so the web version is also available for this flutter uikit where it is so this flutter you hike it it has the web version now available I'm gonna push it soon so let's go back to our Pokemon app and you will see this is the Pokemon app I am talking about this is already written in flutter you will go to clone and you are gonna just copy this URL and I'm gonna open the terminal and I'm gonna clear it now what I'm gonna do I'm gonna just write get clone and I'm gonna just clone this Pokemon app inside my vs code so inside my Mac OS and now I'm gonna open it in vs code so I'll write something like this I was so I have to go to Pokemon app and then I'll write code dot o code is not working why it's not working oh so doc told command is not working so I'm manually gonna open it in my vs code here so I'll close this folder I'll open more from aside so file open folder so open and here I have a long list I will select Pokemon app and then I'll open it so I have bought this new macbook so that's why a lot of settings has been missing so pardon me for that now we have this Pokemon app now I'm gonna fix a problem which is with the STT P package so earlier when I made this particular sample this is not a perfect sample first of all second when I made this then this HTTP used to be available inside the flutter package but now it's not so we'll go back to pop spec dotty ml we are gonna fix it by writing here that please pick the package from anywhere and then it will not show me that error now it's fine and I'm gonna write fixed HTTP package issue and ok and then I'm gonna commit it and I'm gonna push it back to my wrapper so that we could get it now what I'm gonna do I'm not gonna do anything here but rather I'll create a new branch from here and then I'm gonna name it flutter web ok flutter web and then whatever we will do we will do to this new branch which is flutter web if you will see here this is the flutter web branch now so now what I'm gonna do so this is fine this looks good all looks good now what you need to do you have to go to pub spec ml you have to do a little bit changes let's make it to point 2.0 minimum and this is fine let's remove the flutter SDK first of all let's remove the queue but you know icons because it's not gonna work now [Applause] this is fine this is also fine we'll receive a lot of issues let's remove flutter test from here and this looks good we can disable this as well this is not needed as of now and now what I'm gonna do in the dependency section I'm gonna add flutter web okay let's pick any version of it then flutter web UI let's pick any one of it so this is what we need here and the dev dependencies we need build runner okay it is a spelling issue any of it and then we need build web this new keyboard is little bit different compilers okay this is what we need and then we need to like this flutter web and flutter web UI is not available and pub that pub dot dot length dot o-r-g so as you can see there depends on flutter web which does not exist so we need to override this dependency so we will say depend then depend and see overrides overrides okay now here I say flutter web let's say first of all then I get then I will write URL and we can specify URL as HTTP slash github.com slash flutter slash flutter web okay then we need to specify the path which is packages slash flutter web okay now I'm gonna just copy this and gonna paste it here as well now rather than flutter web we will say flutter that UI the URL is gonna be the same but the path is gonna be this and now let's do refresh and it will start getting the dependencies and I want to see exit code zero which means everything is done properly and now still take some time okay okay okay okay okay and you can see it's downloading something it's I guess everything is done for the most part and it is it has changed fifty-five dependencies and exit code zero so we got what we wanted now we got some errors as well because in main dot dot this material dot dot is not exists this flutter slash material dot dot so we are gonna just replace it flutter underscore web slash material dot dot and it will fix all the issues here at least and then in the Pokemon detailed the same thing we have to do a hand it will also fix all the things now if I go back to terminal I'll Drive web dev serve and it have started this particular script here it's making snapshot and all that and let's see if that works so I'm gonna just save this main tour dot as well starting resource servers and all that and this is of this is our Pokemon app I'm pretty happy to see this working and let's see what happens okay and and still starting the server still taking some time and we can have that much time for sure so as one more thing which I forgot to mention is then I am using flutter one point five point four hotfix two which is this table wasn't right now so please make sure that you are using that otherwise let's start the server again there was some issues I don't know what kind of shoe so please make sure that you are on the latest we're gonna flirt at least one point five point four otherwise flutter will not work so that's one of the issues and now all now I am still waiting for it to get start running so what we are doing in the Pokemon app if you want to know then you have to watch my tutorial for Pokemon app which is available in the description the link is available I'll try to put a card as well so there is some problem with this let's try web dev build let's build the project first let's see if that works running build okay so um there is some problem no asset exist in web skipping output that is fine but why the serve command is not working let's try that starting resource servers when we have done everything fine so far there can be some issues as well so please be with me um I'll definitely fix all of them if there is any kind of issues let's try running on the local host watch what we get this is still not available so let's go to pub spec dot EML let's try to see okay what I'm gonna do I'm gonna write flutter packages global run web dev sir because some time it happened that that command does not work okay so okay so throwing a big cached asset graph due to dart SDK update there is something issue with that and I'm still wondering what's what's the problem so um it should be um I'm not sure what kind of problem it is so let's try to fix it before we can proceed what I'm missing I'm still trying to figure out what I owe so we forgot one most important part that we have to make another thing which is a folder which is the web and inside where we will create a new file index dot HTML how can I forget it and html5 now here in the document we will say Pokemon app and everything is same then we will add a script tag and inside this script tag we will have something called our deferred soles which we will say main dot dot dot j s and then the type of it would be application slash Java Script and then this is done now we will create a separate file which we will call main dot dot okay and then here we will first of all import flutter web slash material dot dot then we will import flutter web underscore UI and then we will use the UI dot dot as UI and then we will import package slash common of skaaland pokemon slash main door dart as app now we are gonna make another main method here and we will make it a synchronous here first of all we will await for this UI dot and we will say what we can save app only initialized platform so right now what we want is just web only platform so initialize this platform and then we are gonna use this app dot main method to execute our main door dot from Lib folder so that's what we need to do we can skip this part that's not in it so now if I'll go and run web dev so it should work this time yes it's working it's key it has given me this warning that you know I'm going to throw away some cash tacit graph to do dart SDK brain and all that that is not a problem so our web is serving on this localhost 8080 let's try to run it and here on the top you should see Pokemon app or Pokemon whatever I mentioned in the index Pokemon app and you can see poke a app it is showing these things although there is issue with the icons what we will fix a and smoking did you see that okay and oh did some animation it's still in the debug mode so there can be some lags as well but it's working now let's fix this this asset issue so in the web gonna make a folder asset and here I'm gonna add font many first dot JSON and I'm gonna copy my font manifest rotation file and now if you see okay will it work and let's do one thing we are gonna write web dev serve or to restart and then it should restart for us let's refresh it once and yes we can see this icons have fixed now this is also looking good there can be lot of changes we can do with this now what I'm gonna do I'm gonna go to main door dot here and I'm gonna fix the height of this Pokemon so let's make it something like media query dot of context dot size dot height whatever the height is I'm gonna just divide it by 0.2 and same for width I'm gonna do it okay it so width let's refresh it and let's see what happens so the Pokemon got a little bit bigger or not it's still wondering so let's make it 0.3 and 0.3 let's see if that works oh oh c'mon is still not that big what's the problem now what's the problem so what we can do let's rather than fixing this like this let's try to give some height let's say 300 and let's see if that works still not working oh so maybe it's happening because of the column and [Music] maybe we have already fixed the main exercise in exercise door max let's try this way okay so whatever I mean this is not working so there might be some reason for it let's try this way okay so this is not working as of now and I don't know maybe and we have to remake it properly because there can be some outer dependencies by which it is not working properly and this is probably of this as well so if I'll just remove it up still not working let's try this so fit box fit dot cover let's try this as well oh this is now working so probably happened because of that and now this height 300 is working let's try 200 and yeah it's working so this was happening because of the fit and now if we have fixed it so you can use the media query directly here and then you can make it responsive let's try to do that okay and size door tight and to 0.3 okay what's happening about it same thing we will do here as well okay but we will replace it with the width oh this is so big so I'm gonna do this this oh this is still big oh this is the problem I guess this is fine so this is looking better than what it was and now if we go there is working fine so this is just a demonstration of how you can convert your application to the flutter web part of it I hope you enjoyed this video I'm gonna come and make more stuff with this so thanks for watching and I'll see in the next video if you enjoy this video press the like button also share it with others please subscribe to the channel if you're not the subscriber already press the Bell I can to get the future updates and commenting in the comment part to tell me anything about it thank you so much bye bye take care and have fun

Channel: Codepur

Views: 53,739

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, google i/o 2018, flutter web app, flutter web dev, flutter webview tutorial, hummingbird flutter, flutter web tutorial, flutter pokemon app, flutter for the web, flutter web, flutter web app example, flutter web application, flutter migrate to web

Id: smwtgvpK9FU

Length: 31min 53sec (1913 seconds)

Published: Wed May 15 2019