Learn how to build a basic app with Flutter, the cross-platform mobile development framework for Windows and Mac.
we're ready to get started with Flutter development and build our very first app, and that app is an app called I Am Rich. Now, if you haven't heard of the story, basically in the early days of the App Store, when it was still very much the wild, wild west of app development, a guy called Armin an app that does nothing for $1,000. But either way, before the app got pulled by Apple, seven or eight people actually bought it, five of which were probably kids. Kids who probably got beaten up by their parents for buying an app that does nothing for $1,000. But this is a perfect app for us to get started with developing Flutter apps. It'll let us get used to the development environment, and all the small buttons, and also see how exactly an actual Flutter app is built from scratch. So once you're ready, fire up Android Studio, and let's get started. So once you're ready, go ahead and crack open Android Studio and select the option where we get to start a new Flutter project. And we're going to select this first option to create a Flutter app, and go ahead and click Next. Now we get to name our project, and we're going to call it i_am_rich. So this should be lowercase, with a underscore between each of the words in your project name. And then we're going to leave all of the rest as it is. This part tells you where your project is going to be saved. By default, usually gets saved into a folder called AndroidStudioProjects, and you'll be able to find it if you search for AndroidStudioProjects, and this is where your brand new app is going to be created. Now that we've named our project, let's go ahead and click Next, and here it expects us to type in a company domain. So for example, our website is www.appbrewery.co, so our company domain will be appbrewery.co. Now, the reason why they want this, is so that they can create a package name for your app, combining the company domain with the name of your project to create something that can identify this particular app uniquely on the App Store. So they're hoping that nobody at appbrewery.co will make a duplicate app and try to upload it. Now, what should you do if you don't have a website or a company domain? Well, you can simply just type in your full name, and end it with a .com, and as long as nobody has the same name as you who's tried to develop an app called I Am Rich, then you should be okay. If you do have a website that you own, then of course nobody else will own the website that you own, so it ensures that this is actually going to be unique. The next thing we're going to do is we're going to generate a sample application, and this is just some starting code that the Wizard is going to give us to show us what we can do with Flutter. And you're going to click on this drop-down list, and you're going to find the one that says Scaffold, and you're going to select it. And finally, we're going to leave these last two boxes unchecked because we're not going to be writing any Swift or Kotlin code, we're actually going to be doing everything entirely with one code base using Flutter. So now, let's go ahead and click Finish, and Android Studio will create a brand new Flutter project for you and it will set you up with some starting code. The starting code is created by the Flutter team, and all it does is it creates a simple counter app. Now in this case, it's a counter app that is created using what's called a scaffold, and if you want to just quickly run it, just to see what it looks like, then go ahead and open up your Android Emulator, or your iOS Simulator, and click Run. And once it's done, this is what you should see. It's a really simple application with a top bar, Well, by installing Flutter and Dart packages, we automatically get access to a reformatter called dartfmt, and this is really, really helpful, but you have to help it to help you. The Flutter team advises that whenever you're creating a widget, which usually involves these parentheses, or these round brackets, after every one of these, just add a comma. So I'm going to go ahead and add a comma to the end of all of my round brackets, and that means that when I hit Save, or when I right-click and click on reformat code with dartfmt, then it will automatically turn my one line, and very difficult to recognize code into an indented structure. So now it's so much easier to see that this text widget is inside this center widget, which is inside this Material App, and everything lies inside this thing called main. Now, this thing called main is really important, because when our app is run, the starting file is this thing called main.dart, which we're currently writing code inside. So it launches this app, and it starts from the top. It looks for something called main, and then it looks to see what it should do. This is the starting point of all of our apps. Now, in order to make our indented structure look even more organized, we can actually replace this so-called fat arrow, or what's a equal sign and an angle bracket with a set of curly braces. So we can change that into a curly brace at the beginning, and a curly brace right at the end. So this does exactly the same as what it did before, but now our code is reformatted so that we have this really nice and neat indentation, and at a glance I can already tell what is inside what, which becomes really important as you're building out your app with more and more widgets inside each other. The final thing that I want to point out on this page is at the top here, you see this forward slash, dot dot dot, and forward slash. If you click on it, it'll expand the content, and you can always collapse and expand things just by clicking in the margin over here. So if I want to collapse my entire Material App, then I can do that and make it appear like it's only taking up one line. Now this part is a message from the Flutter team, and it tells you what the original example code was trying to demonstrate and trying to show to you. What's special about this is that it starts off with two forward slashes, and in Dart, as with many other languages, this turns any text that comes after it into a comment. Now, comments are great because they allow you to leave notes to yourself, or to other people on your team when you're working on the same code base. It means that I could tell my future self that when I first wrote this code, and I understood how it worked perfectly, what each part is meant to do. And while you're learning, it's a really good idea to leave notes for yourself through the use of the these comments so that you can remember later on down the line when you review your code, what each part is meant to do. So for example, let me start this off. We can write the main function is the starting point for all our Flutter apps. So that means the next time you come back to this, and you look at this thing called main, you're like, ooh, what does that do again? Well, there's a really helpful comment from the past you to try and help you to understand what it does, and you remember, ah, I know, this is the starting point for all our apps. The first thing that happens when we launch our app is it looks inside this main function to see what it should do, and it tells it that it should run an app. The app that it should run is a Material App, and the Material App will have a center widget, which helps you to center this text widget on screen, and that's how we end up with something that looks like this. Once we're happy with this, I recommend just deleting it, because we won't need it. The part of the code that it's referring to, we've already deleted long ago, and I recommend to start leaving notes for yourself in the way of these comments so that you understand later on when you come back to your code what everything is doing, and how it all works. In this lesson, we've already started building a widget tree and through the use of these widgets, we've created a really simple app that just displays the word Hello World on screen. Now in the coming lessons, we're going to be building this out, and making it a lot more fancy, and look more like the I Am Rich app that we're going to build. But this is the starting point for building any Flutter app, and when you're building your own apps, you now know how to go through the Wizard and remove the starting code, so that you can customize it to turn it into your own app.
This course was created by London App Brewery. We are pleased to host this content in our library.