Flutter Design Beginning

📱 Designing Flutter UI with Row, Column, Expanded, and Container

Flutter offers powerful layout widgets that make UI design both flexible and beautiful. This post explains Row, Column, Expanded, Container, SizedBox, and more—each with explanations, usage tips, and official documentation links.

1️⃣ Row Widget – Horizontal Layout

👉 Row arranges widgets in a horizontal direction.


Row(
  children: [
    Text("Left"),
    SizedBox(width: 10), // adds space
    Text("Right"),
  ],
)

Use it when you want to place widgets side by side.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); // Entry point of the app, calls our custom StatelessWidget.
}

// This is a StatelessWidget which means it doesn't hold any state.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( // Root widget of the app using Material Design.
      title: 'Row with Text Example',
      home: Scaffold( // Provides structure: app bar, body, etc.
        appBar: AppBar(
          title: Text('Row Layout Demo'), // Title in the app bar.
        ),
        body: Center( // Centers its child widget (Row in this case).
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center, // Centers children horizontally.
            children: [
              Text(
                "Left", // First text widget.
                style: TextStyle(fontSize: 24, color: Colors.blue), // Styling the text.
              ),
              SizedBox(width: 10), // Adds horizontal spacing between the two texts.
              Text(
                "Right", // Second text widget.
                style: TextStyle(fontSize: 24, color: Colors.red), // Different styling.
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2️⃣ Column Widget – Vertical Layout

👉 Column arranges children vertically.


Column(
  children: [
    Text("Top"),
    SizedBox(height: 10), // adds vertical space
    Text("Bottom"),
  ],
)

It’s perfect for stacking widgets top to bottom.

3️⃣ Container – Styling, Spacing, Decoration

👉 Container lets you style, pad, color, align, and size your widgets.


Container(
  padding: EdgeInsets.all(16),
  margin: EdgeInsets.all(8),
  color: Colors.blue,
  child: Text("Styled Container", style: TextStyle(color: Colors.white)),
)

Useful for wrapping other widgets with styling and spacing.

4️⃣ SizedBox – Add Empty Space

👉 SizedBox creates fixed-size space between widgets.


SizedBox(width: 20) // adds horizontal space
SizedBox(height: 30) // adds vertical space

Cleaner than adding padding manually.

5️⃣ Expanded – Fill Remaining Space

👉 Expanded allows a child of Row/Column to take up remaining space.


Row(
  children: [
    Expanded(child: Container(color: Colors.red, height: 100)),
    Expanded(child: Container(color: Colors.green, height: 100)),
  ],
)

Each container gets equal horizontal space.

6️⃣ Flex with Expanded – Proportional Sizing


Row(
  children: [
    Expanded(flex: 1, child: Container(color: Colors.orange, height: 100)),
    Expanded(flex: 2, child: Container(color: Colors.purple, height: 100)),
  ],
)

The second container gets twice the width of the first.

7️⃣ Full-Width Containers using double.infinity

👉 double.infinity forces widgets to take full width or height.


Column(
  children: [
    Container(color: Colors.red, height: 100, width: double.infinity),
    Container(color: Colors.green, height: 100, width: double.infinity),
  ],
)

8️⃣ Nesting Row Inside Column


Column(
  children: [
    Text("Header"),
    Row(
      children: [
        Expanded(child: Container(color: Colors.yellow, height: 100)),
        Expanded(child: Container(color: Colors.orange, height: 100)),
      ],
    ),
    Text("Footer"),
  ],
)

Combining Row and Column allows for rich and complex UI designs.

9️⃣ Beautiful Card with Rounded Corners and Shadow

👉 BoxDecoration lets you style containers with borders, colors, shadows, and radius.


Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.teal,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 3,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Text("Fancy Card", style: TextStyle(color: Colors.white)),
)

Perfect for building UI cards or tiles.

🔟 Full-Screen Layout Using Column & Expanded


Column(
  children: [
    Expanded(flex: 2, child: Container(color: Colors.pink)),
    Expanded(flex: 3, child: Container(color: Colors.deepPurple)),
  ],
)

This divides the screen vertically in a 2:3 ratio.

🌟 Bonus: Full App Layout – Header, Content, Footer


Scaffold(
  appBar: AppBar(title: Text("Flutter Layout Demo")),
  body: Column(
    children: [
      Container(
        padding: EdgeInsets.all(8),
        color: Colors.amber,
        child: Text("Header", style: TextStyle(fontSize: 24)),
      ),
      Expanded(
        child: Row(
          children: [
            Expanded(child: Container(color: Colors.red)),
            Expanded(
              child: Column(
                children: [
                  Expanded(child: Container(color: Colors.green)),
                  Expanded(child: Container(color: Colors.blue)),
                ],
              ),
            ),
          ],
        ),
      ),
      Container(
        padding: EdgeInsets.all(8),
        color: Colors.black,
        child: Text("Footer", style: TextStyle(color: Colors.white)),
      ),
    ],
  ),
)

📋 Widget Reference Table

Widget	Description	Official Link
`Row`	Horizontal layout	Link
`Column`	Vertical layout	Link
`Container`	Decoration, padding, margin	Link
`SizedBox`	Fixed space	Link
`Expanded`	Flexible layout inside Row/Column	Link
`BoxDecoration`	Styling background, border, shadows	Link