flutter-tutorial

Flutter Row and Column

The two most important and powerful widgets in Flutter are Row and Column. These widgets allow you to arrange children horizontally and vertically as needed. Because we need to arrange content in the Row and Column manner while developing any UI (User Interface) in flutter, these Row and Column widgets are essential when designing UI.

Row

It results in a horizontal array of children.

Alignment Properties: Using mainAxisAlignment and crossAxisAlignment, we can align information to our liking. The main axis of Row is horizontal, and the cross axis of Row is vertical. In that row, we may use MainAxisAlignment to align children horizontally and CrossAxisAlignment to position children vertically.

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.
  • Between: Place the space evenly between the children.
  • Around:  Place the space evenly between the children and also half of that space before and after the first and last child.
  • Evenly:  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 :

Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learn Code Zone',
      home: _RowExample(),
    );
  }
}

class _RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Learn Code Zone'),
      ),
      body: Container(
        height: 100,
        color: Color.fromARGB(100, 200, 200, 200),
        child: Row(
          children: [
            FlutterLogo(
              size: 50,
            ),
            Expanded(
              child: const Text('Best Flutter Tutorial',
                  style: const TextStyle(color: Colors.teal)),
            ),
            Icon(Icons.widgets),
          ],
        ),
      ),
    );
  }
}

Column

It results in a vertical array of kids.

Alignment Properties: We have mainAxisAlignment and crossAxisAlignment here as well. Children are arranged in a column from top to bottom. The Cross Axis is horizontal and the Main Axis is vertical. In that Column, MainAxisAlignment aligns its children vertically, whereas CrossAxisAlignment aligns them horizontally.

The same properties that we mentioned in Row can be used to align the content (start, end,spaceBetween,spaceAround,spaceEvenly).

With the use of examples, we will be able to see the difference. Let’s say we want to position the information so that there is room around the kids. Assign spaceAround to mainAxisAlignment as seen below:

Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Learn Code Zone',
      home: _ColumnExample(),
    );
  }
}

class _ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Learn Code Zone'),
      ),
      body: Container(
        width: 300,
        color: Color.fromARGB(100, 200, 200, 200),
        child: Column(
          children: [
            FlutterLogo(
              size: 50,
            ),
            Expanded(
              child: Container(
                width: double.infinity,
                color: Colors.teal,
                child: Center(
                  child: const Text(
                    'Best Flutter Tutorial',
                    style: const TextStyle(color: Colors.white, fontSize: 30),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
            Icon(Icons.widgets),
          ],
        ),
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.