 Hey everybody, this is Brian and welcome to the 19th Flutter Tutorial. Today we're going to actually start working with Flutter. I'm so excited. All right, so just for reference, you need to know Dart, which is a programming language. You can find that at dartlang.org in case you skipped the other tutorials. Flutter's main page is flutter.io. Now there is a lot of information here. I mean tons. This is very heavily documented, even for being an alpha. I was very surprised. We did actually already install Flutter, but if you haven't already, if you haven't been following along, go ahead and install it for your OS. It's just dead simple on how to do it. Really, you just go to your operating system, follow the directions and boom. Now, before we do any of that, what we should do is do what's called Flutter Update and Flutter Doctor. Maybe it's not update. Maybe it's upgrade. There we go. So do Flutter Upgrade, and then it will actually make sure that everything's up to date and everything's the way it should be. I think it actually runs Flutter Doctor for us, but we're going to run it separately just so I can show you what it does. We've been working with this for a while, and because it's in alpha, it's going to change very rapidly. So we want to make sure that we have everything update before we really start diving into this. All right, now some prerequisites here, and I'm going to actually run Flutter Doctor just so you can see the prerequisites. Wow, can't not spell a doctor. When you run Flutter Doctor, it will make this nice list for you showing you, hey, if you try to work with Flutter, this is where you are, and you see how mine is nice and beautiful. It's got little checkboxes next to everything. It's saying, we have Flutter on, and then I have it on my virtual machine, and we have the Android tool chain. What this means is I already have the Android SDK, I have Android Studio, I have the Android NDK, and all that stuff actually on there and configured. I know it says on my screen, I do not have an NDK, but I actually do. I just haven't pointed it anywhere. And then I have Android Studio installed. I have IntelliJ Community Edition. I have no connected devices, but that is easily solvable. Once you install the Android tool chain, especially Android Studio, you get what are called virtual phones or virtual devices. We will be working with virtual devices in this tutorial. So before you go ahead with any of this, whether you are on Mac, Linux, or Windows, I would highly recommend that you stop what you're doing, actually pause this video, and go out and download either Android Studio or iOS with Xcode. I'm going to be working with Android Studio. I may later work with iOS. Video recording works a lot better on my Linux virtual machine than it does on my Mac for some reason. Everything that you do in Flutter should work on both iOS and Android. So have no fear which one you're working on. They may look a little different, but under the hood they should work. Now once you have those installed and configured, come back to this point in the video. I'm not going to cover how to do that because it's going to vary drastically on your operating system and your configuration and there are literally thousands of videos out there. So go to Google, you know, go to YouTube, look on how to install Android Studio, actually go out and do it. All right, once you've got that, come back, run Flutter Doctor again. And once you have all these checkmarks saying, hey, you're good, you could probably go ahead and work with it. Now on my Mac, I can work with it, but it's saying that I'm missing some dependency on Xcode, which is just blasphemous because I work with Xcode almost every day on personal projects. So without further ado, let's actually create a new project. Now this time instead of Dart, we're going to click on Flutter. You know, so we have a lot less options. And if you don't have the SDK pointed, it's going to say install SDK makes it very nice and simple for you. Now this is where things get really super interesting with Flutter. Notice how we have this nice, beautiful list of options. And I was blown away when I first saw this. I'm going to say first Flutter, not fist Flutter. Geez. Fisting Flutter. Boy, I'm sure somebody out there is laughing pretty hard about that. One of the devs is like, hey, Brian's going to fist Flutter. Anyways, so we've got our name, we've got our location, we can give it a description. You can give it a type. We want to do an application. Organization, com, your company, this is pretty standard naming convention. It's backwards from your DNS name of whatever website you have. So in my case, it would be com void realms. Let's actually do that. I am not good on the typing today. Then notice how there's an Android and an iOS language. And that's because it builds an application for Android and iOS. And you can choose which language because you can do it in Java or Colton. You can do an Objective C or Swift. I'm just going to leave those as the defaults. And then I'm going to hit Finish. And this may take just a second as it builds our project in the background for us. All right. So first thing we get is this big, beautiful project, lot of code. And it's pretty well documented. You can see there's huge chunks of documentation in there. Whoops. And it's got all of the packages that we need already in there. It's got the Dart SDK. It's got Flutter for Android. And you notice how that says flutter.jar because we are working with Java for Android, even though we are actually working with Dart and Flutter. The project structure is a little bit different than what we're used to. You notice how we have an idea folder. We have an Android folder, which is actually our Android project. And we have all our Gradle settings and all that you would expect from an Android project. We also have an iOS folder. We have a test folder. And then we have all the things that you would expect, including rpupspec.yaml. Now, one thing to note is this has the user's material design. And we'll get into material design in future tutorials, but just understand that that is a necessity for this to work. And it should be under the Flutter section. Now, there is one folder called lib. And in there is main.dart, which is this beautiful file that we're looking at now. Let's actually minimize that so we can see this code. We're going to just go through this code. There's no sense in retyping all this. It did it for us. And you can see how we have our main. And that is just calling run app. And we're making a new my app. My app is a class that extends what's called a stateless widget. They're stateful and stateless widgets. Stateless widgets have no concept of what a state is. Stateful widgets hold a state. So what is a state? A state is, well, think of it as a variable. I don't know why they didn't call it like variable widget or something, but state is kind of like the de facto language in the mobile world. You have to have a certain state. So if you are, let's say on your phone and you type something, that is part of the state. Because if you minimize that application, some operating systems will actually either suspend it memory or add out, just flat out delete it in memory. And then when you bring it back up, you have to restore that state. You have to put it back the way it was. So think of a state kind of like if you're married and like your wife's attitude, you say, Hey, you want to go get tacos? And she's like, No, I hate tacos. Well, now she's mad at you because you want tacos. That's her state. But then you say, Hey, let's go get a pizza. And then suddenly she's happy. So that's what state is. So we have two different things. We have stateless and stateful. Whoops. Stateful. So we're running an instance of my app. This is where things get a little weird. We have a stateless widget. That is called our root widget, meaning everything else is a child of this of some type. You can see how in there it has a build method, which is returning a widget. Everything is a widget. Widget is just if you're not from the United States, which is just a generic term, meaning it's a thing. Every widget will return a build function or will have a build function which returns a widget. What the build function does is it marks things in memory based on their state, meaning what has changed. And you can see we've got some properties here. We're going to return a new material app. Now we mentioned material before in our PubSpec Yenil uses material design. Now we have a material app. We're going to get a little more in depth in this, but really just think of this as like a blank piece of paper in front of you. And on that piece of paper, you're going to draw out all your little widgets and everything that you need for this to function properly. And on that paper, the first thing we're doing is saying the primary color is blue. And you can see in the directions it says, you know, basically change it from like blue to green. We'll do that here in a minute. And then the home property is a new my home page with a title. My home page extends a stateful widget, meaning it knows there's a state it knows something's going to change. And then we have our little constructors here. And then there is our actual state right here, the string. Notice how it's saying create state underscore my home page state, which means it's a private class because that is how Dart denotes scope between public and private that little underscore. And it extends my home page. Well, my home page is here. So we have my home page creating underscore my home page state, my home page state is extending my home page. So you have a bit of a circular reference here. And this gets very, very confusing very early on because you're like, I don't understand why my home page just can't have everything that I need. Why are we doing this twice? There was a very long article and I wish I remembered it. But basically it said that the stateful widget is just a container, if you will, and containers actually not the right word, they use the different term. But it basically holds the state where the state itself is what's going to change. See how this is underscore my home page extends state, meaning we know it's going to change. And the type of state it's going to change is the my home page. Bam, this guy. So that's what we got. Now, I'm going to say that's what we got. That's just a property of the my home page. The actual state is this underscore my home page. If that sounds confusing, it's because it is very, very, very confusing. So flutter developers, if you are watching this, please make that simpler, make it more easy to understand because I spent about an evening with a cup of hot chocolate just cursing at my laptop screen trying to figure out what you were doing. But once you think of it as, you know, you're going to create state at the state you're going to create is just simply this my home page and just drink the Kool-Aid, accept it as edge, then it makes a little bit of sense. So the my home page state, because that's what that is, is just simply going to increment a counter and then there's the counter we're going to increment. Notice how in this increment counter there is a set state function. I should say set state method. And it literally says this call to set state tells flutter framework that something has changed in the state, which will rerun the build method. Remember, every widget has a build method. So in here, we're going to build based on that set state changing the counter. And then in there, don't worry if all of this sounds like ancient Egyptian algebra, we're going to cover this in depth in future tutorials. I'm just giving you a high level overview. But in there, you have what's called a scaffold. So the build method of the my home page state is just returning a scaffold. Think of a scaffold as well, it's pretty self-explanatory, a scaffold outside of a building. It helps you put things in a certain structure. In that scaffold, we have an app bar, we have a body, and that body has children. If that sounds like a lot to digest, don't worry, it is. It's just the basic structure of a flutter application. Now we want to run this to conclude this application. So we see how it says no devices. We have the Android studio installed, and we have an emulator in there. So first thing it's going to do is open up our emulator for us. If we're just going to wait for this to run, that's a little slow. So while that's loading, I'm going to actually just add in some notes here. All right. So we've got our little Android device up and running. And what we want to do next is actually run this and put it on the device. So we're going to just click this little run guy. So you can see how we're running it on this device, and this is what we're running. And we're just going to bam, run that, and you'll see it'll actually go out. And it'll start building it. It's initializing Gradle because Gradle is part of the Android tool chain. I shouldn't say it's part of the Android tool chain. It's used by the Android tool chain. And then it's going to take just a minute to really build this thing and throw it out there. Once it does, you have something called hot reloading, meaning you don't have to do this every single time. You can just leave the emulator up and running. And as you make changes in your code in the background, it's going to push those changes out to the device. All right, so real quickly, here's our app bar. If you're looking at the code, here's our home. It's actually highlighted here. Down in our scaffold, app bar is this blue thing. The body is a new center. Notice how it's a new center, not just center. So center itself is a widget. So we're centering things. And in there, we have children. We have a text says you have pushed the button this many times, which is the new text counter. And it just works. There's the state. You can see the state changing the background. Now, notice how this is blue. We're going to go in here. And we're going to say color green, still blue. Let me go in here and save it. And as soon as I save it, notice how it actually changes it. We didn't have to repush anything out. We didn't have to rebuild anything. It did what's called a hot reload. So that's it for this tutorial. I know it's been very informative. And a lot of this is probably still very fuzzy in your mind. And that's to be expected. We're going to start diving into this thing in the future tutorials. Thank you for watching. I hope you found this educational entertaining. And all the source code for this and the tutorials are out in the tutorial section of my website void realms.com. They're actually out on GitHub, but this just links right to the actual tutorials. On top of that, feel free to join the void realms Facebook group where there is 1700 plus other developers out there, all different languages, all different walks of life. And we can definitely help out. Thanks for watching.