Why layout widgets arrange child widgets in Flutter

Introduction

Layout widgets help place and organize child widgets on the screen. They decide where and how big each child should be.

When you want to put buttons side by side or stacked vertically.

When you need to center text or images on the screen.

When you want to create a grid of photos or items.

When you want to add space or padding around widgets.

When you want to control how widgets resize on different screen sizes.

Syntax

Flutter

LayoutWidget(
  children: [
    ChildWidget1(),
    ChildWidget2(),
  ],
)

Layout widgets usually take a list of child widgets inside a children property.

Each layout widget arranges children differently, like in a row, column, or grid.

Examples

This arranges children horizontally in a row.

Flutter

Row(
  children: [
    Text('Hello'),
    Icon(Icons.star),
  ],
)

This arranges children vertically in a column.

Flutter

Column(
  children: [
    Text('Top'),
    Text('Bottom'),
  ],
)

This centers a single child widget in the available space.

Flutter

Center(
  child: Text('Centered Text'),
)

Sample App

This app shows a star icon and text side by side in the center of the screen using a Row layout widget.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Layout Example')),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.star, size: 50, color: Colors.orange),
            SizedBox(width: 20),
            Text('Star Icon', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}

Important Notes

Layout widgets control the position and size of their children.

Using layout widgets well helps your app look good on all screen sizes.

Summary

Layout widgets arrange child widgets visually on the screen.

They help organize widgets horizontally, vertically, or in other patterns.

Choosing the right layout widget makes your app easy to build and look nice.