Column And Row Widget

Introduction of Column and Row Widget

In Flutter, the Column and Row widget are used for arranging child widgets in a horizontal (for Row) or vertical (for Column) direction. These widgets are part of the flex widgets family and provide a flexible way to create user interfaces.

Here’s a short explanation of some of the key properties:

‘Row’ Widget:

children: A list of widgets that are placed horizontally.

Row(
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
  ],
),

mainAxisAlignment: Determines how the children should be placed along the main axis (horizontally in the case of Row).

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Left'),
    Text('Right'),
  ],
),

crossAxisAlignment: Defines how the children should be aligned perpendicular to the main axis.

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Top'),
    Text('Bottom'),
  ],
),

‘Column’ Widget:

children: A list of widgets that are placed vertically.

Column(
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
  ],
),

mainAxisAlignment: Determines how the children should be placed along the main axis (vertically in the case of Column).

Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text('Top'),
    Text('Bottom'),
  ],
),

crossAxisAlignment: Defines how the children should be aligned perpendicular to the main axis.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Left'),
    Text('Right'),
  ],
),

Final Code: This is the final code with the combination of some above container widget properties.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Expanded(
            child: Container(
              color: Colors.deepPurple,
            ),
          ),
          Container(
            width: 100,
            height: 300,
            color: Colors.teal,
          ),
          Container(
            width: 100,
            height: 150,
            color: Colors.red,
          )
        ],
      ),
    );
  }
}

These are just a few properties that Column and Row widget provides. Both ‘Row’ and ‘Column’ are highly customizable and allow you to create complex layouts by combining them with other widgets and adjusting their properties based on your UI design requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM