How to upgrade to Flutter 3.0, new features in Flutter, Dart, Games, Flutter Web, Linux desktop

hello friends welcome to my new tutorial how to upgrade your flutter project to latest version 403 as a may 11 product 3 has released with new features so in this tutorial we are going to take our existing project we are going to upgrade it and we will also take this opportunity to learn a few new features about the flutter so let's get startedfirst thing i suggest you to do please review the documentation please review the release notes in detail so what we are going to do we are first going to upgrade our project then we will go line by line of these items and let's see whatever is applicable to our project we are going to make up the upgrades or we will just review those features okay all right let's get started so if you go to go to my github repository again i'm going to include the link to this github repository this if you are interested to know how this app works there is a post tutorial series on this all right so as you can see the pub is spec.ml file this is an old flutter 2 version it's not that old but still i'm going to upgrade it to the latest product 3 version all right so let's open our windows machine here so i'm going to show the same thing in two different machines one is windows machine one is linux machine so in my windows machine i'm going to run a command safe letter doctor all right as you can see i am i have flutter 2.1 to 210 version so now this need to be upgraded all right let's go to our vnc server and here i'm running an ubuntu machine so let me run a terminal emulator here let me run same command here florida doctor let's see what it gives you so it's almost the same version 210 and i need to upgrade this all right so let's go back to our windows machine so here what you want to do here i am going to you know cd into that healthcare app management app uh what we just what i what i just shown you at the github repository all the floater related code is inside that source directoryso let's see it into that okay and here as you can see i do not have the android tool chain but it doesn't matter here i'm going to just do a simple command safe letter upgrade okay and don't be too hopeful that you knowi'm expecting it to be a simple upgrade but uh let's see okay so let's go cd into thissim directory on the linux terminal here here unfortunately i don't have that i don't even have the app so let me go copy this i'm going to get clone this so git clone and i'm going to give the path to this github repository all right git clone give the path to this repository it's going to take few seconds it will download that let me sit into that and here i'm going to sit into src directory and shoot the same command flutter upgrade all right let's see let's go back to our windows machine back here again and let's see what it did okay it ran few things let me run the factory docker command here i wish i could make this screen a little bit bigger but here as you can see it did not do anything i'm still running on 210 okay let's go back to our linux machine now as you can see it's still running so it looks like it completed let me run the floater doctor again and you can see the flutter doctor shows you that it's running on the latest version 3.00 so linux has been pretty smart about doing the upgrade all rightso now we need to go back and fix our windows machine so let's go back to windows machine againall right so here what i'm going to do i'm going to manually update this so let's figure it out where our flat installation has been and as you can see my flutter bin floor sdk is under a custom folder here so what i'm going to do i'm going to remove the entire directory here let's manually force thisto upgrade so here as you can see i have the flutter directory here all right flutter so i'm going to remove hyphen r force and then give the path okay i didn't like it i think i have to spell it out first fo rce let's go back force okay hit enter again so what it's going to do is going to remove the flutter directory umforcefullyso let's go to our flutter website and download this stable zip file i'm going to again copy this to same folder there so otherwise you have to change your environment variable path okay as you can see on right hand side it will give you error that flutter sdk could not be found so here let's copy this over okay let's go to our command prompt window again but he just finished copying by the way so i'm going to run photo doctor again and hopefully if everything is all right i didn't make any mistake it will show you that you are running the flutter on the text version 3.00 it looks like it okay it looks pretty good now so now let's go open up our source code all right let's open pub expect.dml file here please pay attention to this you know this is my old pub spec.ml file i know the packets will be uh you know upgraded after once i run the uh florida pubchet so just if you want if you prefer just take a copy of this i already have it at github so i'm not going to make any extra copy so let's go now go back to your vs code again the vs code extension i assume those are may not have changed but again it's a good idea to refresh those anyway okay i'm going to restock those this step is totally optional but again i recommend i highly recommend you do thatanother crazy idea is uh now you have the needless new flutter version let's create a new application so flutter new project and i'm going to give it a name i'm a testand just for the fun this is just an optional but again you want to see what are the new packages here and it's a good idea to manually compare your publish pack your newpower spec.dml file with the old one so that you can you will know what exactly you are upgrading to and here uh again it's a good idea to test your photo installation as well so all i did i installed these things and this is new because i haven't seen that you know top bar that is running in a debug modeuh maybe it was my earlier configuration i haven't seen that but maybe you know i think it'slet me run this from my uh ubuntu machine itself because i right now here i'm using this ssh terminal window so there might be some issues that's why it's not working that otherwise you would have shown you the uh your local host page or maybe you know you see that it says error there's a debug connection there's some problem with that connection has been refused so let me let me sort this out this is my particular machine configuration issue so let me run the same command let me open the vs code from the ubuntu machine itself and hopefully that will be a lot betterall right so i'm inside my vs code here as you can see it's giving a lot nicer output hereokaynow let me go to terminal window and this time i want to run it properly here so i'll say flutter run hyphen d chrome okay because i'm running a web version here and as you can see without any more changes nothing it was it used to work like that but now it's the good thing is it's working like you know without any error so now let me open thisdebugger window as well just want to make sure let's only see the glass through it if it's if there's anything different and this my app is serving here let me click on the plus item make sure that it runs okay all right let's see the okay i have to go through that i don't know exactly know what has been changed but there's a new dev tools versions out there so i'm pretty sure there's some enhancements to this debugger okayall right so let's let's start doing that what we initially intended to do so let's go back to our app healthcare management app app this is the app what we just downloaded from my github repository and you just want to quickly browse through it uh i want to open publish back our index.html file because this is the web version again first thing here something i need to change i need to update this credentials here so let me just copy this overall right sothen what i want to do i want to get inside this source directory and now i want to dosee i just want to run it and see how it does okay because i've got a new flutter sdk i upgraded it and hopefully you know i got the i i did a new flutter pop get and uhlet's test this out so hopefully without any error it should work because again as i said earlier uh there was there isn't much change because i was already using blender 2.2 i just want to make sure that it runs without any problem on new flutter version hereall right as you can see my spec see the validation working fine uh all the controller extreme conduit controller i use those are working fine and it is getting connected to the flutter so that's the best part of it i did not have to make any change it's still able to connect to the flutter so as you can see let me browse to a couple of other pages here this is a complete application if you are interested i have another post studio tutorial series on this if you want to go through this is how i have developed this this application is a very beautiful complete entirely application the productokaylet me go through a couple of other pages heremessageback to appointment yep looks like most of the pages supply chain reports everything is working as expected i will keep on testing my application if there are any more changes i will update my github repository but as of now it looks pretty good now now let's go back to that release 3 documentation and start reviewing this one by one so there are a couple of two medium articles i definitely highly recommend you go through that please please please what's new in florida three and there's another like introducing floral three those are medium those are blocks and i want you to i highly recommend suggest you to go through the documentation so here what i'm going to do i'm just going to you knowjust go through this like you know what are the new things here so they have recently introduced a games toolkit so if you are into the game's development this is something definitely very very new and i will be getting my hands aroundthis definitely you know i i love to develop some games here so i will be using making use of this application as well okay uh they have introduced couple of new documentation for new florida developer um for the web application i do a lot of coding because i recently switched from from angular to flutter so there's definitely something for me so the web app like in my example i'm using a web app and as you can see they introduced couple of changes here initiallyyou your flutter index.html file it always loads to your main.js but here they have made few changes here they have introduced something called rgs and they have also introduced a add event listener so what it does flutter loader it's a beautiful you know thing here it allows you for your web version most of the time what happens if you're depending on javascript sometimes your application takes some time to load it so mean that time while your application is loading you want to choose a a splash page or a loading icon so definitely you'll be able to do that now it's um and it's it's be careful it looks a little bit different than your old index.html file here i'll show that in a minute how my old index.html file looks like that's what it is right this is the new file and as you can see your new index.html it does have flutter.js but if you go back to your old flutter dot it did not had that it only had the main.js and the couple of other scripts what i either firebased connection is configuration variables but it did not had that predator.js now what you can do here go to your source directory here where your file is and all you need to do flitter create dot and this is nothing has changed i think earlier this was the same command people used to do and they haven't they have just retained the same command so all you need to do go back to your file and just save letter create dot and hopefully that will you know um that willcreate that will not have any issues but you know again i highly recommend that use this feature because it gives you a splash screen it gives you a loading icon and couple of other things okay next thing if you are doing the development on mac os definitely they have introduced the support for apple siliconthis is a huge step forward for um very you know happy mac mac os developer here okay all right this is uh definitely a featurepeople like me who have been waiting a long time because i do a lot of development on linux platform so this makes me this a particular upgrade makes me very very happy so what i can do you know i have been developing for web version ios android but i i love linux so linux is like you know okay how can i develop something for a linux app so here it they makes it like you know now out of the box they have given they are giving a full flash support so here what you need to do let me show you run this command it's very very simple upgrade so all you need to do install a snapd which i already have that should should give me an error here it says it's already installed so what you you know other things there are a couple of things you will need like you know client i haven't gone through the details of this package of these packages butit doesn't harm anything so looks like a you know i can just copy this and run this in my my command prompt window here okay let me run this and install this packages on my ubuntu machine but this is something definitely i've been waiting for today you know how to do the development for the linuxokay it's not running that let me let me debug this command let's go back to our linux machine here here one thing you i did not notice that earlier it was there just now so it says linux tool chain so i'm so happy to see this developer for linux desktop all rightlet's see for mac os you will see something a little different you will see xcode but for linux uh this makes me happyall right let's do one thing so here uh what you want to do you can cd into that there's another command you want to issue if you were if you're developing it for linux so flutter run hyphen dlnx so let me go try out this commandand i'm going to try this out on my existing um[Music]existing project what i just upgraded so flutter run hyphen d linux okayandif you just instead of hyphen d if you put hyphen infinite release what it's going to douh it will create a release version of your yeah it will create a ladies desktop app on your lex machine so flutter build linux hyphen f100ds awesomethere are a few other commands if you want to like you know create a bundle create a you know bundle in a directory which and later on what you can do advantage is like you know doing it like this so that you can uh take your bunker take your package and then you can export it give it to someone else for a deploymentall right so that's pretty much it on the linux side so let's goone thing i want to mention they have a better support of flutter firebase so i've been using flutter fire package anyway i haven't gone through the detail what has changed but umi glanced through it but you know my app what you just saw is able to connect there's no more changes but definitely looks like there are some better support there's new features out there one thing i definitely want to call out this i'm very happy about this crashlytics so it's like an analytics so whenever what you can do instead of a lot of time what happens like you know when you're running your firebase connection to your flutter a lot of things can go wrong and you want to know where exactly you know sometimes you want to debug what kind of connection is to mating and making or what exactly that flutter fire package is doing that has always been a black hole so one good thing about it you can using crashlytics on firebase analytics you will be able to do that so again let's go to you know review those two medium blocks um at a very good you know yeah let's go through it very high level as you can see they have please go through this block by yourself i'm not going to you know i don't want to go through that and take credit of someone else's work they have done one thing i want to call out the linux and app material design this is another things where i'm very excited about this i will be working on this you know i want to see what are the new material design features they have introduced so definitely it looks like an upgrade from material design too all rightlet's go back to that again they have a keep on saying they have a better support for flutter fire package and um you know they already have the benchmarking tools so you know next week perhaps next few days what i will be doing i will be doing some benchmark testing to see how much you know if there is any performance improvement in this area or not