SizedBox and Padding in Flutter - Mini App: Build & Ship

Build: SizedBox and Padding Demo

This screen shows how to use SizedBox to add space and Padding to add space inside a container around text.

Target UI

-------------------------
| SizedBox and Padding  |
|-----------------------|
|                       |
|  [Hello Flutter!]      |
|                       |
|                       |
|  [Click Me]            |
|                       |
-------------------------

Add a SizedBox with height 50 pixels between the title and the button.

Wrap the button text with Padding of 16 pixels on all sides.

Use a Container with a border around the button text.

Center all content vertically and horizontally.

Starter Code

Flutter

import 'package:flutter/material.dart';

class SizedBoxPaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizedBox and Padding'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Hello Flutter!'),
            // TODO: Add SizedBox here
            // TODO: Add Container with Padding and Text here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

class SizedBoxPaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SizedBox and Padding'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Hello Flutter!'),
            SizedBox(height: 50),
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blue),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Padding(
                padding: EdgeInsets.all(16),
                child: Text('Click Me'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We used SizedBox with a height of 50 pixels to add vertical space between the title text and the button container. This is like putting a spacer between two items.

The button text is wrapped inside a Padding widget with 16 pixels on all sides. This adds space inside the container around the text, so the text does not touch the border.

The Container has a blue border and rounded corners to visually separate the button area.

All widgets are centered vertically and horizontally using Center and Column with mainAxisSize: MainAxisSize.min to keep the content compact.

Final Result

Completed Screen

-------------------------
| SizedBox and Padding  |
|-----------------------|
|                       |
|  Hello Flutter!        |
|                       |
|                       |
|  +-----------------+  |
|  |   Click Me      |  |
|  +-----------------+  |
|                       |
-------------------------

The screen shows the title text 'Hello Flutter!' at the top center.

There is a noticeable space below the title created by SizedBox.

Below the space is a rectangular button with a blue border and padding around the text 'Click Me'.

All content is centered on the screen.

Stretch Goal

Add a SizedBox with width 20 pixels between two buttons side by side.

💡 Hint

Use a Row with two Containers each with Padding and place SizedBox(width: 20) between them.