[MUSIC PLAYING]
MARTIN AGUINIS: I'm Martin Aguinis from the Flutter team
here at Google and this is the first video in a series
about Flutter widgets.
This series will cover stateless widgets, stateful widgets,
inherited widgets, and keys.
Today, I'm going to show you what Flutter widget is
and how to put stateless widgets to work in a Flutter app.
If you haven't used Flutter before,
it's Google's mobile app SDK that
builds native iOS and Android apps from a single code base.
It's also super fun to code with.
So let's jump right in.
To keep things quick, I'm starting with a basic app here.
It has a Scaffold widget, an AppBar widget,
and a couple Text widgets that display info
about my yellow Labrador, Rocky.
Widgets are the basic building blocks of a Flutter app.
Each one is an immutable declaration
of part of user interface.
And they can do a lot of things.
There are structural elements like a button or menu,
stylistic elements that propagate a font or color
scheme, layout-related widgets like padding, and much more.
You can also compose new widgets out of existing ones too.
So the combinations are endless.
Let me hop into an editor, and I'll show you what I mean.
Say I wanted a background color on my dog's name.
I can do that by wrapping the text
widget with a decorated box.
And now, my text widget has a background color.
Maybe I'd like a little padding in between the edge
of the color and my text though.
I can do that by adding a padding widget in between them.
I'll give it eight logical pixels
of padding all the way around.
And now, I've got a little bit of padding.
This process of putting widgets together
is what we call composition.
I'm composing my interface by combining
a bunch of simple widgets, each of which
handle one particular job.
Padding pads things, Decorated Box decorates a box, and so on.
Now, let's say I go to the animal shelter,
and I need a couple more yellow Labs that I cannot live
without.
I can add a column widget inside the center widget
and then make some more of these names.
I can even use a widget called SizedBox
to put a little blank space in between them.
That gets me something like this.
But you know, I've got a lot of repeated code
here in these three named boxes.
Wouldn't it be great if I could make
my own widget that just took a string
and handled the details for me?
Well, I can.
I'll make a stateless widget and call it Dog Name.
A stateless widget is a widget that's
composed of children, which is why it has a build method
and does not have any mutable state that it needs to track.
When I say mutable state, I mean any properties
that will change over time--
like a text box would have a string
that the user updates, for example.
Or a widget that's animated might have values that change.
This one doesn't have any of that.
It just needs a string for a name which won't change.
So stateless widget is a perfect fit.
I can even make this string final.
I can take that string in via the constructor.
And because all the properties are final,
I can mark this a const constructor.
Now, I just need to fill in the build method
with the same widgets I was using above.
Only this time, the text widget will display the string
from the widget's name property.
Now, I can use this widget to simplify
the code I had to start with.
As you can see, I still get the same interface here.
But my code's gotten a lot tighter thanks
to stateless widget and Flutter's use of composition.
So that's a little example of how composing
with stateless widgets works.
At this point, you might be asking yourself--
you know, I see how these build methods work,
but when do they get called?
Well, let's start with just a single dog name widget.
We tend to think of apps built with Flutter
as a tree of widgets, and that's not a bad thing.
But as mentioned at the beginning of this video,
widgets are really just configurations for pieces
of an app's UI.
They're blueprints.
So what are they configurations for?
Elements.
An element is a widget that's been made real
and mounted on screen.
And it's the element tree that represents
what's actually displaying on your device
at any given moment.
Each widget class has both a corresponding element class
and a method to create an instance.
Stateless widget, for example, creates a stateless element.
That createElement method gets called when the widget
is mounted to the tree.
Flutter asks the widget for an element
and then pops that element onto the element
tree with a reference to the widget that created it.
Stateful element then says, hey, I
wonder if I should have any children
and calls the widget's Build method.
In the case of my app, it gets quite a few.
These widgets then create their own elements,
and they're mounted on the element tree as well.
So my app now has two trees--
one that represents what's actually on the screen,
the elements, and one that holds the blueprints they
were made from, the widgets.
Now, you might be wondering, what
starts the process of building and creating elements?
What kicks off the whole thing, so to speak?
Let me show you something you may not have noticed back
in the beginning.
The DogApp class, which represents my entire app,
is itself a stateless widget.
I told you widgets can do almost everything, right?
If you take a look at Main, which
is the entry point for the app, you
can see it's calling this runApp Method.
And that's the starting point.
RunApp takes a widget and mounts it
as the root element for the app with the height and width
constraints that match the size of the screen.
Flutter progresses through all the build methods,
creating widgets, using them to make elements, and so
on, until everything is built, mounted on screen,
and ready to be laid out and rendered--
which is how I got my three little boxes
with the names of yellow Labs.
So that's an intro to composing with stateless widgets
and building an interface.
One thing we didn't talk about today
is how to update or rebuild an interface when data changes.
That's because stateless widgets don't really do that.
They're stateless, so they can't track data over time or trigger
rebuilds on their own.
Fortunately, Flutter also has stateful widgets,
which we'll tell you all about in the next episode
of this series.
In the meantime, for more information about Flutter
and all of the many widgets, head on to Flutter.io.
[MUSIC PLAYING]