How To Build Website Using Flutter And Host For Free Into Firebase - Free Web Hosting

hey everyone welcome back to another flatter video in this video i will show you how to build a flutter web application and all state into firebase completely for free and i will show you everything from scratch by creating a new project and connecting that to firebase and also the whole process to us your website into firebase now let's see the demo how it works and then i will show you how to implement that so this is the website that we are going to build in the flutter everything is completely responsive and very nice looking you can see here if we resize the screen it gets the menu smaller and bigger according to the screen size this is the local website and this is how our final austin website will look we can access our website using this link in any device and it will load very quick very nice very responsive with all the assets and it is also the same way that we have seen into our local machine so i will show you in this video how to implement this one it is completely free you don't have to worry about anything before we start don't forget to like the video and subscribe to the channel so you won't miss such amazing videos in the future and also comment down if you have any problem and without talking too much let's get start right now all right to get started first you have to create a flatter project and before that you have to activate flutter for whip if you don't know the command it is flatter config dash dash enable dash whip it will enable the whip for your flatter and then you can simply create flatter create a name of your project which is in this case i will say my underscore designer underscore website so once the project is created i can go to my designer all right after opening the code into your code editor first thing you have to do is search for firebase core open up this first link and copy this firebase core and paste it into your pub spec yaml save it and now before starting with our ui part i want to configure firebase with our project which is for web so i will go to console in here i will create a new project and name it my designer website so i will have this name and click continue down here click continue select your default account continue you can simply come to here click on web and then give your app name in this case i have my designer website you also want to use the firebase hosting click register and then for firebase sdk we have two options we can do it using npm and also using the javascript tag which in this case i will use the javascript tag which is easier i just copy go to our code and here we find the web index.html and at the end of index.html inside the body we paste this tag save this close it and come back here click next now we have to install the firebase tools for your project inside your project but for this you need npm which is node if you don't have nodejs you have to go to node js download and from this website you have to download the node.js after downloading that you should be able to run this command i'll simply come here open the terminal be sure to be inside your project and then you can paste the command and press enter all right once it's done then come back to your main and then press next here and then you have to log into your firebase account you just simply press firebase login this thing usually happens if you're in powershell then be sure to be in the command prompt open the command prompt and press firebase login and then you will be logged in with your email it will be pop-up into the browser maybe right now i'm already logged in so i don't worry after that you copy the firebase init to initialize your firebase okay it will ask you are you sure you want to proceed of course yes and down here you have to choose austin which is configure files for firebase austin and optionally setup github press space there and press enter to proceed and here of course you would want to use an existing project because we have already created the project just press enter and down here find your firebase project that you have just created in this case ours is my designer website press enter this is the important part you don't have to press enter because it will choose by default the public which is not available here you have to manually type build slash whip in our case whenever we build our web project it will create a directory called build and inside that we will have a whip where all our code for the release build will be available so you have to type bill slash whip which will be used for austin then you can say no if you want to configure your project with github and do automatic builds from github you can press yes otherwise no so in this case we don't have our code in the github i will simply say no and it will say there is a build slash web slash 404 html do you want to rewrite it i will say yes and file this is already existed if it is existed you can rewrite simply if you don't have any changes so in this case i want to rewrite because this is an updated version so we are done we are basically done you can see here we have our build and inside the build slash whip we have got our index.html404 which are the important files whenever we asked our website these are the files which will be used so now in order to host our website we have to run this command flatter build width okay we are done this command will take all your flutter code and convert it into the html javascript css and all assets which is included into your project it will take it into the build slash web where this directory will be used to host your website and now to deploy it into the firebase we have to run this command firebase deploy it will take some time according to your files and the how big your project is and once it's done we can see that our project console is this one and our austin url which our website is right now live in this url we can click this url and you can see our basic demo flutter application which is in website it is live in this url and it is completely free we have hosted it using the firebase so now we have configured our flutter project with whip and we also have successfully hosted our website now let's write something that makes sense and let's actually build a website ui and hosted so to do that we start with our main because we don't do any html or css we just do flutter and then it will be converted into the html css javascript and everything will be taken care by flutter so let's get start with our website ui and see how we can do that so inside our scaffold as you have seen the demo we don't have an app bar we will create our own custom app bar so we will directly start with the body and inside here let me write the code for the app bar and then i will explain you what i did so as you can see here i've created a container with this padding and margin from vertical and horizontal i've given it a specific height and width will be infinity which means unlimited but i have given the margin which controls our width and then this decoration giving it some border and then color of it will be white of course we will change our scaffold color to the pink so i will write this pink with shade 50 which is the light pink in this case i will change the background color for our app bar into white and then i have created a row which inside the row first i have the text which is the title of our website then created another row to separate our title and menu bar here i have created some simple menus which are all text buttons which are clickable then we've named them price work about me faq and then after that at the end we have a button for login with some specific button style overlay color is this one background color padding you can of course play your own colors and styles but this is what i have just designed it a simple login button now if i run this to see how it looks we have already our chrome i will run it in the debugging mode and see how it looks alright we have got our lovely website with a nice background color and everything is aligned perfectly so now i'm planning to separate our app bar from here because down here in the body i will have some more items and texts and all those stuff since our app bar is a complete pack i can just cut the whole container and create a new file here into our lib i will say my custom so we are good i can simply call this my custom app bar and we are just simply good now in this case everything looks good but if we resize our website as you can see we are getting errors because it's a clear thing it cannot handle those rows which we have given a specific width for that and in this case i just want to make if it is smaller than a specific size i want it to appear inside a menu bar instead of this it should there should be a menu icon where we click and we can see all of our menus so let's do that all right here i will check a condition if the media query of screen size dot weight is greater than 700 then we will show this app bar which is all the menus are aligned otherwise we will show this custom app bar which is having our title and this at the end this icon which is a mini icon so now let's run and see how it looks and then you will get the whole id and concept as you can see right now if our screen is bigger it will show all the menus like this and if it is smaller than 750 which in this case it is this much it will change and make it a menial right now it's not functional and we're not planning to make it functional you can do that later on according to your design this is a simple responsive website that we are working on so this is all about our custom app bar and after our app bar as you have seen our design i will give some big catchy title and also a subtitle all right so i have created size box with height of 40 and then given this title which is the big title and after that we have got this subtitle now if i save this and open our browser you can see they are appearing but they are in very bad design let's give them some style i will create a separate style here and copy it and then paste it for both of them style equals to this one and style equals to this one save it and check okay this looks cool but we have to make it center so it's better to make everything all together as center instead of making them individually in that case i will cut everything and create a column inside our list view in which in this case i can simply say main axis alignment into center but let me save it i guess by default at the center the column as you can see it is centered and next we have got that another text under this big title let's add that very quick all right i've added this container which is having the specific width of our device weight multiplied by 0.5 which is half of the whole device weight and then after that i made this overflow to visible soft wrap to true which means whenever our taste is uh bigger than the width that it is given it will wrap it and make another line and then the alignment is centered the style is this style that i have created i think it is it looks better so to save this and see the result it looks like this and according to the screen size it will make itself flexible and it will take only this much space and inside this much space it will wrap itself automatically because we have turned on the soft wrap to true now after this let's create our view price button that big button inside which is eye-catching and we really want our user to click on that so let's create that button very quick okay so we have our button here with this text and basic design overlay color of this one background color shape and everything so let's see how it looks all right we have our button here but this there is a problem with its sizing we have to give some padding to make it look nice and at the top i have declared a separate variable for button padding because i have some plans for it and down here i can simply say padding to this one and if i save this and see now the button looks fine but and on hover of this i want the button to pop a little bit to show that i'm here and if we move the cursor out of the button it should get the actual size let's implement that all right so on hover gives us a value which is either true or false i check if it is true then i will change this button padding which i have declared top there i will increase the horizontal and vertical size a little bit by 60 and 30 otherwise default is 50 and 25 now let's save this and see the result now if i hover this button it just pops like this and if i move the mouse outside it just gets the normal shape so one last thing is the list of services that we provide i have an image for that i will drag that image right here all right i have this png image which i will use as list of our services of course i have to go to the pub speak yaml and give this pad for our image i will say simply take all the images and down here i have to provide that image all right so after the button i have provided a size box with a specific height then a container the background of this container is white and some border just to give that decoration around the image then the actual image we have our column where i have a text of our services with the same text style that we have created up here and also the image asset which we are getting this one image now let's run the application and see how it looks alright so we have got our image which is also responsive if we make it small or big it will take the exact same amount of size and if we make it bigger for the desktop view we can see here we have got our nice image the button is also popping and this button is also changing the color and if we make it smaller it will also change according to our design so we have our nice design so now let's go ahead and host our website in firebase for free and access it everywhere that we want for austin we have done the command before as you can see even if right now i visit my website like we have our old website which we have hosted at the beginning now i have to rerun these two commands whenever i do changes just remember the commands i have to write flatter build whip alright so this command just takes all your flutter code and makes a build into this folder build slash whip it simply compiles your flutter code into the html css javascript and takes all your assets and put them together and make it ready for the firebase to be hosted and after running this command you have to run the firebase deploy command to actually push the new code which is available here into the firebase hosting service and yes it has copied everything to your firebase it will take according to how big your project is and it will simply be live in few seconds so now we can visit our url which is very nice url my dash designer dash website dot web dot app so you can see here we still are getting our old website which is this floating action button it takes a few seconds or at most it will take one minute to update your website as you can see just by a refresh we have got our website so till now everything is free you can see here we have hosted our website into firebase with our this domain right now this domain is nice we got lucky that we have got this name which was not taken before but if you want your own custom domain you can come to your project and down here if you click the build and hosting so right now we are using the default domain name which is the actual project name and we have given this while creating this project and still if you want to use your custom domain you can do that by coming to build austin and add your custom domain give your domain name find it and pay the price accordingly and your website will go live to your custom domain the same website but still if you want a free web hosting and it will be available until a period of time you can check the pricing here and here is the cost and pricing of firebase for free account and paid accounts if you're in free account you have 10 gb per month of download data whenever your website loads it all counts as download because it loads all the assets and phones and everything from firebase it is counted as download and storage you have an overall of 10 gb and if you're exceeding these amounts you have to pay accordingly the their price is i think it is mentioned but you pay as you use and it's not too much so this is how we can build a flutter web application and austrate into the firebase for free if you enjoyed the video don't forget to like and subscribe to the channel so you won't miss such amazing videos in the future and i will see you in the next video

Channel: Lazy TechNo

Views: 19,384

Keywords: flutter web, flutter web app, flutter web development, flutter web tutorial, flutter web firebase, flutter web development tutorial, flutter web and mobile app example, flutter web responsive, flutter web application, flutter web app firebase hosting, flutter web app firebase, how to deploy flutter web app on server, web app using flutter, flutter web hosting, flutter web hosting firebase, host flutter web app on server, host flutter web app on firebase

Id: h6TKgzW9KHY

Length: 19min 44sec (1184 seconds)

Published: Sun Jul 31 2022