Flutter Web Crash Course 2020 | Create a Complete Web App for Beginners

hello everyone and welcome to this video today we will be creating a very simple web application of the flutter and the interesting thing is that we are not going to create one small part of UI or we are not going to just develop the UI part or just the functional part or just one feature we are going to create an entire web application now I know it's a bit funny to call it a complete web application because it is essentially a very simple thing but then again that is how we learn right so we will be going through the entire process of how you approach a problem in flutter be it any problem be it a UI problem or a functional problem and then how you break it down and then you find solutions wherever you are stuck and then you go ahead and complete the web application and then deploy it right so I haven't yet created what we are going to create now because I wanted it to be a live experience so that you get to feel how things are done and you know how to approach the problems which you might annually definitely face while creating flutter applications for the web or for the mobile or desktop whatever applications you are creating right so I can show you the time stand right now it is Tuesday 9 10 a.m. and I haven't yet created but I will switch to the preview of the application right now so that you get to see what you will be building at the time of showing you this preview I have already recorded the entire development process of the for the video and I have completed this application and also deployed it on the internet over here so you are in store for some really exciting development stuff and I know this is a very simple application but yeah I mean it will teach you a lot of things I hope at least and so what this application does is that we create Hamir created with some simple flutter web application that has a simple UI simple state management simple network interaction but it is a fully functioning completely inter if selector web application so what it does is that if you ask a question over here and it must be a yes or no question if you ask a question over here say are you listening to me then what the application will do is that as soon as you hit click get answer then it will hit an API endpoint and it will retrieve either a yes or a no so it is that simple it will either retrieve a yes or a no and an appropriate gif for it accordingly and this is completely random so it is not doing any processing or something it is just hitting that end point from that endpoint is giving it a random yes-or-no answer with a relevant gif that way it is going to display to us we also have this reset button over here that if you click then the entire app resets itself also we have added some sort of validation to the web application so that if I click on get answer and without asking a question that then it will give me an error in the snack bar at the bottom that you can see that that says please ask a valid question also if it is it just it just doesn't check for the empty strings over here in this text field it also checks if it is actually a question or not and the parameter for that is if it ends with a question mark or not so if you ask a question and like for example are you curing this and if I do not you know suffix it with a question mark it will still give me this error because I need to ask a question and once have asked the question then voila we will have our answer right so and then we can just click on reset to reset this app and that is what this app does but the the process of creating this entire application I'll be laying I'll be creating the flutter project from scratch and you will be learning the entire process you know the entire all the problems that we face and everything from scratch so stay tuned and enjoy the video thank you a chance to preview the application that we are going to build let's jump right to it so the first of all if you go to this page flutter not dev slash Docs slash get started for the web page then you will see that flutter is not yet available on the stable channel you have to change your channel to beta in order to use it so what you should do is open up your terminal and over there you should first run the command flutter a channel beta after that you should all also run fluttered upgrade so you are on the latest version of the beta channel as well after that you need to enable this flag that says flutter config - - enable web if you don't do this then flutter create the command flutter create will not create the web folder inside your newly created further projects so you need to enable this I can quickly show it to you in the terminal if I open up my terminal then if I execute flutter doctor then you will be able to see that I am currently on the beta channel already and the as of the recording of this video I have the latest channel as 1.1 9.04 3 pre and I also have the enable web flag already enabled so I can run flutter devices and once I run flutter devices you should be able to see Chrome over there right so you can see that chrome is already listed as a recognized flutter device and hence we can run flutter applications for the web ok so the first thing that we will do over here is we will I will go to my projects directory you can go to whichever direction you want wherever you are going to create your flutter project I will switch to my projects directory then the command that i will run is flutter create and then whatever I want to name it so I want to name this application I know everything because ultimately the web app is going to take a question and then return a yes or no response right so it is safe to assume that the web app knows everything and whatever it says is correct okay so yeah we are creating a divine web application so let's call it I know everything if only I can spell everything so yeah flutter create I know everything and we can just hit enter or you can add an additional command over here that says that also specifies the organization now it may not be necessary to do it over here because we are not creating a mobile application but by using this flag over here what you didn't do is you can specify something like this so instead of the comm dot example default organization flutter will create the project according to your organization we will skip this part yeah for now because we are creating a web application primarily if I hit enter then flutter will create and I know everything project for me now what I can do is I can just CD in to my newly created project and then I have a launch Visual Studio code from here and then it will take over from there right so I now have vs code launched and as you can see that we also have a web folder over here which has an index dot HTML file now what flutter does is that flutter creates what we call a single page application right so there is just one index dot HTML page and inside there flutter is whatever content you program into flutter whatever you quote in flutter that is going to be populated inside this index dot HTML page Oh and in fact you can edit this index.html page you can supply all the different kinds of meta tags for SEO purposes so that whenever you first open the page and why flutter is loading people do not get to see some lowercase title or something like that which says example or something like that so you can make it more professional we'll get to that later during the deployment part right now if we go to the LAV folder we have the same old counter application let us first run it right so first time when you run it it will say launching on Chrome because see Chrome will already be selected over here for me it was selected if it is not for you then you can just click on this and you will see a variety of different options and then you can go ahead and select Chrome ok if you don't see chrome there then that means that the enable web flag has not been set and you need to do that first once you have launched the flutter application on the Chrome browser one thing that will immediately hit you is how fast it was right because the build time and the build process is much simpler for a flutter web than it is for fluttered mobile so yeah that is a considerable difference that you will notice almost immediately now as you can see it is a completely functional working flutter application running on my Chrome and I can hit the increment button over here to actually increment the counter and we have the same old debug banner and everything is there also hot reload and everything also works so the next thing that we are going to do is what everyone does and it is the most exciting part of the flutter of any flutter video or any filter tutorial if you ask me and what we are going to do is we are going to press control a to select everything and then we are going to hit delete to delete everything next up we will start to create our application from scratch so what I can do is I can import material and then I will have to write a main function which will have a robot function which will take in my route widget which I haven't yet created so let me just quickly create my route widget my route widget will be named my app or let's say I know everything ok and over here at the root of my flatter application will be the material opposite ok and now I can pass the I know every in an instance of the I know everything app inside my main method so inside my I know everything app I now have a material I've created also the test folder will now throw an error and tests are beyond the scope of this tutorial so let's just delete it although it is not a very good practice but let's do it another exciting part anyways so now what we can do is inside our material app first thing that we should do and what I do is that I disable the debug show check board manner and that debug manner has to be gone because I can't see it and the next thing you can specify the title property so whatever title property you specify over here is what is going to be visible over here as the title of the webpage right so if I specify I know everything over here then and when I save then the title should automatically be updated over there on the top of the tab to say I know everything so another thing that we need definitely need is our home screen so the first screen that we want to paint inside a flatter application as soon as it is run and you will create that just now and let's call it the question/answer screen because that is what is it is going to do right so and I know for a fact that it is going to be a stateful widget so I will create it that way or maybe yeah this is created over here it is a very simple application but we can also create it in a separate file so let's do that instead let's create another folder named screens if we need to add another screen afterwards or pages after that inside pages I will create a new file call it question answer dot dot now inside question answered Road art I can create a new stateful widget first of all I will import the material package then inside question on set or dot I can create a new stateful widget and call it question answer page ok so we have created this and this will have a scaffold now inside main door dot I can provide it with an instance of the question/answer screen for the questions are paid sorry and now if I go over here then I should have a blank scaffold and as you can see the title of this page has now been updated to reflect the new title that we have supplied inside our material app ok now let's just forget about our main road our final focus on the question answer screen so we are on the question answer screen now and let's start by supplying an app bar so Meagan supply in a bar in the usual way just like we do for mobile platforms and this time what I want to do is I want my amber to say I know everything definitely oh sorry it doesn't take a screen it takes a text widget or any other widget basically I would like to supply in a text widget ok and once I've supplied it a text widget it should automatically create an app bar for me so yeah that's there are good old app bar but I want it to be a little bit different a little bit simpler so I don't want the elevation to be there yeah elevation should not be there so that's immediately better and you can also change the background color so maybe colors not to you I don't know yeah I mean it's not super amazing but yeah it's definitely better than the default one because we get bored of the default one so yeah it's I know everything with the teal color now also now that we have our app bar done let's go over to the body of the scaffold so if we saw with sorry the body will not take another scaffold it will take a column in our case it will just take a column and inside the column we will set the main axis alignment to be Center and also the cross axis alignment to be centered so cross axis alignment dot Center we want everything just to be centered on the screen now we will start with specifying the children property of our screen so we know that we need a text field so that we can enter something right and we can ask a question enter a question or any other sentence so what we are going to do is yeah what we are going to do is we are going to create a text field as soon as you create a text field you should now be able to see a text field on your screen but it takes the entire width of the screen and it doesn't look good so what we're going to do is that we will wrap this text field inside a container because why not containers in my opinion containers are one of the most powerful wizards in flutter which you can use to do almost everything so and then what we will do is that we will give it a width property now what we could do is that give it a hard-coded width property like 200 and it would still work but the thing is that why give it a hard-coded property why give it a hard-coded value then if we can actually make it a variable of the screen width right so how do we do that we access the width of the screen media query not of context dot size dot width and then if we save it then you can see that currently it is the complete width of the screen so what you can do is add a fractional multiplier to it and now it won't be the complete width of the screen but it will only be 60% of the screen width so as you can see it is 60% of the screen width but that again is too big I think so let's just keep it 5 50% of the screen width now we are going to be needing certain buttons so let's just prototype them quickly we are going to need two buttons basically one for submit and one for reset okay so what you can do to easily create buttons is you can do something like raised button dot icon and it will immediately give you a button with fancy elevation high highlight properties and all that so inside your label you can give it a text widget and say ask question or get answer and we can give it an icon or do we need an icon I don't think so so let's just keep the icon for now and now this will be a child property also on pressed we are going to handle that soon enough so we now have a list button and now that you can see that the column has centered everything before even only the text field was there it was stuck at the start of it right that is because of the size of the column the size of the column was only limited to the first child now that we have more than one children then it will automatically adjust the main access aligned in the success alignment also alright we can have another button that says reset so now we have two buttons but we'd also like to have some space between them so I can easily put a size box with a width of say 20 and now I also have space between them so everything is fine I can also have a size box to have some space between the text field and the row of buttons this time it will have a height property not a width property so already looking good right yeah so but the text field okay but I mean it's good but we can make it better so what we can do is we can provide it a decoration property now at the decoration parameter inside the text field constructor takes something called an input decoration which we can give it we can give it an input decoration instance and inside that input decoration we have so many options so the first thing that I want to do is give it a label because the person visiting our website or visiting our web app should know exactly what to put inside there wait I can give it say ask a question and then we can also give it a border to make it a material to give it a material feel basically this can I can give it an outline input border oh I also have to add come over here and as soon as I do this and I reload what you will see is that the text field is automatically so much better right and when I click on it then it will give me this blue highlight but my ab bar is still in color and my text field is blue in color so it doesn't really make sense so what we should do is we should also change this color to the teal color the fastest way to do do that in my opinion would be to provide a theme property to our material app which we will take in a theme data object inside the team data object we can provide the primary color as colors or we can provide the primary swatch in itself as colors dot teal and now if we reload we should have a teal colored highlight on the text field so much better right also these raise buttons look ancient right now and I don't want ancient buttons also I would love to have some rounded corners not a lot but some so I will go to my raised button object and I will try to add some border radius but then if you try to add some border radius you will find that there is actually no border radius property for the raised button right so what should we do now because there is no raise button there is no border radius property for the raise button but we need it right so what should we do we should Google like people do we will Google gives border radius to raised button clutter and once we do that we will get to a stack overflow page and that stack overflow page fortunately has an answer for us it says that okay you do not have the border radius property but you have something called a shape property which you can exploit in order to achieve this so we'll just copy the code from there like good developers and we will paste it over here now as soon as we paste it over here we can paste it in both the places and as soon as we hit save then our app will reload and now magically we have our rounded corners but we also have this red outline as a red as in a red border and that is what happens when you blindly copy and paste code from Stack Overflow which you should not do you should definitely go through that code and pick only the things that you want and leave out the rest because if you do not understand the code that you are going to copy paste from Stack Overflow then it will result in interesting errors so now that we have already achieved our rounded corners thing what we need to do is we can remove this side property that has been mentioned over here in the code that we copied and yeah as soon as we do that you should be able to see that the red border is now gone also as I told you earlier I do not want too much of rounded corners so maybe what we can do is just go with five instead of 18 so yeah already looking much better and the background color is also something that we can and should change so we have that option I think yeah we have the color option and we can just put it to either color so teal directly or we can use theme data to put it to as the primary color of our theme as soon as we do that we now have a green button and I can just copy paste that to the reset thing also and now since our text looks weird we can have a textile property that will take in a color and put the color as colors not white same for over here also we can give it like this and our app is looking much bigger now so this was I think all about the UI part I mean yes a small UI component is also going to be there after we have already fetched our responses but we can safely move on to our back-end part that is our logical part or the functional part of the application which would actually make the application usable develop the functional part of our application we will go ahead and first explore the API that we are going to use so you can go to this amazing website it is called public API is dot IO and there's a hyphen in between you can go to this website and it has a full directory of or some public ApS that even use for different projects we can search for yes and we will get our guest no API that we are going to use so if I click on this and then if I click on the official Doc's it def it directly takes me to the API itself right so there is only one endpoint and we can perform a get request to get a response from this end point and the endpoint is yes no WTF slash API and we the interesting thing is that we not only get an answer in the text form but we also get a gif alongside it so that's a plus I can just quickly copy this URL that is the endpoint that we are going to hit from here and then we also need the HTTP package in order to create in order to make API requests and get the responses back in our flutter application so I will search for HTTP on pop dot def and now that I have it I can go to the installing tab and copy this line from over here now we can go to our pub spectro tml file and inside our pub spec tamil file I can add it as a dependency now to things that we can note over here is that what I follow in a standard way is that the first thing I always give my dependencies a version I know I could just leave it like this and it would still work because pub's the pub's spec file would always flutter would always face the latest version but then I would not be completely in control of the versions and the dependencies that I'm adding to my project so I almost always not almost always provide a version second I also like to leave a comment because see right now we are developing a very simple web application for flutter it is a very simple application but for production applications for applications that you'll be breeding for your clients for your company in all those scenarios in all those cases you will have multiple dependencies many times a lot of dependencies and in order to manage all those dependencies you always you must must have comments over there so that you are always aware of why that dependency exists in your project and what is its role so right now we can add a simple comment which will tell us why HTTP is used in our project and what is its role so I can just write to make API requests and for network interaction or whatever you want you can write over here now I can save it and as soon as I save it because I have the flutter extension 4 vs code installed it will automatically run the flutter pub get command for me but you can also do that manually from the terminal by opening the terminal and the root of your project so I can close it now now I should have the HTTP package so what I can do is I can import it import HTTP and then I can provide it an alias so I will have to write HTTP dot cat HTTP dot post just in order to ensure that if we did not have any conflicts inside our file and once that is created I will go ahead and create things that are going to manage the state of our application so the first first thing that I am going to build is the first thing that I'm going to declare over here is a text editing controller that we are going to assign to our text field so that we can have access to the value of the text rating controller at all times text editing controller for question text and question controller question field controller should be more appropriate over here I think and then I will initialize it so I have now initialized it the second thing that I would like to do is have a function so what this function will do is it will handle the process of getting yes or no response okay now I can go ahead and create the function so it will be handle get answer yeah we can get we can change this to answers because response may be directly related to as in the response of an API request which is not what we want to say over here so I can write handle get answer and it will be an async function because they are going to perform a network request over here and all and keep this in mind always that you should always wrap your network requests inside a try-catch block so that you can manage whenever suppose there is no internet connection or there is other kind of failure you can always manage that inside your application because your application should not crash if the network request fails so please keep that in mind I can have a try-catch block and the catch will give me an error message and a stack trace of the exact files that caused the error I can just print it out for now but you should definitely manage the state of your application in such a way that if an exception happens and it is caught by this try-catch block then you should definitely manage it and handle the UI accordingly so inside my try block what I'm going to do right now is I am going to have a variable of type HTTP response and let's call it response and that will be equal to HTTP dot get and I will put in my endpoint that I copied from here so I can put in my endpoint over here okay so now we know for sure that we are going to get a random yes or no response accordingly and we'll also get an image for that so I can show you it is completely random I think there is also a way to you know get a yes response always or a no response always and in that case this forced a parameter in this response JSON will be true but we don't want that we do not want to force anything upon our user so we stick to this also one interesting thing that you should do is now see we will make the request we will get the response and that will be the end of it but then wherever we want to use the data that we have received in this response will always have to rely on our you know we always have to rely on ourselves that we are writing the correct key we are referencing and that we are referencing the correct key and whatever place we want to use this response so what we will do and what is a standard practices that will create a data model or a data class so I can go ahead and create a models folder and inside that we can have answer dot dot file so inside a models folder now I have an answer or dart file what this class is going to do is this class will help us will help us in managing data managing yes or no response data in our app so this is a data class basically now we can go ahead and create the class call it answer for now I mean assured you can definitely go ahead and come up with better names but I am just going to call it answer and it will have two properties it will have the answer text fine which will be of named answer text of type string and it will have gif URL so we are also going to get the gif URL from over here right so it will have another property called the gif URL and that we can set it like this now I could create the class myself but I have this handy extension inside vs code installed which will create this class for me so all I have to do is go over here and then press control full-stop or daughter period whatever you call it control period as soon as I hit that it I will get an option for generate data class you can also go ahead and install this extension dot data class generator from your vs code extensions library and I will simply generate the data class for me and it is created the data class for me so now I can easily create an object of type answer cool the thing that I want to notice also okay so I have done an error over here I mean it is not an error it is more of a personal choice it is recommended that you keep the names of the attributes in your data class same as the attribute keys inside the response body that you are receiving so if I am receiving answer over here and image over here then I should have had this same keys over here also so that there is no confusion so what I can do is if I undo it I can change this back to that keys that we are going to get in the response body and then I can generate the data class so now both the keys of the JSON object that we'll be getting and our data class are matching now so inside this from map constructor if we it we don't have to customize it ourselves it is already done now let's just first make this request and see if we are getting something back so all I do is print the response body that we are getting from our request and the next thing that we should do is inside get answer I can hook up my function over here and please do not do this we do not want to invoke the function as soon as the widget is being built we want to provide a reference to this function so that whenever this on pressed event happens on the raised button so and when the button is actually pressed then this function will be triggered and if I save that and now if I go to my app and I click on get answer and then I come back to my vs code and if I open my console then you should see that we have got the response so our API request is working yes that is a good sign our API request is working so I just provide a simple check over here also you can also print the status code so to see if it was a successful request or not most ApS will return a 200 ok status code if your request was successful so if I click on get request then you will be able to see that 200 is print o is printed over here because it was a successful get request yeah so what I'm going to do is I can provide a simple check that says response dot status code is equal to is equal to 200 then and response what is not equal to null sorry response dot body is not equal to null then in that case what I want to do is I want to parse the JSON string that we have received I can show that to you as well if you print the runtime type of the response body right now you will see that it is string sorry for that you will see that it is string so if I save it and then when I click on get answered you will see that the runtime type of what we are getting right now is string but what we want is a map so that we can parse that map into our answer model that we have created for our application right so in order to do that we have an interesting thing called the dart convert library and that does it for us that does the JSON decoding for us so I can have a variable of type Maps dynamic and let's just call it response body and it will store in the decoded response body so I can write JSON or decode and I can pass in the response body string like this but as you can see that we have this red line over here because JSON in order to use this we also need to import that dart convert package so I if I go to quick fix I will have the option for importing the dart convert library and once that is done we should now have a map for response body which we can pass in which we can pass to our answer model and then get an answer model out of this response body map so what we are going to do is that we are going to import our answer model call it answer and then what we can do is we write answer dot from map also since I have generated the data class using the generator so it already has the UH from JSON a named constructor as well so what I could have done this without decoding it manually over here or do without decoding it myself over here I could have directly passed this responsible body string inside am i from JSON constructor and it would have done the same thing but I wanted to show you this so let's just do it this way and in here I will pass my response body map so once I part pass my response body map then now i should have a answer instance that i can show to my user so in in my state i will create another variable which will store the current answer object so to store the current answer object and it will be of type answer and it will be a private variable of type current answer so initially it will be null yes but as soon as we have the answer over here what we'll do is we'll performs a set state operation and we'll get the current answer so once we have the current answer we can just assign it like that alright so now that we have the current answer we can the next step is to actually go ahead and show it so we can then create the UI for showing this I think that it should be somewhere in between ask a question and these get answer and reset button row so over here I just copy/paste this sized box and in between this I will have a container of maybe hi 250 it's 250 I am hard coding it right now but you can definitely go ahead and no I mean the gif that is go that are going to be returned are actually going to be rectangular in shape mostly so I think we should have the width as you know somewhere around 400 and then we can have the height as 250 let's just see how it looks and we can change it accordingly so yeah in the child I don't want to give it a child I want this entire thing to be an image so I will get I'll give it a box declaration property and inside this box declaration property I will give it a border radius because I want rounded corners and I can give it border radius not circular and 5 as the radius because I do not want a lot you know I don't I want less rounded corners it's just that and it also takes in an image property which takes an end deck which takes in a declaration image and inside the declaration image I can give it image provider so since we are choosing an image URL over here we are give it a network image property and inside over here I can give it the property of current answer dot image right but then again as I told you if the user has not pressed the button the current answer value will always be null right so in that case this should not even be displayed so we will use something called an if statement and it is very impactful it is very powerful it is very helpful sorry and then inside the if statement will give it a property of if current answer is not equal to null so if current answer is not equal to null then I want to display this part of the UI also there is another space that I also want to display only if current answer is not equal to another right so these two parts will be displayed only if the current answer is not equal to null and as you can see right now the current answer is null so we can't display that right but if you press the get answer button now as soon as the current answer becomes not null you will get this and also right now I can show it to you that inside this declaration image I mean if we assign if we quickly assign a color property to this container let's play with colors not red you can see that the container is this much but the gif is not taking the entire space available so we do not want that we wanted to cover the entire container what we will do is we will provide a fit prop effect property to the decoration image and that will be said to box fit dot cover so as you as soon as we do that now whenever we have an answer on the screen then we also will have the gif covering the entire width and height available to it right that's pretty cool and I mean the gif will be self explanatory mostly people just by looking at it people will come to know that yes it is either a yes or a No so I mean I don't see the point of actually going ahead and creating a text field also but because we have it in the model and because we are fetching it so why not so let let's do something interesting let's give let's display the text but not somewhere else on the screen let's display it on the gif itself so what I can do for that is I can wrap this container inside a column and then I can make that column a stack as soon as we do that right now there won't be any change right now there won't be any change as soon as I hit get answer it will still only be the gif but now what I can do is above the container I can specify something called position dot fill it will it is actually a special type of position widget that I usually use and inside that I can have an align widget and give it an alignment of alignment dot Center oh sorry PL should be small alignment dot Center and oh inside over here I can have a child text widget that says yes or no so current answer dot answer dot to uppercase I wanted to be an uppercase to be very very prominent and also I want this to have a color of white and since it is has to be prominent I also want to give it a size of say twenty four I think that should be enough so now once everything reloads and once we have the answer you will see that we also will have a yes or a no property but I mean it is in the center and it is open overlapping with the visual which is not cool so what we can do is just we can push it to be in the bottom right corner over here but then again it is sticking to the borders which is not correct so inside our position widget we can actually go ahead and give it some space from the borders so I can write 20 and from the right also I can give it 20 and now it will so it is clear of the borders and now that position I think is okay and now we have our thing working but you might have noticed that we are getting an answer without even asking a question so that should not be the case people should have to ask a question and then and only then can they can they actually go ahead and get an answer so let's do that now in over here what we want to do is before when Handel gate answer is called what we want to do is we first want to check if the person is actually asked a question but before that we must first assign this text editing controller to the text field otherwise and we if we do not attach it over there then it will not have the values that we wanted to have so inside the text field I can have a controller property and then assign that actually attach the controller so you know over here I can check if question field controller dot text is not equal to null and question field controller dot text dot length is greater than zero and one additional check that I want to add is see it should always be a question and that is something that I want to make it very clear to the user that you cannot write just anything and get away with it I want it to be a question and although I cannot process the language of the question and then determine if it is actually a yes-or-no question or not what I can do is check for if they have added a question mark at the end or not so what we will do right now is I mean this is getting repetitive so why not just store it so I can create a string question text variable and it is a good idea to actually trim the text first so question also just because just in order to avoid the chance that it is actually null I'm going to have this question operator over here and so now I can replace this with question text and the third check that that we'll have is that if question text and question text dot night- one that is basically we are going to extract the last character of question text if it is equal to question mark or not okay so first we are going to check if the question text is not null that is its length is greater than zero also it should I mean it should actually be greater than one because if someone just gives in let's keep it zero just if someone just puts in the question mark also then it is also a valid question because maybe they're just questioning the void so yeah a small bit of philosophy there but yeah if basically these three conditions for us constitute a valid question and if these are done then we should be able to do this but what we can do is we can convert this to a counter condition so I can put in equal to null or our length is equal to zero or it is the last character is not equal to question mark so all these three conditions will now result in this if these if conditions passing and that means the validity check for the condition and the question failing and in that case what I want to do is I don't want to do anything I want to return the function from over here so that the API call never happens and we do not get an answer I mean it is possible to get an answer but we don't want to do it unless and until someone has actually asked a question but shouldn't we notify the user also so in for that what we'll do is we'll create another variable over here and that will be a scaffold key so it will basically be a global key of type scaffold state and then it I can call it scaffold key and I can initialize it so once I have initialized it now I can assign this key to the scaffold and now what we can do is using this key we can show the user a snack bar so if I go to underscore staffer key dot current state dot I will have a show snack bar method over here which will take in a snack bar instance and now I can go ahead and show it a snack bar it should have a what does it have it has a content property which will be a text widget and we can provide a message as please from a please ask a valid question please ask a valid question we can also modify the background color or let's just stick with the default colors because that is appropriate and we can give it a duration property so that this snack bar will auto dismiss after say two seconds so now that we have done all of this we can go back to our I know everything app let's just restart it to be sure so that all the changes have reflected as we want them to and I think they have so now if I click on get answer I should get this nag path that says please ask a valid question and if I ask a valid question I going to be successful in life then also I will get this error that says please ask a valid question because I have not put in the question mark so now if I do this then I will get a response and oh so my app is that I'm not going to be successful in life and the gif is also quite appropriate of my reaction sad life anyways so the only thing that is left for us right now is to implement the reset button which is going to be super simple what we will do is we will just create a new function called handle reset operation I'm still laughing why does my app that I created think that I'm not going to be successful in life too bad so I'll create a handle reset operation it won't be an async function and all we want to do over here is we want to clear whatever we have inside our question for your controller whatever value we have so we will set this to a blank string and we want to do set States to make the current answer null again so because in order to prepare our app or we are in order to prepare the state of our app for another question and we just plug in in over here and reset operation and it should work now so if I ask it a question are you sure about your answer if I click get answer okay my app is also not sure about it answers that's considerable and now if I click on reset then this should go away and the text field should also be automatically cleared so if I click on reset then it is cleared and we are now ready to have a different question answered now let me just show you that this is also responsive so I can do something like this and go ahead and ask a question and I can ask a question like are you respond web app and if I click on get answer then okay it does not it doesn't even think that it is a responsive web app too bad it is so yeah that's there I mean it's working and as expected so no problems there also yeah I think we are done over here so we are done with our application and it seems to be working just fine so we are we have our application done so the next part is to deploy it on the web so that anyone can go ahead and access the application that we created and people can see our wonderful work there are indeed multiple ways of deploying of web application but the first thing that we would want to do is actually build our application so that we have the static files that we need in order to deploy it right so we open up our terminal and then write flutter build web you can also write - - 3ds I think and this will build your flutter application for the web it will generate the entire folder that people need for hosting a web application there are multiple ways yes definitely so let me show you the way I mean through which we can quickly deploy our application we'll be using something called I mean if you already have node.js installed you can also deploy it using search almost instantly but we can also create a file based application we can deploy it on github pages we can do a lot of different things but the easiest way I think would be to deploy it on a cliff I right now I mean that's the simplest way anyways so what we can do is if you had a if you had created a git repository at the beginning and if you have a git repository for this project or any project then a lot of these services that allow you to deploy our web applications can directly fetch the assets of your deployment from your git repository so as soon as you do git push they will deploy our application but since we didn't do that in this tutorial what we do is now that we have built our project we can go to the build folder and inside that there is the web folder this has all the files that we need for deploying our web application and these are the files that we'll be deploying so I can open up a new Google Chrome window then I can go to nitrified or comp now I already have an account of magnify calm but you can simply sign up over here it is really simple and I am going to show what I am going to show you right now is a manual deployment so I can log into my net if I account hopefully it will remember me and I already have a ton of sites and what we want to do right now is we want to do a manual deployment so as soon as you reach your notify dashboard you will have an option over here in the bottom right what you can do is you can just go to your projects folder find the project that you created let me find my project so I know everything is the project that I created now inside my build folder there is this Web folder and I want to deploy this entire web folder okay what we can do for that is we can simply drag and drop our web folder over here inside nitrified and it will automatically start the deployment process so as you can see that currently the process is uploading so the deploy is in progress right now and it has already given us a domain also it is already assigned as a domain we can change that we can also you know go ahead and create a custom domain I can edit the site name from over here I can name the site - I know everything I hope that's available I know everything dot nitrified dot app so because I am going to take this I don't think it will be available for you so you will have to choose a different name so is the site deployed I don't know let's see so the deployment is still in progress but as soon as this is complete as soon as the uploading is complete and as soon as the deployment is complete you will be able to access the website directly from I know everything dot magnify dot app right now if you go to this I think it will give you a page not found because the site deploy is still in progress it is still uploading so let's wait for it and once that is done you will get to visit the website and interact with the web application another quick way to deploy it is using search so if you have node.js already installed on your machine then you can go ahead and install search it is a quick deployment command-line interface so you can just do npm install - g for global install of surge and if you have that then you can just go to your build folder and then you can go to your web folder and events inside your web folder where in your index dot HTML file is there what you can just do is click on is hit search and as soon as you type service and click enter and hit enter then it will automatically give you a domain and it will automatically deploy your website so as you can see it is uploading the website and it will deploy the website in no time and you will the your web app will now be accessible through for you know the entire world on this domain that it has automatically assigned to you so it has already published my website and now if I go to this domain I can see that my website will load so as you can see I know everything is loading now and as soon as soon as the initial load time is complete we will be able to interact with our application so for the first time it may take some time because you know it has just deployed and the CDN is being set up and everything so it is loading right now so now when you visit the domain that Sarge assigned to us you should be able to get this website that we created using flutter how exciting is that and if I ask if I don't ask the question I still get this fact bar and if I ask a question are you deployed then I should get an answer so as soon as I hit get answer I should get an answer and yes so the web app knows that we are deployed and it has told us so and if we if I click on reset then it is reset and now we also have we have a completely working deployed web application that is not just a piece of UI but but an interactive web application that we created from scratch using theater for web and we also have it deployed on a global domain we can which we can share with our friends family and every and potential employers to show them that yes we can create projects like these I know it was a very simple project but I hope that it would have given you an insight into how you can develop complete a web applications using flutter and I can't wait to see what you create you create with flutter web it is so exciting and all the best so that's it for this video thank you so much

Channel: Flutter Create

Views: 39,085

Keywords: flutter web, crash course, full website, flutter, flutter 2020, beginnner tutorial, coding, development, web development, cross-platform, flutter crash course, flutter web crash course, flutter course, flutter web full tutorial, flutter web full course

Id: OYk5Ud7wFGY

Length: 70min 34sec (4234 seconds)

Published: Tue Jul 21 2020