Press "Enter" to skip to content

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:

Flutter Row Alignment main axis default

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.

Flutter Row alignment main axis start

spaceBetween:

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

Flutter Row Alignment main axis space between

spaceEvenly:

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

Flutter Row Alignment main axis space evenly

spaceAround:

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

Flutter Row Alignment main axis spaceArround

center:

Items are aligned at center without space between them.

Flutter Row Alignment main axis center

end:

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

Flutter Row Alignment main axis end

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:

Flutter Column default design

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

Be First to Comment

Leave a Reply