Row and Column Widgets in Flutter with Example

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 Row and Column manner so these Row and Column widgets are required when designing UI. 

Row:

It creates a horizontal array of children.

Alignment Properties:

We can alignment content as per our choice by using mainAxisAlignment and crossAxisAlignment.  Row’s mainAxis is horizontal and cross Axis to a 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.

We can align the content by using following properties:



  • start : Place the children from starting of row.
  • end : Place the children at the end of row.
  • center : Place the children at the center of 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 by the help of example. Lets suppose we want to align content such that there is space around the children in row :

main.dart :

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

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 Cross Axis is horizontal. MainAxisAlignment aligns its children vertically and CrossAxisAlignment aligns horizontally in that 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 by the help of example. Lets 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

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), height of row will be equal to height of body because we have only one row.

Output:

Drawbacks :

  • Row has no horizontal scrolling so when large number of children are inserted in single row which is not able to fit in the row then it will give us Overflow message (for ex: Right overflowed by 560px ).
  • Column has no vertical scrolling so when large number of children are inserted in single Column whose total children size is more than total height of screen then it will give us 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.


Article Tags :

10


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