Flutter – Row and Column Widgets

Row and Column are the two most important and powerful widgets in Flutter. These widgets let you align children horizontally and vertically as per the requirement. As we know that when we design any UI(User Interface)  in flutter, we need to arrange its content in the Row and Column manner so these Row and Column widgets are required when designing UI. 

Constructor Of Column Class:

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>[]}
)


Constructor Of Row Class:

Row(
{Key key,
MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start,
MainAxisSize mainAxisSize: MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection: VerticalDirection.down,
TextBaseline textBaseline: TextBaseline.alphabetic,
List<Widget> children: const <Widget>[]}
)


Properties of Row and Column Widgets:

  • children: This property takes in List<Widget>, that is a list of widgets to display inside the Row or the Column widget.
  • clipBehaviour: This property holds Clip class as the object to decide whether the content on the Row or Column should be clipped or not.
  • crossAxisAlignment: The crossAxisAlignment takes in CrossAxisAlignment enum as the object to how the children’s widgets should be places in crossAxisAlignment. For Row it is vertical and for Column it is horizontal.
  • direction: This property holds as the Axis enum object to decide the direction used in the main axis. For Row and Column, it is fixed.
  • mainAxisAlignment: This property takes in MainAxisAlignment enum as the object to decide how the children widgets should be place in mainAxisAlignment. For Row it is horizontal and for Column it is vertical.
  • mainAxisSize: This property decides the size of main-axis by taking in MainAxisSize enum as the object.
  • runtimeType: This property tells the run-time type of the Row or Column widget.
  • textBaseline: This property is responsible for the alignment of the text in the Row or Column widget with respect to a baseline.
  • textDirection: This property controls the text direction of the Row or Column widget, which can either be from left-to-right (by default) or right-to-left.
  • verticalDirection: This property takes in VerticalDirection enum as the object to determine the order in which the children should be layered.

Row:

It creates a horizontal array of children.

Alignment Properties:

We can align content as per our choice by using mainAxisAlignment and crossAxisAlignment.  Row’s mainAxis is horizontal and cross Axis to Row’s main Axis is vertical. We can align children horizontally using MainAxisAlignment and vertically using CrossAxisAlignment in that row.

Apart from these mainAxisAlignment and crossAxisAlignment, we also have some other properties like mainAxisSize,textDirection,verticalDirection etc. but we will focus on these two(mainAxisAlignment and crossAxisAlignment) in this article as these are mostly used and others in some other article.

Row

We can align the content by using the following properties:



  • start : Place the children from the starting of the row.
  • end : Place the children at the end of the row.
  • center : Place the children at the center of the row.
  • spaceBetween : Place the space evenly between the children.
  • spaceAround :  Place the space evenly between the children and also half of that space before and after the first and last child.
  • spaceEvenly :  Place the space evenly between the children and also before and after the first and last child.

We will see the difference with the help of examples. Let’s suppose we want to align content such that there is space around the children in a row :

main.dart :

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
      ),
      body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children:<Widget>[
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("Geeks",style: TextStyle(color:Colors.white,fontSize:25),),
            ),
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("For",style: TextStyle(color:Colors.white,fontSize:25),),
            ),
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("Geeks",style: TextStyle(color:Colors.white,fontSize:25),),
            )
          ]
        ),
    );
  }
}

chevron_right


Output:

Column:

It creates a vertical array of children.

Alignment Properties:

In this also we have mainAxisAlignment and crossAxisAlignment. In column, children are aligned from top to bottom. Main Axis is vertical and the Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that Column.



Column

We can align the content by using the same properties as discussed above in Row (start, end,spaceBetween,spaceAround,spaceEvenly).

We will see the difference with the help of examples. Let’s suppose we want to align content so that we have space around the children . Assign mainAxisAlignment as spaceAround as shown below:

    Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children:<Widget>[
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("GeeksForGeeks",style: TextStyle(color:Colors.white,fontSize:25),),
            ),
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("GeeksForGeeks",style: TextStyle(color:Colors.white,fontSize:25),),
            ),
            Container(
              decoration:BoxDecoration(
                borderRadius:BorderRadius.circular(10),
                color:Colors.green
              ),
              child: Text("GeeksForGeeks",style: TextStyle(color:Colors.white,fontSize:25),),
            )
          ]
        ),





Output:

Some more examples are :

Row Column

mainAxisAlignment.spaceEvenly

mainAxisAlignment.spaceEvenly

mainAxisAlignment.center

mainAxisAlignment.center

mainAxisAlignment.spaceBetween

mainAxisAlignment.spaceBetween

We can also align content using combination of mainAxisAlignment and crossAxisAlignment for both Row and Column. Lets take an example of Row, set mainAxisAlignment as MainAxisAlignment.spaceAround and crossAxisAlignment as CrossAxisAlignment.stretch. By doing this(crossAxisAlignment.stretch), the height of the row will be equal to the height of the body because we have only one row.

Output:

Drawbacks :

  • The row has no horizontal scrolling so when a large number of children are inserted in a single row which is not able to fit in the row then it will give us an Overflow message (for ex: Right overflowed by 560px ).
  • The column has no vertical scrolling so when a large number of children are inserted in a single Column whose total children size is more than the total height of the screen then it will give us an Overflow message (for ex: Bottom overflowed by 684px).

You can also visit https://flutter.dev/  for more details.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

11


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.