Flutter Tutorial: Widgets and Basic Layouts

This lesson introduces common Flutter widgets and basic layout concepts. Flutter interfaces are composed from widgets that describe the UI for the current configuration and state.

Text

Use the Text widget to display styled text in the interface.

Image

The Image widget can display assets and other supported image sources. For project assets, declare the files correctly in the Flutter project configuration.

Icon

Flutter provides the Icon widget for displaying icons, including Material icons when the project is configured to use them.

Buttons

For Material interfaces, current Flutter applications commonly use button widgets such as ElevatedButton, TextButton and OutlinedButton. Older tutorials may reference deprecated button APIs, so use the current Flutter documentation when following code examples.

Row and Column

Row arranges children horizontally, while Column arranges children vertically. Alignment and sizing properties help control how their children use the available space.

Container

Container is a convenience widget that can combine sizing, padding, margins, decoration and positioning behavior for a child widget.

Continue Learning Flutter

If you are evaluating Flutter for a business application rather than only learning the framework, read our Flutter mobile app development guide and Flutter vs React Native comparison.