All language subtitles for 2. An Overview of the Core Flutter Widgets

Before we get started with the application, let me point at that Flutter which had catalog again for

which you can also simply google to find it in the official docs.

There, you have basically all the widgets that ship with Flutter or all the core widgets nicely grouped

into categories and it's always worth having a look at these categories to find out which widgets are

there because of course I can't show every single widget in this course because you don't need every

single widget in every app you're building

and even though we're building quite a lot of apps in this course, we still don't need every widget.

So this is nice to learn about new widgets but it's also nice

and that's really something I want to bring into your mind or which is important to understand,

this is also a nice resource to not only learn which widgets exist but also what they do and how you

can configure them.

So it's always worth having a look at the documentation of a widget you're using to learn what its intention

is, how you may configure it, which related widgets exist, how you can construct it so that is

the configured part I guess, which properties it has and so on,

this is really something I would recommend diving into because it's a really amazing complementary resource

for learning Flutter and for building the app you want to build. Or if you don't know in which category

a certain widget is, what you want to learn about, go to api.flutter.dev and there, you can always

search these API docs for a specific widget like ListTile which we'll for example use later down in

the course and then on these pages, you always can learn more about how to use them, configure them, which

options you have there,

what the idea behind them is and so on.

There are however a couple of very important widgets through which I want to walk together with you

right now because these are the widgets we'll see throughout the course and a lot of them already throughout

this module. There are for example widgets that help you with general application and Page Setup and

that would be the MaterialApp widget which we already saw, which we already used in the previous course

app but it would also be for example the CupertinoApp widget which you would use to build an iOS

styled application and more on that later in this module

when I dive into the different styles and how you may adjust your application to look good on iOS. Now

this sets up the overarching application, does a lot of behind the scenes wire up work which will for

example also help us later once we add navigation and once we can switch between pages. What you can

see on the screen however is also heavily influenced and controlled by the scaffold or for iOS styles,

CupertinoPageScaffold widget. That is the widget that gives you a white background,

of course you can change the color but that gives you a background that allows you to add an app bar

and so on.

So that is the frame for what you see on the page you could say and it's a crucial widget for setting

up the rest of your page and of your application.

Now once we have to frame set, of course we want to position our own widgets and therefore the built-in

layout in widgets are also super important.

There, we for example have the container, a nice widget that gives us a lot of different styling and alignment

options so that we can for example align a child inside of it but the container is a very versatile

widget where we can also give it a background color and so on,

you will often use it as a wrapper around other widgets to get a certain styling or a certain alignment.

Now extremely crucial widgets are also the row and column widget. We already used the column widget

in the first course app

and there, we used it to have a column of items which you position beneath each other.

In this example here, the row widget of course is used to position items horizontally instead of vertically.

So these are a crucial widgets because unlike the container, they don't just take one child, they take

multiple children,

so you basically always need a column or a row when you want to have more than one widget sit next to

each other at or below each other.

Now besides these layout widgets, we also have specific widgets that work together with row and column

because in there, you can have different child widgets but when it comes to how much space each widget

should consume, there are widgets that can help you there, flexible and expanded.

Now I'll not dive too deep into these widgets right now,

we'll see how they work and how you configure them throughout this course.

Basically these are widgets which you would wrap around a child, like a text widget for example, to configure

how much space this child widget should consume in the wrapping row or column

and don't be confused here,

flexible and expanded can both go into columns and rows,

so this slide is not meant to show that flexible belongs to row and expanded belongs to a column, both

flexible and expanded can be used in both row and column widgets. Other important widgets we have are

for example related to holding content. There, we have the stack widget, the stack widget is always great

if you want to have items, other widgets to be precise, positioned on top of each other,

let's say an image with a text in the foreground. The card widget is also useful,

this is basically a pre-styled container which as you could say, it gives you a nice drop shadow, some

background color, a little bit of padding, remember padding is that inner spacing inside of a container.

So it's basically a container with some default styles and that card look is a look

you actually see a lot in modern apps and also websites where you have that visual container around

some content. Besides these content containers,

we also have elements or widgets that help us with repeating content.

There, we have the ListView which is pretty much like a column but a column that is scrollable because

a default column is not scrollable as you will also see. Sometimes you also don't just want to have

items set next or beneath each other but have them ordered in columns as a grid and for that you

have a grid view which is basically a combination of column and rows which is also scrollable,

so like a ListView but with multiple items sitting next to each other

if you want to. And inside of a ListView for example, you could use a ListTile widget, another core

widget baked into Flutter,

this is simply a widget which you could also build entirely on your own,

you don't need that, it's just a widget that comes with some default styling and some default positioning

or a layout setup to be precise and we'll also use that throughout the course. We also have widgets that help you

with different content types.

We already work with text widgets but there for example also are widgets that help you with presenting

images, where you can also control how big it should be, how it should be positioned in a wrapping container

and so on and you have also a widget that helps you with using icons

and as it turns out, you will also have buttons with icons,

there is a specific icon button widget even. Speaking of buttons,

we have widgets that help us with user input, like text fields where a user can enter something or buttons -

RaisedButton, FlatButton,

as I just mentioned there also is an icon button widget which is a button with the icon on top of it

and you can also build your own custom user input widgets, your own buttons with invisible widgets like

gesture detector or partly invisible widgets like InkWell which gives you that ripple effect when you

tap somewhere, which basically allow you to wrap anything into a widget that can't be seen or can only

be seen upon a tap in the case of the InkWell

but that allows you to register a broad variety of event listeners on a tap, on a double tap, on a long

tap and so on.

So these are some of the most important widgets and obviously this was just a quick summary here.

We'll see these widgets throughout the course

so there's no need to learn it by heart

right now. The core takeaway is that Flutter has a broad variety of built-in widgets and gives you all

the tools you need to build your own widgets as well.

It takes some experience to find out what you have to build on your own and what's built-in

and sometimes, it also depends on tiny details,

maybe the thing you want to build is almost built into Flutter but there is one thing which you can't

configure which you absolutely need and therefore it's great to have both the built-in widgets but also

the flexibility to create your own widgets. The widget catalog is a great starting point to learn which

widgets are built-in

but please don't feel overwhelmed by the broad variety of widgets you find in there,

you don't need all the widgets in every app you build

and also there are some widgets which do almost the same as other widgets and maybe exist because of

historical reasons, they exist at first before a better version was released as a separate versions or

they do one tiny thing differently than the other widget does it.

So that is how you should think about these widgets but with that I'd say we had enough of the theory,

let's actually now dive into our next course application and simply start building it to see how we

can use built-in and custom widgets.