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.
1
import "package:flutter/material.dart";
2
import 'package:flutter_widgets/const/page_name_const.dart';
3
​
4
class RowColumnPage extends StatefulWidget {
5
@override
6
_RowColumnState createState() => _RowColumnState();
7
}
8
​
9
class _RowColumnState extends State<RowColumnPage> {
10
@override
11
Widget build(BuildContext context) {
12
return Scaffold(
13
appBar: AppBar(
14
title: Text(PageName.ROW_COLUMN),
15
),
16
body: SingleChildScrollView(
17
child: Column(
18
mainAxisAlignment: MainAxisAlignment.start,
19
children: <Widget>[
20
//our code here.
21
],
22
),
23
),
24
);
25
}
26
}
Copied!
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.1
Column(
2
mainAxisAlignment: MainAxisAlignment.start,
3
children: <Widget>[
4
//our code here.
5
Text(
6
"Welcome to Flutter Open.",
7
style: TextStyle(fontSize: TEXT_LARGE, color: GREEN),
8
),
9
Text(
10
"The developer is NieBin who is from China.",
11
style: TextStyle(fontSize: TEXT_NORMAL, color: BLUE_DEEP),
12
)
13
],
14
),
Copied!
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
1
Row({
2
Key key,
3
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
4
MainAxisSize mainAxisSize = MainAxisSize.max,
5
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
6
TextDirection textDirection,
7
VerticalDirection verticalDirection = VerticalDirection.down,
8
TextBaseline textBaseline,
9
List<Widget> children = const <Widget>[],
10
})
Copied!
Column
1
Column({
2
Key key,
3
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
4
MainAxisSize mainAxisSize = MainAxisSize.max,
5
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
6
TextDirection textDirection,
7
VerticalDirection verticalDirection = VerticalDirection.down,
8
TextBaseline textBaseline,
9
List<Widget> children = const <Widget>[],
10
})
Copied!
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).1
Widget _rowMainAlign(mainAxisAlignment) => Container(
2
color: RED,
3
height: 50,
4
child: Row(
5
mainAxisAlignment: mainAxisAlignment,
6
children: <Widget>[
7
Text(
8
"Open",
9
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
10
),
11
Text(
12
"Open",
13
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
14
),
15
Text(
16
"Open",
17
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
18
),
19
Text(
20
"Open",
21
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
22
),
23
],
24
),
25
);
Copied!
Then, use a function to show all types of the
MainAxisAlignment.1
Widget _rowMainAlignAll() => Column(
2
children: <Widget>[
3
SizedBox(height: 10),
4
Container(
5
alignment: Alignment.topLeft,
6
child: Text(
7
"MainAxisAlignment.start",
8
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
9
),
10
),
11
_rowMainAlign(MainAxisAlignment.start),
12
SizedBox(height: 10),
13
Container(
14
alignment: Alignment.topLeft,
15
child: Text(
16
"MainAxisAlignment.center",
17
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
18
),
19
),
20
_rowMainAlign(MainAxisAlignment.center),
21
SizedBox(height: 10),
22
Container(
23
alignment: Alignment.topLeft,
24
child: Text(
25
"MainAxisAlignment.end",
26
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
27
),
28
),
29
_rowMainAlign(MainAxisAlignment.end),
30
SizedBox(height: 10),
31
Container(
32
alignment: Alignment.topLeft,
33
child: Text(
34
"MainAxisAlignment.spaceBetween",
35
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
36
),
37
),
38
_rowMainAlign(MainAxisAlignment.spaceBetween),
39
SizedBox(height: 10),
40
Container(
41
alignment: Alignment.topLeft,
42
child: Text(
43
"MainAxisAlignment.spaceEvenly",
44
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
45
),
46
),
47
_rowMainAlign(MainAxisAlignment.spaceEvenly),
48
SizedBox(height: 10),
49
Container(
50
alignment: Alignment.topLeft,
51
child: Text(
52
"MainAxisAlignment.spaceAround",
53
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
54
),
55
),
56
_rowMainAlign(MainAxisAlignment.spaceAround),
57
],
58
);
Copied!
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. 1
​
2
Widget _crossAlign(crossAxisAlignment) => Container(
3
color: BLUE_LIGHT,
4
height: 80.0,
5
child: Row(
6
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
7
crossAxisAlignment: crossAxisAlignment,
8
textBaseline: TextBaseline.ideographic,
9
children: <Widget>[
10
Text(
11
"Flutter",
12
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
13
),
14
Text(
15
"Flutter",
16
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
17
),
18
Text(
19
"Flutter",
20
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
21
),
22
Text(
23
"Flutter",
24
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
25
),
26
],
27
),
28
);
Copied!
Because of our
CrossAxisAlignment.baseline need to use with textBaseline, so we create a new one for it.1
Widget _crossBaseline(crossAxisAlignment, TextBaseline baseline) => Container(
2
color: BLUE_LIGHT,
3
height: 80.0,
4
child: Row(
5
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
6
crossAxisAlignment: crossAxisAlignment,
7
textBaseline: baseline,
8
children: <Widget>[
9
Text(
10
"Flutter",
11
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
12
),
13
Text(
14
"Flutter",
15
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
16
),
17
Text(
18
"Flutter",
19
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
20
),
21
Text(
22
"Flutter",
23
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
24
),
25
],
26
),
27
);
Copied!
Then, we can use both of them.
1
Widget _crossAlignAll() => Column(
2
children: <Widget>[
3
SizedBox(height: 10),
4
Container(
5
alignment: Alignment.topLeft,
6
child: Text(
7
"CrossAxisAlignment.center",
8
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
9
),
10
),
11
_crossAlign(CrossAxisAlignment.center),
12
SizedBox(height: 10),
13
Container(
14
alignment: Alignment.topLeft,
15
child: Text(
16
"CrossAxisAlignment.end",
17
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
18
),
19
),
20
_crossAlign(CrossAxisAlignment.end),
21
SizedBox(height: 10),
22
Container(
23
alignment: Alignment.topLeft,
24
child: Text(
25
"CrossAxisAlignment.start",
26
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
27
),
28
),
29
_crossBaseline(CrossAxisAlignment.start, null),
30
SizedBox(height: 10),
31
Container(
32
alignment: Alignment.topLeft,
33
child: Text(
34
"CrossAxisAlignment.baseline.ideographic",
35
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
36
),
37
),
38
_crossBaseline(CrossAxisAlignment.baseline, TextBaseline.ideographic),
39
SizedBox(height: 10),
40
Container(
41
alignment: Alignment.topLeft,
42
child: Text(
43
"CrossAxisAlignment.stretch",
44
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
45
),
46
),
47
_crossBaseline(CrossAxisAlignment.stretch, null)
48
],
49
);
Copied!
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.1
Widget _mainSize(mainSize) => Container(
2
color: mainSize == MainAxisSize.min ? YELLOW : RED_LIGHT,
3
child: Row(
4
mainAxisSize: mainSize,
5
children: <Widget>[
6
Text(
7
"Nie",
8
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
9
),
10
Text(
11
"Nie",
12
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
13
),
14
Text(
15
"Nie",
16
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
17
),
18
Text(
19
"Nie",
20
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_NORMAL),
21
),
22
],
23
));
Copied!
Then use it.
1
_mainSize(MainAxisSize.min),
2
_mainSize(MainAxisSize.max),
Copied!
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.
1
Widget _rowVertical(direct) => Container(
2
color: direct == VerticalDirection.down ? BLUE_DEEP : GREEN,
3
height: 100,
4
child: Column(
5
: direct,
6
mainAxisSize: MainAxisSize.max,
7
children: <Widget>[
8
Text(
9
"Bin",
10
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
11
),
12
Text(
13
"Bin",
14
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
15
),
16
Text(
17
"Bin",
18
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
19
),
20
Text(
21
"bin",
22
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
23
),
24
],
25
),
26
);
Copied!
Then, we can use it.
1
_rowVertical(VerticalDirection.down),
2
_rowVertical(VerticalDirection.up),
Copied!
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.1
Widget _rowDirection(textDirect) => Container(
2
color: textDirect == TextDirection.ltr ? RED_LIGHT : PURPLE,
3
child: Row(
4
textDirection: textDirect,
5
children: <Widget>[
6
Text(
7
"Bin",
8
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
9
),
10
Text(
11
"Bin",
12
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_SMALL),
13
),
14
Text(
15
"Bin",
16
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
17
),
18
Text(
19
"bin",
20
style: TextStyle(color: TEXT_BLACK, fontSize: TEXT_LARGE),
21
),
22
],
23
),
24
);
Copied!
Then, use it.
1
_rowDirection(TextDirection.ltr),
2
_rowDirection(TextDirection.rtl),
Copied!
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.
Facebook Page
Twitter
GitHub
QQ Group
​
Last modified 2yr ago