# Widgets 04 | Row & Column

## Before Start

As usual, I will tell you about our code page. I will put all code in the one page. So first we will create a page that contains the whole code as below.

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/page_name_const.dart';

class RowColumnPage extends StatefulWidget {
  @override
  _RowColumnState createState() => _RowColumnState();
}

class _RowColumnState extends State<RowColumnPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.ROW_COLUMN),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            //our code here.
          ],
        ),
      ),
    );
  }
}
```

This will show you as follows, It has nothing but the title.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWUdtCm4DP6ouyoXlrr%2F-LWUiw7sZgvxevVYxNLZ%2Frow_column_01.png?alt=media\&token=e455769e-98a0-4c5a-9e4f-521d55c706a3)

## Simple Use

As you can see above, we have a `Column` inside the widget. So we can just put two children `Text` in it. Also, we will put our other tutorials here.

```dart
Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            //our code here.
            Text(
              "Welcome to Flutter Open.",
              style: TextStyle(fontSize: TEXT_LARGE, color: GREEN),
            ),
            Text(
              "The developer is NieBin who is from China.",
              style: TextStyle(fontSize: TEXT_NORMAL, color: BLUE_DEEP),
            )
          ],
        ),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWUdtCm4DP6ouyoXlrr%2F-LWUpYuYSJpjsUnPr596%2Frow_column_02.png?alt=media\&token=e7d2f775-424d-4a69-8540-ade97e4b7a21)

It means that the column or row can show multiple widgets in one direction, the `Row` show in the horizontal direction and the `Column` show in the vertical direction. So their use is similar but different with its direction. So if we understand the one, The another will be easy to know.

## Constructor

So let's look at its constructor.

#### Row

```dart
  Row({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })
```

#### Column

```dart
Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  })
```

Their parameters are the same. So if you can know the one, you know the another as well. So I plan to talk more detail about the Row, but give a simple example with the Column.

## mainAxisAlignment

The `mainAxisAlignment` controls the children to show in the horizontal direction of  the`Row`, But controls the vertical direction of the `Column`. Let's look at the picture with its types.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWUdtCm4DP6ouyoXlrr%2F-LWVGcMQXcVui5uuwWpt%2Frow_column_03.png?alt=media\&token=ed182b49-c248-4e90-b772-40283a34c2b2)

In the picture, we can see, when we change the parameter of the `mainAxisAlignment`, the location of the children widgets will change in the horizontal direction. We can easily know the `start,center,end`,but others may be a bit difficult, I will explain to you. When set to the **`spaceBetween`**, the space between the children widgets will equal, in the picture, them equal to `a`, and the first one is at the start, the last one will be at the end. The **`spaceEvenly`** will make the space of the children widgets equal. In the picture, they equal to `b`.The **`spaceAround`** will make the space around the children widgets equal, in the picture they equal to `c`, so the space between them will be `c+c=2c`. Let's see the code, I put four widgets `Text` with name `open` in the `Row` and the `mainAxisAlignment` as the *parameter* of the `_rowMainAlign(mainAxisAlignment)`.

```dart
 Widget _rowMainAlign(mainAxisAlignment) => Container(
        color: RED,
        height: 50,
        child: Row(
          mainAxisAlignment: mainAxisAlignment,
          children: <Widget>[
            Text(
              "Open",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Open",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Open",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Open",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
          ],
        ),
      );
```

Then, use a function  to show all types of the `MainAxisAlignment`.

```dart
 Widget _rowMainAlignAll() => Column(
        children: <Widget>[
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.start",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.start),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.center",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.center),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.end",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.end),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.spaceBetween",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.spaceBetween),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.spaceEvenly",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.spaceEvenly),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "MainAxisAlignment.spaceAround",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _rowMainAlign(MainAxisAlignment.spaceAround),
        ],
      );
```

This will show as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWVMJPMmSyOfEtJckYm%2F-LWVOGRe3pWLKhUNWYOx%2Frow_column_04.png?alt=media\&token=2f8434ac-3b90-45f4-ad65-97631a1e46c0)

## crossAxisAlignment

The direction of this parameter is the perpendicular with the `mainAxisAlignment`. You can see the relationship between them.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWWYE9jxxlOw3WWRjSr%2F-LWWbfPrBrzIhVBtptoE%2Frow_column_05.png?alt=media\&token=b995a42a-13a1-41a0-98bd-904ead4a1b5f)

The `crossAxisAlignment` has many types, let's look at the code.

First, we create a function with one param,they have the same `Text`.&#x20;

```dart

  Widget _crossAlign(crossAxisAlignment) => Container(
        color: BLUE_LIGHT,
        height: 80.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: crossAxisAlignment,
          textBaseline: TextBaseline.ideographic,
          children: <Widget>[
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
          ],
        ),
      );
```

Because of our `CrossAxisAlignment.baseline` need to use with **`textBaseline`**, so we create a new one for it.

```dart
 Widget _crossBaseline(crossAxisAlignment, TextBaseline baseline) => Container(
        color: BLUE_LIGHT,
        height: 80.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: crossAxisAlignment,
          textBaseline: baseline,
          children: <Widget>[
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
            Text(
              "Flutter",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
            ),
          ],
        ),
      );
```

Then, we can use both of them.

```dart
 Widget _crossAlignAll() => Column(
        children: <Widget>[
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "CrossAxisAlignment.center",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _crossAlign(CrossAxisAlignment.center),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "CrossAxisAlignment.end",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _crossAlign(CrossAxisAlignment.end),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "CrossAxisAlignment.start",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _crossBaseline(CrossAxisAlignment.start, null),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "CrossAxisAlignment.baseline.ideographic",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _crossBaseline(CrossAxisAlignment.baseline, TextBaseline.ideographic),
          SizedBox(height: 10),
          Container(
            alignment: Alignment.topLeft,
            child: Text(
              "CrossAxisAlignment.stretch",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ),
          _crossBaseline(CrossAxisAlignment.stretch, null)
        ],
      );
```

You can see the result.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWWYE9jxxlOw3WWRjSr%2F-LWWdfAijF7Eb6Zh65Ji%2Frow_column_06.png?alt=media\&token=e66d9320-701b-4cab-b6f7-4fd3f3765d52)

## mainAxisSize

This parameter controls the space of the `Row/Column`, `MainAxisSize.min` set the space to min, `MainAxisSize.max` set the space to max. I define a function to use it.

```dart
Widget _mainSize(mainSize) => Container(
      color: mainSize == MainAxisSize.min ? YELLOW : RED_LIGHT,
      child: Row(
        mainAxisSize: mainSize,
        children: <Widget>[
          Text(
            "Nie",
            style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
          ),
          Text(
            "Nie",
            style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
          ),
          Text(
            "Nie",
            style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
          ),
          Text(
            "Nie",
            style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
          ),
        ],
      ));
```

Then use it.

```dart
    _mainSize(MainAxisSize.min),
    _mainSize(MainAxisSize.max),
```

The result is here.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWWYE9jxxlOw3WWRjSr%2F-LWWg0n2NUZ9Dw4txCq_%2Frow_column_07.png?alt=media\&token=0df47690-2fae-4c98-8273-b15bc2816ad8)

## verticalDirection

This parameter is just use in the vertical, it will control the direction of children widgets, so the column will be an example. I write a function to show this parameter.

```dart
 Widget _rowVertical(direct) => Container(
        color: direct == VerticalDirection.down ? BLUE_DEEP : GREEN,
        height: 100,
        child: Column(
          : direct,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
            ),
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
            ),
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
            Text(
              "bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ],
        ),
      );
```

Then, we can use it.

```dart
   _rowVertical(VerticalDirection.down),
   _rowVertical(VerticalDirection.up),
```

It shows as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWWYE9jxxlOw3WWRjSr%2F-LWWiqWSv2pJmYFrqUlD%2Frow_column_08.png?alt=media\&token=a98dfd7f-67ac-4eae-94d5-84f9c805aef7)

## textDirection

This parameter is similar with `verticalDirection`, but it is a bit different between them. The `textDirection` is used in the horizontal direction, but `verticalDirection` is used in the vertical direction.They both control the start direction of children widgets' drawing. So let's look at the code.

```dart
 Widget _rowDirection(textDirect) => Container(
        color: textDirect == TextDirection.ltr ? RED_LIGHT : PURPLE,
        child: Row(
          textDirection: textDirect,
          children: <Widget>[
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
            ),
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
            ),
            Text(
              "Bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
            Text(
              "bin",
              style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
            ),
          ],
        ),
      );
```

Then, use it.

```dart
_rowDirection(TextDirection.ltr),
_rowDirection(TextDirection.rtl),
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LWWYE9jxxlOw3WWRjSr%2F-LWWl4EzNs7eB6kQVq5I%2Frow_column_09.png?alt=media\&token=2c15d9e4-35ad-4a35-a29d-7ed31ece3dc9)

## Conclusion

Then, our tutorial about the `Row/Column` is done, we look at above, we will know that the main parameter is the `mainAxisAlignment`, `crossAxisAlignment`, if you understand them, the other will be easy to use. Hope you have some gain from this article.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | QQ Group  |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | 963828159 |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteropen.gitbook.io/flutter-widgets/flutter-open-flutter-widgets-04-row-and-column.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.