Building a Website In Flutter - Flutter Web Beginners Tutorial

today we'll build and deploy our first flutter web application hi guys my name is Dan McKee from false tax and today we'll be building a flutter web application you can head over to false tax calm for the full written tutorial we'll start off by setting up your flutter environment so that you can create and run a flutter web application the first thing you want to do is change your channel to the master Channel once that's done you wanna run the flutter upgrade come on to make sure that you have the latest changes when that is complete we want to enable the flutter web in the config by running flutter config enable web that's all you need to do to enable the web to check if everything's working you can run flutter devices and you should see the Google Chrome as one of the devices now we can go ahead and create a normal flutter project by using the create command i'll call this project the basics and you should see the lost file created is an index.html file which also indicates that your environment is set up properly then we can open up the basics project in Visual Studio code the UI that we're building takes the form of a very basic landing page which would be something that you'd use to set up a course you'd have your navigation bar at the top some text on the left side and a call to action button then we'll just clean up the main file and remove all the comments and the home page widgets and we'll set the home for the material app as a new widget called home view then we can create a new folder called views and inside that folder create a new folder called home and inside of that folder create a new file called home with you it will import the material package and create a stateless widget called home view the uija peopling can be split up into three sections the first one at the top is the navigation bar and then on the left side we have our course details which will be a column with text and on the right side we have a to action it'll actually only be the button that is the call to action but will place it in a scented expanded widget we'll start off by creating the navigation bar so under the lib folder create a new folder called widgets and inside that folder create a new folder called navigation bar and inside that folder create a new file called navigation bar will import the material package and then create a new stateless widget called navigation bar we'll use a container as the root and we'll set the height of this container to 100 the child of this container will be a row and for the first child of the row we will set a sized box with a height of 80 and a width of 150 the child of this size box will be an image that we'll get from the assets and the name of that file will be assets / logo dot PNG the second child in this navigation bar will be another row this will contain our navigation links we'll set the main access size to minimum and then to keep the styling consistent for the navigation items we'll create a private widget called navbar item it will take in a string title the root of the navbar item will be a text widget and for the text style all we'll do is set font size to 18 then in the row of the navigation bar we can add the first navbar item and give it a title of episodes then to create the spacing between this item and the next we'll add a sized box with a width of 60 then we'll add another navbar item with a title about then as you can see here with the image we have a asset that hasn't been added to the project yet so in the written tutorial there is a link to the resources that I've compiled it contains the logo as well as the font assets once you unzip the resources folder you can create a new folder called assets in the root of the project and drag the logo dot PNG file in there then head over to the pub spec llamó and uncommon the assets as well as the first image underneath replaced that with a path to the logo dot PNG file then you can head over to the home view and we'll add the navigation bar to the scaffold we'll set the background color of the scaffold to white and for the body of the scaffold we'll use a column and the first child will be our navigation bar if you run the code now and open your browser you should see everything piled up on the left side of the screen to add some space between those two row items we are gonna set the main axis alignment of the navigation bar to space between that will add space between those two items pushing both of them to the far left and right side the other thing that still off with the navigation bar is the font that's being used so in the assets folder you can create a new folder called fonts and then open up the folder where you extracted the resources and drag the open sans fonts into that folder then in the pub speak llamo you can go ahead and uncomment the fonts as well as the family and replace the family with open sans then you can uncomment the fonts and for the asset we'll replace it with assets /font /o sans Extra Bold will also define the weight for this font so we can reference it directly we'll use the weight 800 then we can duplicate that font and we can replace the extra bold with regular and for the weight we'll set it at 400 and to apply this font to the entire application we'll go to the main file and we will set our text theme we'll use the text theme from the current theme of call and we'll apply the new font family and give it the open sans identifier if you run the code now and it shows up you will see that the text for the navigation bar items now looks like the text in the logo on the left the next thing we'll do is add something that I usually like in a website which is when the of the content itself is limited to a maximum size this keeps the content in the center and doesn't spread our too far part if you have a larger widescreen monitor so under the widgets folder create a new folder called scented view and inside that folder create a new file called scented view we'll import a material package and then create a stateless widget called centered view this widget will take in a widget name child will keep the root of the bold function a container we will add some padding and we'll use the symmetric constructor we'll set our is on till padding to 70 and the vertical padding to 60 we'll also set the alignment so that the child of the container can be in the top center of the view for the child of the container will use a constrained box we will set the constraints using box constraints and we'll only set the max width to 1280 X constraints widget will be the child that we passed in now if we go over to the home view we can wrap the column in a scented view if you run this code now you should see the seventy padding at the top and the 60 on the sides as well as the view not scaling past the width of 1200 and you can see this by dragging it out and then seeing that the content stays in the center of the screen the next widget we'll build is the course details widget so create a new folder under the widgets folder and in that folder create a new file called course details you'll import the material package and then create a stateless widget called course details this will be a container with a fixed width of 600 the child of this container will be a column we'll say the cross access alignment to start so that all the text appears at the left side of the column we'll set the main axis alignment to Center so that it appears in the center vertically for the title of this widget we'll set text widget and okay the texts flood the web the basics or the style of this widget we will set the font weight to W 800 and will give it a height of 0.9 so that the lines are closer to each other in terms of the height and then to add some vertical spacing will sit sized box and we'll give it a height of 30 for the description text I will copy that takes from the written tutorial and for the style of this text we will set the font size to 21 and we'll add some line height spacing by setting the height to 1.7 we can go to the home view and add an expanded area under the navigation bar the child of that expanded area will be a row and the first child of that row which on the left side will be the course details widget if you run the code now you'll see the course details widget appear on the left side and obviously we forgot to add font size so head back to the course details view and set the font size to 80 and if you open up the web view now when you look at the course detail section it should look exactly the same as our design the last widget we have to create is the call to action widget so under the widgets folder create a new folder called call to action and inside create a file with the same name we will import the material package and then create a new stateless widget called call to action this widget will take in a string title and will pass this title in through the constructor for the container will use padding to Center our child so we'll set a padding using the symmetric constructor we'll set our is on top padding of 60 and a vertical padding of 15 the child of this container will be text it will take in the title and for the style of this text we will set the font size to 18 the font weight to a font weight of 800 and the color of the text will be set to white the last thing we want to do is add the styling to the container itself so we'll set the decoration to a box decoration for the color will use the from a RGB constructor the first value will be 255 for the red will pass 31 for the green will pass 2 to 9 and for the blue will pause 1 for 6 and then we'll set a border ideas using the circular constructor for the border radius and pass in a value of 5 then we can go to the home view and next to the course details in the row will add a new expanded with a child the child of that widget will be a center and the center widget will have a child of call to action will pause in the text join course if you run your code now you should see a website matching the design that I showed in the beginning and that is our first flutter website it's not responsive at the moment but we'll add that in the upcoming episodes oh yes and I didn't mention this at the beginning but this will be a series that covers all the basics of building a website using flutter the next thing is to deploy the website into production we'll use firebase so head over to the console and create a new project called the basics we will disable the analytics for now and just create a project once that is complete you can go to the terminal and type firebase in it hosting it'll ask you if you want to proceed and we'll say yes then choose that you want to use an existing product and choose the basics project for the public directory will set it to bold slash web and if we want to use a single page app we'll say yes and that's all the setup done now to build your website type the commands flutter balled whip and execute and when that is complete we will use firebase deploy double dash only and then hosting so while the website is being uploaded we can go over to the bold folder and you can see the files that we uploading if you go into the web folder you'll see that is the index.html which includes your mind dot you have all of your dot J's files as well the mapping and the dependencies files he also have your assets and the fonts and everything else required to run the website when the deploying is complete you can click on the hosting URL and open the link and this is where you'll see the first problem that I have with flutter for web and it takes extremely long to load up your web view on the first run but that's something that the flood team will sort out for us for now we'll just figure out how to build the website and the best website that we can and then hopefully in the future all the production issues go away and we have a high performance very good website thank you for watching this tutorial next week we'll cover responsive UI the hover effects and if we have time we'll cover the routing as well bye bye

Channel: FilledStacks

Views: 380,925

Keywords: Flutter, Flutter Web, Flutter Web Beginners, Beginner, Flutter Beginner, Flutter Tutorial, Web Development, Dart, Dart Web Development, Beginner Web Development

Id: 33kyEzDMTZU

Length: 14min 7sec (847 seconds)

Published: Thu Oct 31 2019