Brand

Flutter Row and Column

In the previous sections, we have learned to container widget and its decorations. Now, we are going to learn how to arrange widgets in the ui using Rows and Columns.

Row and column are the two widgets in Flutter which allows developers to align children horizontally and vertically. These widgets are used to design the user interface in Flutter.

Key Points

  1. Row and Column widgets are the most used layout in Flutter.
  2. Both may take several childrens widgets.
  3. A children widget can be a row or a column widget.

Row Widget

Row widget is used to arrange its children in the horizontal direction. We wrap the children widgets in an Expanded widget to take the complete horizontal space.

A row widget does not have scroll functionality by default. To add scroll we can wrap SingleChildScrollView or we can use ListView instead.

We can control the alignment of the row widget’s children based on our choice by using the properties crossAxisAlignment and mainAxisAlignment. The row’s cross-axis is in the vertical axis, and the main axis is horizontal. See the below visual.

flutter-main-axis

Row’s children widget can be align with the help of the following properties:
  • start: Childrens are placed at the start of the main axis.
  • end: Childrens are placed at the end of the main axis.
  • center: Childrens are placed in the middle of the main axis.
  • spaceBetween: Free space is placed between the children evenly.
  • spaceAround: Free space is added around the children evenly.
  • spaceEvenly: Free space is placed between the children evenly and before and after the first and last children widget.

Let understand Row widget with its property using this example:

import 'package:flutter/material.dart';  
  
void main() { runApp(MyApp()); }  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage()  
    );  
  }  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _MyHomePageState createState() => _MyHomePageState();  
}  
  
class _MyHomePageState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flutter Row Example"),  
      ),  
      body: Row(  
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
          children:[  
            Container(  
              margin: EdgeInsets.all(12.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            ),  
            Container(  
              margin: EdgeInsets.all(15.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            ),  
            Container(  
              margin: EdgeInsets.all(12.0),  
              padding: EdgeInsets.all(8.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.green  
              ),  
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:25),),  
            )  
          ]  
      ),  
    );  
  }  
}
Output:

flutter-row-widget

Column

Column widget is used to arrange its children in the vertical direction. We wrap the children widgets in an Expanded widget to take the complete vertical space.

A row widget does not have scroll functionality by default. To add scroll we can wrap SingleChildScrollView or we can use ListView instead.

We can control the alignment of the column widget’s children based on our choice by using the properties crossAxisAlignment and mainAxisAlignment. The column’s cross-axis is in the horizontal axis, and the main axis is vertical. See the below visual.

flutter-column-axis

Let understand Column widget with its property using this example:

import 'package:flutter/material.dart';  
  
void main() { runApp(MyApp()); }  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
        home: MyHomePage()  
    );  
  }  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  _MyHomePageState createState() => _MyHomePageState();  
}  
  
class _MyHomePageState extends State {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text("Flutter Column Example"),  
      ),  
      body: Column(  
          mainAxisAlignment: MainAxisAlignment.spaceBetween,  
          children:[  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("React.js",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            ),  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("Flutter",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            ),  
            Container(  
              margin: EdgeInsets.all(20.0),  
              padding: EdgeInsets.all(12.0),  
              decoration:BoxDecoration(  
                  borderRadius:BorderRadius.circular(8),  
                  color:Colors.red  
              ),  
              child: Text("MySQL",style: TextStyle(color:Colors.yellowAccent,fontSize:20),),  
            )  
          ]  
      ),  
    );  
  }  
}
Output

flutter-column-widget

Drawbacks OF Row and Column Widget:
  • Row widget does not have horizontal scrolling. So we get an Overflow message. So we have to wrap it SIngleChildScrollView.
  • Column widget does not have vertical scrolling. So we get an Overflow message. So we have to wrap it SIngleChildScrollView.
Previous
Next