Row & Column Widgets

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.
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
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
http://www.w3.org/2000/svg
  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
http://www.w3.org/2000/svg
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).
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
 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. 
http://www.w3.org/2000/svg
​
  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.
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
    _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.
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
   _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.
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
_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.
Before Start

Simple Use

Constructor

Row

Column

mainAxisAlignment

crossAxisAlignment

mainAxisSize

verticalDirection

textDirection

Conclusion

Whole code in GitHub,star to support.

0 Comments

Recent Comments
