Widgets 04 | Row & Column

More detail about the row and column are in this tutorial.

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.

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.

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.

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),
            )
          ],
        ),

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

  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

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 theRow, But controls the vertical direction of the Column. Let's look at the picture with its types.

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).

 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.

 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.

crossAxisAlignment

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

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

First, we create a function with one param,they have the same Text.

  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.

 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.

 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.

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.

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.

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

The result is here.

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.

 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.

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

It shows as follows.

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.

 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.

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

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,star to support.

Facebook Page	Twitter	GitHub	QQ Group
Flutter Open	NieBin	NieBin	963828159