# 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 |