Let’s create a brand new Flutter project in Android Studio, 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 5.
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.
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.
Let’s go ahead and remove our text widget.
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.
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.
What you’ll come to notice while you’re creating Flutter apps is that there are widgets that fulfill almost every role.
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.
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.