Your First Flutter App: An App From Scratch

You’ve gotten a first look at some Flutter widgets. It turns out that in Flutter, almost everything is a widget!

Well, maybe not almost everything. But certainly the elements that you add to your user interface, like text, buttons, and images. And the screens themselves are widgets. Widgets are also used for setting the layout of other widgets on the screen, and adding spacing and padding between widgets.

You’re going to hear the word widget a lot in this course, so get ready. Using widgets, you’re able to set up your user interface in what’s called a declarative way, using code like that shown here. You declare that your user interface consists of widgets with this nested structure, and Flutter draws these widgets on the screen at run time.

You end up with a lot of nesting in your code, which shows up as a lot of closing parentheses in brackets. By always appending a comma to the widget, VS Code will automatically format your code in a nice way.

Another way to think about the widget nesting is in terms of a widget tree. The nesting of widgets forms a hierarchical tree-like structure that Flutter renders to the screen. Some widgets, like Scaffold, center, and padding, are used to layout widgets. Other widgets, like prompt, control, and score, are custom widgets that contain other widgets. And some, like text and buttons, are actual screen elements that a user can view and potentially interact with.

Flutter contains lots and lots of widgets but the great thing about widgets is that you can use them to build other widget. Widgets connect to each other like Lego bricks allowing your build custom behavior in your app. What’s great about this is that later down the road, you can take widgets from one project and use them in other projects.