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 a 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.

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 :

File: main.dart

import 'package:flutter/material.dart';

//function to trigger build
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),// ThemeData
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );// MaterialApp
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
      ),// AppBar
      // App body consists of single Row
      // Row consists of three children widgets
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "Geeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "For",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              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 the 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 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:

Example

import 'package:flutter/material.dart';

//function to trigger build
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksForGeeks',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ), // ThemeData
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    ); // MaterialApp
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("GeeksForGeeks"),
      ), // AppBar
      // App body consists of single Column
      // Column consists of three children widgets
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          ),
          Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10), color: Colors.green),
            child: const Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                "GeeksForGeeks",
                style: TextStyle(color: Colors.white, fontSize: 25),
              ),
            ),
          )
        ],
      ), // Column
    );
  }
}

Output:

Some more examples are :

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 that 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).

singh_teekam

Follow

Improve

Article Tags :

• Dart
• Flutter-Widgets