mohumohu studio

In this article, we will explain Flutter layouts based on the official documentation!!

Table of Contents

1. Understanding Flutter Layouts
2. Constraints
3. Laying Out a Single Widget
   • Center
   • Container
4. Laying Out Multiple Widgets Vertically or Horizontally
5. Sizing Widgets in Rows and Columns
6. Positioning Widgets in Rows and Columns
7. Summary

Understanding Flutter Layouts

At the core of Flutter’s layout mechanism are widgets. In Flutter, almost everything is a widget, including the layout model. Everything displayed in a Flutter app, such as images, icons, and text, is a widget. Even invisible elements that position, constrain, and align visible widgets, like rows, columns, and grids, are also widgets.

To build more complex widgets, you combine widgets to create layouts.

Constraints

Understanding constraints in Flutter is essential to understanding how layouts work.

A layout generally refers to the size and position of widgets on the screen. The size and position of a widget are constrained by its parent. Widgets cannot be arbitrarily sized or positioned freely. Instead, their size and position are determined based on their relationship with their parent widget.

In the simplest case, the layout relationship works as follows:

1. A widget receives constraints from its parent.
2. Constraints include minimum and maximum width and height.
3. The widget determines its size within these constraints and passes back its width and height to the parent.
4. The parent checks the preferred size and positioning method and places the widget accordingly.

Widgets like Row, Column, and Center explicitly determine positioning within their properties.

Laying Out a Single Widget

To lay out a single widget in Flutter, wrap a visible widget (e.g., Text, Image) inside a positioning widget (e.g., Center).

Center

By placing an Image.network (which displays an image from the internet) inside Center, the image is centered on the screen.

     Widget build(BuildContext context) {
         return Center(
             child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
         );
     }

All layout widgets contain either of the following:

• A single child property (e.g., child in Center, Container, or Padding).
• A list of children property (e.g., children in Row, Column, ListView, Stack).。

Container

The Container widget is a powerful widget composed of multiple widgets for layout, painting, positioning, and sizing. It is often used to add padding and margins.

     Widget build(BuildContext context) {
       return Container(
         padding: EdgeInsets.all(16.0),
         alignment: Alignment.topLeft,
         child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
       );
     }

The following diagram shows a widget without padding on the top and a widget with padding on the bottom.

For more complex layouts, multiple widgets are combined, such as Container and Center.

     Widget build(BuildContext context) {
       return Center(
         Container(
           padding: EdgeInsets.all(16.0),
           child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
            );
         ),
       );
     }

Laying Out Multiple Widgets Vertically or Horizontally

One of the most common layout patterns is arranging widgets vertically or horizontally.

• Use Row to arrange widgets horizontally.
• Use Column to arrange widgets vertically.

     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
               body: Row(
                 children: [
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                 ],
             ),
            ));
            );
          }

You can nest Rows and Columns inside each other for more complex layouts.

     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
               body: Row(
                 children: [
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 1'),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 2'),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 3'),
                      ],
                    ),
                  ],
                  ),
            ));
            );
          }

Sizing Widgets in Rows and Columns

If a layout is too large to fit within the device, yellow and black stripes appear along the affected edges.

To resolve this, use the Expanded widget, which resizes widgets within a Row or Column.

     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             children: [
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
             ],
           ),
         ));
       }
     }

The Expanded widget can also specify the amount of space a widget occupies relative to its sibling widgets. For example, if you want a widget to take up twice the space of its sibling widgets, you can use the flex property, which is an integer that determines the flex factor of the Expanded widget. The default flex factor is 1. The following code sets the flex factor of the middle image to 2.

     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             children: [
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                ),
               Expanded(
                 flex: 2,
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
             ],
           ),
         ));
       }
     }

Positioning Widgets in Rows and Columns

The way a Row or Column arranges its child elements is controlled using the mainAxisAlignment and crossAxisAlignment properties.

In a Row, the main axis runs horizontally, while the cross axis runs vertically.
In a Column, the main axis runs vertically, while the cross axis runs horizontally.

Setting mainAxisAlignment to spaceEvenly distributes equal spacing between, before, and after images.

     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
             ],
           ),
         ));
       }

A Column works similarly but distributes spacing vertically.

Setting the main axis alignment to spaceEvenly evenly distributes the vertical space between, above, and below each image.

Summary

This time, we explored Flutter’s layout system!!

How was it?

The official documentation goes further, but since it’s quite long, I’ll continue it another time.

Next time, I’ll cover some fundamental topics like project creation, which I haven’t explained yet, while building an app! (Apologies for any shortcomings…)

Wishing you a great Flutter life!!