3.12. Dart Basics: Widgets and Layout

Widgets and layout are key concepts when it comes to developing apps using Flutter and Dart. They are the building blocks of user interfaces and are responsible for how UI elements are organized and displayed on the screen. Let's dive deeper into these concepts and understand how they work in Flutter and Dart.

Widgets

In Flutter, everything is a widget. Widgets describe what your UI should look like. Each widget is an immutable Dart class that describes part of the layout or user interface. There are two main types of widgets in Flutter: Stateless widgets and Stateful widgets.

Stateless widgets are those that describe part of the user interface that can be determined based on settings and construction. They are immutable, which means that once they are built, they cannot be changed. Any change to the UI requires building a new widget.

Stateful widgets, on the other hand, are dynamic. They can change over time, for example in response to user interaction or when a data service is updated. Stateful widgets are mutable, which means they can be changed after construction.

Layout

Layout is the process of arranging widgets on the screen. In Flutter, you use layout widgets to organize other widgets. There are several layout widgets available in Flutter such as Row, Column, Stack, Container, etc.

Row and Column are the most common layout widgets. They allow you to arrange your widgets in a horizontal (Row) or vertical (Column) row. Each Row or Column supports up to three children: a main widget, and two child widgets that are placed before and after the main widget.

Stack allows you to layer multiple widgets on top of each other. For example, you can use a Stack to place text over an image. The first child of a Stack is placed at the bottom, with subsequent children overlapping in the order they are added.

Container is another common layout widget. It allows you to create a visual rectangle that can contain a single child. Additionally, the Container can have decoration, such as a background, border, or shadow. It can also have margins, padding, and dimensional constraints.

Building a UI with Widgets and Layout

To build a UI in Flutter, you combine widgets and layout. You start with a layout widget and add other widgets to it. For example, you can start with a Container and add a Row to it. You can then add other widgets to the Row, such as Text, Icon, and RaisedButton.

Widgets are nested to create the user interface. The outer layout widget (eg Container) is the parent of the inner widgets (eg Row, Text, Icon, RaisedButton). The parent widget controls the placement of its child widgets, while the child widgets define their own appearance.

In Flutter, you construct the UI declaratively. This means that you describe the UI in terms of its final state, and Flutter takes care of updating the UI to match that state. This contrasts with the imperative approach, where you need to specify steps to update the UI.

In short, widgets and layout are the cornerstones of building user interfaces in Flutter. With a solid understanding of these concepts, you can build complex and compelling apps with Flutter and Dart.

Next page of the Free Ebook:

31Dart Basics: State Management

3 minutes