Flutter Rows and Columns – Understanding Layouts , Design and Alignments

In Flutter, currently there is no toolkit for designing layouts for the application. So you need to create layout manually using codes. Actually creating layout design on flutter is easy and funny. So-many customization is possible with inbuilt properties and styles. Normally Rows, Columns, Container, Card, SizedBox, etc are using for aligning elements, most importantly Rows and Columns, because using rows and column we can design almost anything.

Rows and Columns:

Rows and Columns are the two major part on the flutter layout building. Without rows and column, then the design is almost nothing. In the concept of tables, rows are the horizontal lines and columns are the vertical lines or sections . In Flutter, there is a little change.

How to use Flutter Rows and Columns?

You can use Rows and Columns:

• As the child of a Container that we leant similar on previous lesson
• As the children of another rows or columns, etc.

Flutter Rows:

In Flutter, Rows are used for aligning items as horizontally. You don’t need to create separate rows for each items. Here each items inside a row are arranged horizontally.

child: Row( 
          children: <Widget>[
            Text("item 1"),
            Text("item 2"),
            Text("item 3"),
          ],
        )

Here the Row contains three children (the keyword ‘children’ is allowed once inside a row). And each item (children) should be arranged horizontally on the output screen.

Full code: (See the previous lesson to understand the full code)

import 'package:flutter/material.dart';

void main()
{
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
  }

class _MyAppState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("My App Title"),
      ),
      body: Container(
        child: Row( 
          children: <Widget>[
            Text("item 1"),
            Text("item 2"),
            Text("item 3"),
          ],
        )
      ),
    );
  }
}

Sample output:

Row Alignments

Here the three items are arranged horizontally but continuously, no gap or further alignments.

We can align the row children as MainAxis and CrossAxis. These alignments are written inside the Row widget.

Here let’s learn the MainAxis alignment for rows. Seven types of MainAxis alignments are there. Let’s see some of them:

start:

mainAxisAlignment: MainAxisAlignment.start,

Start is similar to default alignment. Items are alignment at the starting position. The output screen is more understandable than explanation.

spaceBetween:

Here first and last items alignments at starting and ending position respectively and remaining items are aligned between them with equal space.

spaceEvenly:

Here spaces are evenly placed between items also before and after of the first and last items respectively.

spaceAround:

Similar to spaceEvenly, but space on before and after the first and last items are the haft of the space between other items.

center:

Items are aligned at center without space between them.

end:

Similar to start, items are aligned at the end of the screen.

Full code for Row with spaceBetween alignment:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text("item 1"),
    Text("item 2"),
    Text("item 3"),
  ],
)

Flutter Columns:

Similar to Rows, Columns are used for aligning items vertically. You don’t need to create separate columns for each items and items inside a column are arranged vertically.

child: Row( 
          children: [
            Text("item 1"),
            Text("item 2"),
            Text("item 3"),
          ],
        )

Sample Output:

Column Alignments:

In the case of Columns, All Main Axis alignments are similar to rows but in vertical direction.

Example: spaceBetween for Column

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text("item 1"),
    Text("item 2"),
    Text("item 3"),
  ],
)

Sample Output:

Rows and Columns Together

You should use multiple columns, Rows, Containers, etc to get a well designed screen. You can use Row as a children of a column and vice verse.

Column(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text("Column item 1"),
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Text("Row item 1"),
                 Text("Row item 2"),
                 Text("Row item 3"),
               ],
             ),
             Text("Column item 3"),
           ],
         )

Sample Output:

Video Tutorial:

More design and alignments tutorials are on coming lessons