Day 4 - Master Flutter Layouts | Column, Row, Stack & Container Explained

Day 4 - Understanding Flutter Layouts

Welcome to Day 4 of our Flutter series! Today, we’re going to explore another key concept in Flutter development: Layouts. How you structure your app’s user interface is essential for delivering a smooth, user-friendly experience. Flutter provides a flexible and powerful layout system that allows you to create beautiful interfaces quickly and easily.

Why Flutter Layouts Matter?

In Flutter, widgets not only represent the visual elements but also the layout of those elements. Layout widgets help you arrange other widgets on the screen, making sure your app adapts to different screen sizes and orientations.

Common Layout Widgets:

1. Column: Used to arrange widgets vertically.

Column(
  children: <Widget>[
    Text('This is a vertical layout'),
    Icon(Icons.star),
  ],
)

2. Row: Used to arrange widgets horizontally.

Row(
  children: <Widget>[
    Text('This is a horizontal layout'),
    Icon(Icons.star),
  ],
)

3. Container: A versatile widget that can contain other widgets and apply padding, margins, and decoration.

Container(
  padding: EdgeInsets.all(10),
  color: Colors.blue,
  child: Text('This is a container'),
)

4. Stack: Allows widgets to overlap on top of one another.

Stack(
  children: <Widget>[
    Container(color: Colors.blue, height: 100, width: 100),
    Container(color: Colors.red, height: 50, width: 50),
  ],
)

Example Code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Day 4 - Flutter Layouts'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Column Layout'),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.star, color: Colors.blue),
                  Text(' Row Layout'),
                ],
              ),
              Container(
                padding: EdgeInsets.all(10),
                color: Colors.green,
                child: Text('Container Layout'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion:

Flutter layouts give you complete control over how your app looks and behaves across different devices. Start playing around with Row, Column, and Container to create stunning interfaces for your apps!