Flutter Row and Column

In the previous sections, we have learned to create a simple Flutter application and its
basic styling to the widgets. Now, we are going to learn how to arrange the widgets
in rows and columns on the screen. The rows and columns are not a single widget;
they are two different widgets, namely Row and Column. Here, we will integrate these
two widgets together because they have similar properties that help us understand
them efficiently and quickly.

Row and column are the two essential widgets in Flutter that allows developers
to align children horizontally and vertically according to our needs. These widgets
are very necessary when we design the application user interface in Flutter.

Key Points
1. Row and Column widgets are the most commonly used layout patterns in the
Flutter application.
2. Both may take several child widgets.
3. A child widget can also be a row or column widget.
4. We can stretch or constrain a particular children's widget.
5. Flutter also allows developers to specify how child widgets can use row and
column widgets' available space.

Row Widget
This widget arranges its children in a horizontal direction on the screen. In other
words, it will expect child widgets in a horizontal array. If the child widgets need to fill
the available horizontal space, we must wrap the children widgets in an Expanded
widget.

A row widget does not appear scrollable because it displays the widgets within the
visible view. So it is considered wrong if we have more children in a row which will not
fit in the available space. If we want to make a scrollable list of row widgets, we need
to use the ListView widget.

We can control how a row widget aligns its children based on our choice using the
property crossAxisAlignment and mainAxisAlignment. The row's cross-axis will
run vertically, and the main axis will run horizontally. See the below visual
representation to understand it more clearly.
 Note: Flutter row widget has several other properties like mainAxisSize, textDirection,
verticalDirection, etc. Here, we will discuss only mainAxisAlignment and
crossAxisAlignment properties.

We can align the row's children widget with the help of the following properties:

ADVERTISEMENT

o start: It will place the children from the starting of the main axis.
o end: It will place the children at the end of the main axis.
o center: It will place the children in the middle of the main axis.
o spaceBetween: It will place the free space between the children evenly.
o spaceAround: It will place the free space between the children evenly and half
of that space before and after the first and last children widget.
o spaceEvenly: It will place the free space between the children evenly and before
and after the first and last children widget.

Let us understand it with the help of an example where we are going to align the
content such that there is an even space around the children in a row:

1. import 'package:flutter/material.dart';
2.
3. void main() { runApp(MyApp()); }
4. class MyApp extends StatelessWidget {
5. @override
6. Widget build(BuildContext context) {
7. return MaterialApp(
8. home: MyHomePage()
9. );
10. }
11. }
12.
13. class MyHomePage extends StatefulWidget {
14. @override
15. _MyHomePageState createState() => _MyHomePageState();
16. }
17.
18. class _MyHomePageState extends State<MyHomePage> {
19. @override
20. Widget build(BuildContext context) {
21. return Scaffold(
22. appBar: AppBar(
23. title: Text("Flutter Row Example"),
24. ),
25. body: Row(
26. mainAxisAlignment: MainAxisAlignment.spaceEvenly,
27. children:<Widget>[
28. Container(
29. margin: EdgeInsets.all(12.0),
30. padding: EdgeInsets.all(8.0),
31. decoration:BoxDecoration(
32. borderRadius:BorderRadius.circular(8),
33. color:Colors.green
34. ),
35. child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
36. ),
37. Container(
38. margin: EdgeInsets.all(15.0),
39. padding: EdgeInsets.all(8.0),
40. decoration:BoxDecoration(
41. borderRadius:BorderRadius.circular(8),
42. color:Colors.green
43. ),
44. child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
45. ),
46. Container(
47. margin: EdgeInsets.all(12.0),
48. padding: EdgeInsets.all(8.0),
49. decoration:BoxDecoration(
50. borderRadius:BorderRadius.circular(8),
51. color:Colors.green
52. ),
53. child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),
54. )
55. ]
56. ),
57. );
58. }
59. }

Output:

When we run this app, we should get the UI as the below screenshot.

Column
 This widget arranges its children in a vertical direction on the screen. In other
words, it will expect a vertical array of children widgets. If the child widgets need to fill
the available vertical space, we must wrap the children widgets in an Expanded widget.

A column widget does not appear scrollable because it displays the widgets within
the visible view. So it is considered wrong if we have more children in a column which
will not fit in the available space. If we want to make a scrollable list of column widgets,
we need to use the ListView Widget.

We can also control how a column widget aligns its children using the property
mainAxisAlignment and crossAxisAlignment. The column's cross-axis will
run horizontally, and the main axis will run vertically. The below visual
representation explains it more clearly.

Note: Column widget also aligns its content by using the same properties as we have
discussed in row widget such as start, end, center, spaceAround, spaceBetween, and
spaceEvenly.

Let us understand it with the help of an example where we are going to align the
content such that there is a free space between the children evenly in a column:

1. import 'package:flutter/material.dart';
2.
3. void main() { runApp(MyApp()); }
4. class MyApp extends StatelessWidget {
5. @override
6. Widget build(BuildContext context) {
7. return MaterialApp(
8. home: MyHomePage()
9. );
10. }
11. }
12.
13. class MyHomePage extends StatefulWidget {
14. @override
15. _MyHomePageState createState() => _MyHomePageState();
16. }
17.
18. class _MyHomePageState extends State<MyHomePage> {
19. @override
20. Widget build(BuildContext context) {
21. return Scaffold(
22. appBar: AppBar(
23. title: Text("Flutter Column Example"),
24. ),
25. body: Column(
26. mainAxisAlignment: MainAxisAlignment.spaceBetween,
27. children:<Widget>[
28. Container(
29. margin: EdgeInsets.all(20.0),
30. padding: EdgeInsets.all(12.0),
31. decoration:BoxDecoration(
32. borderRadius:BorderRadius.circular(8),
33. color:Colors.red
34. ),
35. child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
36. ),
37. Container(
38. margin: EdgeInsets.all(20.0),
39. padding: EdgeInsets.all(12.0),
40. decoration:BoxDecoration(
41. borderRadius:BorderRadius.circular(8),
42. color:Colors.red
43. ),
44. child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
45. ),
46. Container(
47. margin: EdgeInsets.all(20.0),
48. padding: EdgeInsets.all(12.0),
49. decoration:BoxDecoration(
50. borderRadius:BorderRadius.circular(8),
51. color:Colors.red
52. ),
53. child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),
54. )
55. ]
56. ),
57. );
58. }
59. }

Output:

When we run this app, we should get the UI as the below screenshot.
Flutter also allows developers to align the child widget with a combination of
crossAxisAlignment and mainAxisAlignment for both row and column widget.
Let us take the above example of column widget where we will set mainAxisAlignment
as MainAxisAlignment.spaceAround and crossAxisAlignment is
CrossAxisAlignment.stretch. It will make the height of the column is equal to the height
of the body. See the below screenshot.

Drawbacks OF Row and Column Widget:

o Row widget in Flutter does not have horizontal scrolling. So if we have inserted
a large number of children in a single row that cannot be fit in that row, we will
see the Overflow message.
o Column widget in Flutter does not have vertical scrolling. So if we have inserted
a large number of children in a single column whose total children size is not
equal to the height of the screen, we will see the Overflow message.