This course was created by London App Brewery. We are pleased to host this content in our library.
Skill Level Beginner
- [Instructor] All right, so now that we're finally done with setup and configuration, 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 decided to create an app called I Am Rich, and it was a pretty clever idea. He decided that he was going to make an app that basically does absolutely nothing.
It just shows a single icon of a red ruby on the screen. And he decided to price it at the maximum possible price that the App Store would allow, which was $999.99. And he pitched it as an art and lifestyle app for people who are very rich to display to other people how rich they are. Alternatively, for people who were slightly silly to display to the world that they purchased 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 will 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, it usually get saved into a folder called Android Studio Projects. And you'll be able to find it if you search for Android Studio Projects. 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 appbrewery.co. Now, the reason why they want this is so that they can create a package name for your app, combining your 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 dot 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 with some text in the middle and a button that you can press. Now, this is not the app that we want to create.
This is just the Flutter team showing you what you can do with scaffolds. And we're going to be building ours pretty much entirely from scratch. So we're going to be creating a scaffold, and we're going to be using it to build our I Am Rich app. But in order to understand what's going on, I'm actually going to delete everything that's currently inside the file, other than the top two lines. So everything up to pretty much line 12. So now we get a little error here. And you see it in Dart Analysis as well, where it says My App isn't defined.
Well, that's because My App was actually the Flutter team's app, it was the counter app. So that doesn't really exist anymore, because I just deleted it. So instead, the app that we're going to run is a blank material app. And this app will be something that conforms to the material design pattern. And material design is simply just a design style or a concept that was created by Google and a lot of startups and a lot of companies have adopted it for their websites and mobile apps.
And by using Flutter, we get to tap into a lot of these material components through the use of Flutter widgets. And we're going to see the power of these widgets, and how we can incorporate these designs in almost automatically, very, very soon in this module. Let's get back to our material app. And as you can see, we can start building up our tree of widgets. So inside the material app, the most important thing you get to set is the home.
And this is where everything starts. If we go ahead and say that in our material app, in the home of the app, what we want to see is simply a text widget, and this text widget just says Hello World. Then now if we go ahead and actually run this app, then you can see our text show up inside our material app. But at the moment, it doesn't look great, right? It's just a black screen with some red text.
But it does say what we wanted to say, which is Hello World. We've already started building our widget tree. And it's a really simple one, it's only got two widgets. The first or the parent widget is the material app. And almost all of your Flutter apps will start off with this as the first widget. The next thing we're saying is that inside this material app, the only thing that we want to show is a text widget. And by default, all text widgets get aligned to the top left corner.
And this is why we're seeing it right up here because it's trying to be squarely in the top left corner. Now, what if we wanted to make the text go into the center? Well, as I said, Flutter apps are pretty much entirely built using widgets. And there's of course a widget for centering elements. So if instead of having text as the child of the material app, it was inside a center widget, then it will automatically be put into the center of the screen.
Our tree has gotten a little bit more complex. We've got three widgets now, hurray! And the first widget, or the parent, is the material app. Inside the material app, we have a center widget, which centers anything that it contains. And we've given it a text widget to contain, so the text automatically becomes centered. Let's go ahead and remove our text widget. So I'm just going to use Command + X or Control + X to cut it out.
And we're just going to leave it here for the moment. And inside the material app, instead of having the text widget, we're going to have a center widget. And the center widget can have a child as well. So this is two levels deep now. And its child is going to be a text widget. So now, when I run the app using the play button, you'll see that my Hello World gets automatically moved into the center of the screen.
And it's because it's the child of a center widget. What you'll come to notice while you're creating Flutter apps is that there are widgets that fulfill almost every role. Just as in a company you might have accountants, as well as salespeople, as well as technical people, you also have widgets that perform a variety of roles. The text widget is responsible for displaying text and styling text. The center widget is responsible for laying out the screen helping to put something right in the center.
And the material app is kind of like the granddaddy of all the widgets, because it usually sits at the top. And everything that we build is pretty much a material app. Now at the moment, our code is all on the same line. And it's really hard to see which widget is inside which other one. So how can we make our lives easier? Well, by installing Flutter and Dart packages, we automatically get access to a reformat 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 dart, 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 the 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 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 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, "Oh, 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 the 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 you'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.