Flutter Layout Widgets: Row, Column, and Stack with Examples

🌟 Flutter Layout Widgets: Row, Column, and Stack with Examples

✅ Introduction

Layout widgets in Flutter help you arrange and position your UI elements (buttons, texts, images, etc.) on the screen.

The three most commonly used layout widgets are:

Row
Column
Stack

✅ 1. Row Widget

Row places its children horizontally from left to right.

👉 Basic Syntax:

Row(
  children: <Widget>[
    // Your widgets here
  ],
)

👉 Example: Horizontal Button Row

import 'package:flutter/material.dart';

void main() {
  runApp(RowExampleApp());
}

class RowExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Row Example')),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(onPressed: () {}, child: Text('Button 1')),
              SizedBox(width: 10),
              ElevatedButton(onPressed: () {}, child: Text('Button 2')),
            ],
          ),
        ),
      ),
    );
  }
}

✅ 2. Column Widget

Column arranges its children vertically from top to bottom.

👉 Basic Syntax:

Column(
  children: <Widget>[
    // Your widgets here
  ],
)

👉 Example: Vertical Text List

import 'package:flutter/material.dart';

void main() {
  runApp(ColumnExampleApp());
}

class ColumnExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('First Item', style: TextStyle(fontSize: 18)),
              SizedBox(height: 10),
              Text('Second Item', style: TextStyle(fontSize: 18)),
              SizedBox(height: 10),
              Text('Third Item', style: TextStyle(fontSize: 18)),
            ],
          ),
        ),
      ),
    );
  }
}

✅ 3. Stack Widget

Stack allows you to place widgets on top of each other, like layers.

👉 Basic Syntax:

Stack(
  children: <Widget>[
    // Bottom-most widget
    // Widget on top
    // Another widget on top
  ],
)

👉 Example 1: Image with Text Overlay (Centered Text)

import 'package:flutter/material.dart';

void main() {
  runApp(StackCenterExample());
}

class StackCenterExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack - Center Overlay')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 250,
                height: 250,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: NetworkImage('https://via.placeholder.com/250'),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text(
                'Overlay Text',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  backgroundColor: Colors.black54,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: A placeholder image with semi-transparent text overlay at the center.

👉 Example 2: Stack with Positioned Widgets

import 'package:flutter/material.dart';

void main() {
  runApp(StackPositionedExample());
}

class StackPositionedExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stack - Positioned Example')),
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 250,
                height: 250,
                color: Colors.orange[300],
              ),
              Positioned(
                top: 20,
                left: 20,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.red,
                  child: Center(
                    child: Text(
                      'Top-Left',
                      style: TextStyle(color: Colors.white, fontSize: 10),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: 20,
                right: 20,
                child: Container(
                  width: 50,
                  height: 50,
                  color: Colors.green,
                  child: Center(
                    child: Text(
                      'Bottom-Right',
                      style: TextStyle(color: Colors.white, fontSize: 10),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

✅ Practical Uses of Stack:

Creating badges on images (like notification count)
Overlaying text on images
Fixed-position buttons inside a container

✅ Quick Comparison Table

Widget	Layout Direction	Example Usage
Row	Horizontal (Left to Right)	Button row, navigation menu
Column	Vertical (Top to Bottom)	Form fields, list items
Stack	Overlapping Layers	Image overlays, badges