Flutter Row and Column

Flutter Row and Column are two of the core widgets in the Flutter framework. They are used to create a layout structure that organizes and positions widgets within the UI. Rows and Columns are used to arrange widgets in a single line (row) or in multiple lines (column), and also to create a grid-like structure of multiple rows and columns.

Flutter Row and Column are widgets that have some common properties such as mainAxisAlignment and crossAxisAlignment. mainAxisAlignment defines how the widgets are aligned horizontally (for row) or vertically (for column). crossAxisAlignment defines how the widgets are aligned vertically (for row) or horizontally (for column).

In addition, Flutter Row and Column also have some unique properties. For example, Flutter Row has a textDirection property which defines the order of the widgets when using text-based columns and rows. Flutter Column has a mainAxisSize property which defines the width of the column.

Overall, Flutter Row and Column are core widgets in the Flutter framework and are used for creating complex layouts. By using the various properties, developers can easily create complex layouts with minimal effort.

Properties

Row widgets are used to display widgets in a horizontal manner while Column widgets are used to display widgets in a vertical manner. Both Row and Column have properties that can be used to customize their appearance.

The most common properties of both Row and Column are mainAxisAlignment, crossAxisAlignment, mainAxisSize, and crossAxisSize.

The crossAxisAlignment property

The crossAxisAlignment property in Flutter Row and Flutter Column determines how the children of the widget are positioned along the other axis, perpendicular to the main axis. For example, in a Flutter Row, the children are positioned along the vertical axis, and the crossAxisAlignment property determines how they are positioned along the horizontal axis.

The possible values for the crossAxisAlignment property are Start, Center, End, Stretch and Baseline.

• Start – Aligns the children of the widget to the start of the other axis, which is the left side of the screen in a Flutter Row and the top of the screen in a Flutter Column.
• Center – Aligns the children of the widget to the center of the other axis, which is the middle of the screen in a Flutter Row and the middle of the screen in a Flutter Column.
• End – Aligns the children of the widget to the end of the other axis, which is the right side of the screen in a Flutter Row and the bottom of the screen in a Flutter Column.
• Stretch – Stretches the children of the widget to fill the full length of the other axis.
• Baseline – Aligns the children of the widget to the baseline of the other axis. The baseline is an imaginary line along which text is aligned.

The mainAxisAlignment property

The mainAxisAlignment property in Flutter Row and Flutter Column defines how the children of the Row or Column should be positioned in the main axis, which is the horizontal axis for a Row and the vertical axis for a Column. The possible values are:

• MainAxisAlignment.start: Children are placed at the start of the main axis.
• MainAxisAlignment.end: Children are placed at the end of the main axis.
• MainAxisAlignment.center: Children are centered along the main axis.
• MainAxisAlignment.spaceBetween: Children are evenly distributed in the main axis with equal space between them.
• MainAxisAlignment.spaceAround: Children are evenly distributed in the main axis with half the space on either side of each child.
• MainAxisAlignment.spaceEvenly: Children are evenly distributed in the main axis with equal space around them.

The mainAxisSize property

The mainAxisSize property of Flutter Row and Flutter Column defines how much space should the widget occupy along the main axis. The value of this property can be either MainAxisSize.max, which will make the widget occupy as much space as possible along the main axis, or MainAxisSize.min, which will make the widget occupy only the space necessary to fit its children.

The crossAxisSize property

The crossAxisSize property in Flutter Row and Flutter Column is used to set the size of the widget in the cross axis of the layout. For Row, the cross axis is the horizontal axis and for Column, it is the vertical axis. The two possible values are MainAxisSize.max and MainAxisSize.min.

When MainAxisSize.max is set, the widget will take up all available space in the cross axis. This is the default value for both Row and Column.

When MainAxisSize.min is set, the widget will take up only the space it needs in the cross axis. This can be useful for ensuring a widget is not too wide or tall, if it is not necessary.

Example

Here is an example of how to use the Row and Column widgets with the given properties:

Code Example Flutter Row

Run demo: https://dartpad.dev/?id=eb244475035e5283b0137423b9e020a2

import 'package:flutter/material.dart';

/// https://codezi.pro/tutorial/flutter-row-and-column.html
/// Flutter Row  Example by CodeZi.pro
void main() => runApp(const MaterialApp(home: CodeZiDemoFlutterRow()));

class CodeZiDemoFlutterRow extends StatelessWidget {
  const CodeZiDemoFlutterRow({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Row  Example by CodeZi.pro'),
      ),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text(
                'Button 1',
                style: TextStyle(fontSize: 24),
              ),
            ),
            const SizedBox(width: 50,),
            ElevatedButton(
              onPressed: () {},
              child: const Text(
                "Button 2",
                style: TextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Code Example Flutter Column

Run demo: https://dartpad.dev/?id=4b7e856d92c04257c6bc5fa874c2d009

import 'package:flutter/material.dart';

/// https://codezi.pro/tutorial/flutter-row-and-column.html
/// Flutter Column Example by CodeZi.pro
void main() => runApp(const MaterialApp(home: CodeZiDemoFlutterColumn()));

class CodeZiDemoFlutterColumn extends StatelessWidget {
  const CodeZiDemoFlutterColumn({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Column Example by CodeZi.pro'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text("CodeZi.pro",style: TextStyle(fontSize: 36),),
            const SizedBox(width: 96,),
            ElevatedButton(
              onPressed: () {},
              child: const Text(
                'Button 1',
                style: TextStyle(fontSize: 24),
              ),
            ),
            const SizedBox(width: 50,),
            ElevatedButton(
              onPressed: () {},
              child: const Text(
                "Button 2",
                style: TextStyle(fontSize: 24),
              ),
            ),
          ],
        ),
      ),
    );
  }
}