 Hey everybody this is Brian and welcome to the what are we on 20 what the heck we're on the 20th tutorial but um I literally just published 18 19 not too long ago and there's already like 50 views on each I have a feeling there's a small group of you out there like watching these as soon as they come out anyways um so what we're gonna do today is we're going to do the obligatory hello world application um if you don't know what I mean by obligatory every time you start a new language or framework it's kind of like the traditional thing to do to make a hello world application literally just displays hello world on the screen we're going to take it a step further because I think those are pretty elementary and we're going to see what it takes to build a basic application I mean we're talking real bare bones here uh if in case you're wondering where we're at we've installed Flutter we've created our first app we set up an IDE and we've learned Dart so we're in the tour of the framework and we're actually on this second bullet point hello world so we've taken this code hello world right here and we put this into a new Flutter application and we've got our emulator up and we're just going to run this thing now I have kind of a bone to pick with the Flutter developers because this is a little misleading and I'm going to explain in depth in this detail in this tutorial why it's misleading you can see how it's hello world so it literally just displays something bang our job is done not quite let's say we wanted to put a button here well you can see let's just pick this apart the import package flutter material dot dart we're going to talk about material a lot main we have our run app which is kind of the starting point of any Flutter application and in there we're going to say it's going to return a new center which is going to center everything the child of that is a new text in that text is hello world with a text direction of left to right now for that to work uses material design true must be in the flutter section of the pubspect yaml remember burn it into your mind we are going to talk about material a lot so looking at this I thought well it'd be cool if we could just see what's out there so I clicked on widget catalog went to the basics and said oh well these are kind of neat hey they have a button buttons are always fun so let's just view the documentation on this and say yeah let's just throw a button out here and see what it takes to get a button on here so it seems like it's pretty simple we could just take this new raise button notice how it's nice enough to put the on-pressed equal null for us so we can actually link that to a method and initializing hot reload and notice how nothing happened hmm so we're going to kill this typically when hot reload doesn't work it means there was a problem and it says some elements were changed during reload but did not run when viewed as assembled you may need to restart the app for the changes to take effect so let's run this let it rebuild and I have to apologize if my voice cracks a little bit I feel like I'm coming down with a cold or something it's like first snow of the year it's pouring snow outside I live in Michigan so I'm sure I'm coming down with something so as you can see mistakes were made all right so this is the same error message over and over again separated by this line so we're just going to start reading here so you can actually see it it says no material widget found material button widgets require a material widget ancestor in material design most widgets are conceptually quote unquote printed on a sheet of material in Flutter's material library that material is represented by the material widget it is a material widget that renders ink splashes for instance because of this many material library widgets require there be a material blah blah blah blah blah blah really what's that saying is your root widget here needs to be a material widget it needs to inherit material design now what do I mean by material design this is where you kind of have to take a little bit of a leap of faith because it doesn't really transition smoothly into this you can see how there's basic widgets and then using material design so they I kind of think material design should be up above but there is a whole material design guideline here and you can see how there's a material app really what it means is conceptually think of your application as a desk and on that desk you're going to put a piece of paper and on that piece of paper you'll start drawing your widgets and scaffolds and app bars and all those neat little things so click on material app and you can see how overall satisfied with Flutter well hmm I'm going to put somewhat because we've had a boo boo nope sorry Google I'm not going to fill that out all right so maybe if I wasn't doing a tutorial when you popped up I'd fill that out but you can see material app is an application that uses material design all right so we're headed in the right direction here and it's a convenience widget that wraps a number of the widgets that are commonly required for material design applications it builds upon a widget app as adding material dash design specific functionality such as animated theme and grid paper all right and you can see it's also a scaffold navigator and things like that so it sounds like a lot of what we need so what we're going to do here is we're going to get rid of this and we're going to say new material actually let's not do that let's break this out we're going to extend the stateless widget we're not going to worry about state in this application and what we're doing here is kind of just the bread and butter of almost all Flutter applications here I'm going to say new my app and of course hot reload won't work because we have a boo boo here because we're not returning something so in here what we're going to do is we're going to return a new material app all right so notice how the little red squiggles went away so the code thinks it's correct we still got that error message up so we're going to kill the app and we're going to rebuild it and send it out to the device and see what happens here all right so pushed it out uh oh we have a boo boo it says and remember the same error message over and over again it's just in these lines package blah blah blah Flutter source material app dart failed assertion line the home equal no home equal no or home not equal no basically it's saying the home is no so we need to give some sort of home we need to figure out what's going on here right it's part of material design here and it's not really well spelled out at least I didn't find it right away following the Flutter docs so there's home it's actually part of the material app and basically it was an assert call that said hey this is null so we need to figure out what to put here hmm so let's make a new scaffold and let's just save this notice how it says initializing hot reload and then reloaded meaning we go back here and tada it suddenly put something out on the screen we have a big white box so what is this thing and notice how it says slow mode you may not be able to see it over that clock but it says slow mode okay so my app is a stateless widget which is just you know a widget and then the build is going to return or render whenever you see return and build basically we're rendering a material app so this giant white box is the material app the slow mode basically means that we have not compiled this for production yet this is like a debug version if you will so it's not really meant for the real world we're just doing this because we're goofing around on our computer if we were to send this to like the apple store the google play store we would want to compile this for production and actually make it so that it's not in slow mode which we may cover in future tutorial actually we'll probably cover in future tutorials so you will see slow mode a lot don't be alarmed so this is a pretty plain application what does the scaffold really do for us why are we messing with that think of a scaffold well like a scaffold you see these around buildings when people are washing windows or painting they're just you know structures that you put up so that you can get to different parts of the application or different parts of the building in that analogy so what we're going to do here is at bar equal new at bar let's actually say flutter hello flutter and you can see hot reload so suddenly we have a app bar so the app bar is this top blue section and really all this does is it lets the user know what you're working with the name of the application or what page in the application and you can put buttons and things of that nature up here think of it like a giant toolbar now this extra white area down here is called the body and that's what we're going to work with next body would be the body or the working area that the end user would actually work with here so I'm going to say new center and then in center we're going to say child new text save that hot reload will pick it up and then bang centered is our hello world so remember the whole goal of this is we just wanted to put a button on the screen so let's figure that out let's get rid of this so we're going to put our new raise button and save this and notice how hot reloaded that time so this little gray thing is actually our button we want to put some text in there so we can kind of see what's going on here once I actually buy button and we'll break this out into a new line so it's easier to read what's going on here whoops there we go so very faintly it grayed out it says my button it's grayed out because we don't have an on press in here so we have our app bar we have our body and in our body is centered we have our button so why didn't this work before and why is it working now that's the million dollar question remember at the very beginning of this when we tried adding the button it said it needed an ancestor of material widget it needed material design you're going to hear material over and over and over again while you don't have to use material widgets and material design you would be fighting a massive uphill battle kind of the de facto way of doing things in flutter is to use material design that's why I wanted to start this with the material app because it's the bread and butter of what you're going to be working with in the future so that's why it's working now because as you can see the button is actually part of this widget tree and the root of that tree is a material app that has all the material goodness that we need so that is a lot of talking I hope you found this educational entertaining and we're going to work with this a bit more I think the next video we're going to actually do some basic layouts and just kind of figure out how things are laid out but I wanted to show you just the bare bones flutter application like a real quote-unquote application not the little hello world they had on their website if you found this educational entertaining be sure to visit my website void realms.com we have the source code for this and all other tutorials out in github and if you go to contact there is a void realms facebook group completely open anybody can join we have like 1700 programmers all walks of life all languages out there that can help you with any questions you have