Single-Child Widgets for Responsive Layout

Learn the most important single-child Flutter widgets that handle responsive layouts.

We'll cover the following

A single-child layout widget allows us to change the position or the size of its child. For instance, we can use Center to change the position of a widget to be centered in its parent.

Scaffold(
  appBar: AppBar(
    title: const Text('Without Center'),
  ),
  body: const FlutterLogo(size: 200.0),
),
Scaffold(
  appBar: AppBar(
    title: const Text('With Center'),
  ),
  body: const Center(
    child: FlutterLogo(size: 200.0),
  ),
),

In the code above, there are two versions of a Scaffold containing just the Flutter logo. In the first version, the logo is placed in the default position. In the second version on line 12, the logo is wrapped in a Center widget, a single-child layout widget, which changes the position of the logo to be centered in the Scaffold. The result is shown in the images below.

The Flutter logo placed directly in the Scaffold
The Flutter logo placed in a Center widget inside the Scaffold

In the first version of the Scaffold on the left side, the logo is placed in the default position—top left. In the second version on the right side, the logo is wrapped in the Center widget.

Layout widgets for responsive design

Some of the single-child widgets that the framework provides can be helpful when implementing responsive UI. They dictate the behavior of their child widget, which gives us control over how it’s displayed on the screen.

We’ve probably encountered layout widgets while implementing a Flutter application without knowing we could exploit them to make our application responsive. The single-child widgets we’ll see in this chapter are as follows:

  • Align
  • AspectRatio
  • ConstrainedBox
  • Expanded
  • Flexible