All language subtitles for 024 Creating a New Flutter Project from Scratch.en_US

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 Arman 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 decide to price it at the maximum possible

price at 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 are 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 paying 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 gonna 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 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 gonna 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 your

company domain with the name of your project to create something that can identify this particular app

uniquely, on the app stores.

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 ended 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.

So now, let's go ahead and click finish, and Android Studio will create a brand new Flutter project for

you and it'll 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 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 gonna 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 "MyApp isn't

defined." Well that's because MyApp 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 MaterialApp, 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 really 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 or 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 it 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 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 become 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 it's 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 grand daddy 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 reformater 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 gonna 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'll automatically turn

my one line and very difficult to recognize code, into an indented structure.

So now it's 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 = and > 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

/.../

If you click on it, it will 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 you. What's special about this is that it starts off with two

// 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 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 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 gonna be building this out and making it a lot more fancy 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.