Getting started in Flutter — Part 2: Widgets, Properties and States
This is part 2 on how I started working with Flutter. This is by no means an extensive tutorial since there exists many ways of doing this.
In 2014, I wrote an Android app called AirCare that used open data to visualize air pollution in Macedonia. Since then, the app has expanded to 7 countries, has over 100k users and is stronger than ever!
A few months ago, I understood that in order to make sure my Android and iOS apps get the same features as quick as possible, I need to use a language that will allow me to do just that. Enter Flutter.
From this series:
Flutter is Widgets
All that you see in Flutter is basically widgets. That's the name Google gave to their UI components that make up your app. From a text box, to an image, to a side drawer, and even the app bar, they are all widgets.
Some of these widgets come embedded with Flutter, and you can see them all here. Others are part of external packages you include in your app (we’ll get to those in a later part).
Let’s take a look at some widgets that already exists in our demo app from part 1 of this guide.
In the main.dart file, there are 3 classes defined, take a look at _MyHomePageState (the last one), and specifically at the build method there. You’ll see it returns a widget called Scaffold. This widget has properties, which are usually other widgets as well, here is a short explanation on all of them that are in the demo app:
- Scaffold is usually a very top level widget, one that gives the main outline of an app (literally the scaffold), and lets you define an app bar, a body, a floating action button, and some extras.
- AppBar is the widget that literally represents the app bar (the top bar) of your application. It can host stuff like a title, a logo, and action icons ( share for example).
- Center is a widget that does exactly what it says — it tries to center its child within the parent, both vertically and horizontally.
- Column is a positional widget, that has a list of children, and positions them vertically, one under the other.
- Text is a textual widget, that can support a lot of textual formatting.
- FloatingActionButton comes from the material design of Android, and is the button that usually is located on the bottom right of the screen, indicating some action.
You’ll be playing a lot with widgets in Flutter, and they usually always live in the build method. But if you take a look at the other 2 classes we skipped, MyApp and MyHomePage, you’ll notice that they also extend some sort of widgets!
- StatelessWidget is a widget that does not depend on anything else than the configuration it has. This widget usually never changes throughout the lifecycle of the app, hence think of it as more static.
- StatefullWidget on the other hand, depends on external properties that change during the usage of the app. Think of a label that pulls data from a server. Initially it has empty text, but then an external factor changes it to display something.
- State is the class that holds all the important functions and variables that are used to generate the widgets/properties of widgets in your build method. They are connected to a StatefullWidget.
Stateless widgets are easier for the device to handle, but can’t change. Statefull ones can change, but use them wisely only when you need them.
In the demo case, you can see that the MyApp widget has no special modification on the widget in it’s build method, hence needs no state. But MyHomePage has a counter that can be updated when a user clicks a button. In order to store this value and update it dynamically in the widget that displays it, it needs a state.
Properties of widgets
One thing I really love about Flutter, is how well widgets are documented. Let’s take a look at the Text widget, for example. If we want to know all the properties we can set on it, the best thing we can do is Ctrl+Click on it. This will take us to the source of the widget, where we see a list of properties that can be set, with descriptive names and even a description text to let us know what they do.
Here, we can see that there are quite a few properties that can be set. The main one, data, is the actual string of text to be displayed. That one is required (as we can see from the assert and from the property not being in the {} optional list of properties). The rest are optional, from text alignment, to style, overflow and max lines the widget can have.
We can explore even more this way. Say, we Ctrl+Click on the style property, and then click on its class called TextStyle, we get this:
So now we know how to set the color, font weight, size and decoration of the Text widget, and we can see that these are all optional. Great, but how do we put these together? Super easy:
This is how we would add a widget TextStyle to the style property of the Text widget. As you can see, TextStyle also has properties as we saw above that we can instantiate, with constants or other widgets.
This should let you start playing around widgets. How about add more Text widgets to the demo app, try putting them in a Column, or even a Row (which is the opposite of a column), and adding funky styles to them!
In the next part, we’ll touch upon the actual business logic of the app, the code that controls what happens on screen, and the super cool topic of reactive programming! If you wanna see Flutter in action, download AirCare — the app that visualizes air pollution around you!
