[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]
