How to Create Stateless Widgets - Flutter Widgets 101 Ep. 1

[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