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.

Practice

1. What does the SizedBox widget do in Flutter?

easy

A. It adds space inside a widget around its content.

B. It creates a box with a fixed width and height.

C. It changes the color of a widget.

D. It handles user input events.

Solution

1. Step 1: Understand SizedBox purpose

   SizedBox is used to create a box with fixed width and height to control space.

2. Step 2: Compare with Padding

   Padding adds space inside a widget, not fixes size.

3. Final Answer:

   It creates a box with a fixed width and height. -> Option B

4. Quick Check:

   SizedBox fixes size = A [OK]

Hint: SizedBox fixes size; Padding adds inner space [OK]

Common Mistakes:

• Confusing Padding with SizedBox
• Thinking SizedBox adds inner space
• Assuming SizedBox changes color

2. Which of the following is the correct syntax to add 20 pixels of padding on all sides of a widget?

easy

A. Padding(padding: EdgeInsets.all(20), child: Text('Hello'))

B. SizedBox(padding: EdgeInsets.all(20), child: Text('Hello'))

C. Padding(margin: EdgeInsets.all(20), child: Text('Hello'))

D. SizedBox(width: 20, height: 20, child: Text('Hello'))

Solution

1. Step 1: Identify Padding syntax

   Padding uses padding: EdgeInsets.all(value) to add space inside.

2. Step 2: Check other options

   SizedBox does not have padding property; margin is not valid in Padding widget.

3. Final Answer:

   Padding(padding: EdgeInsets.all(20), child: Text('Hello')) -> Option A

4. Quick Check:

   Padding with EdgeInsets.all = B [OK]

Hint: Padding uses EdgeInsets.all for uniform space [OK]

Common Mistakes:

• Using SizedBox with padding property
• Confusing margin with padding
• Using SizedBox to add padding

3. What will be the size of the red box on screen in this code?

SizedBox(
  width: 100,
  height: 50,
  child: Container(color: Colors.red),
)

medium

A. Zero size because no child size set

B. Size depends on Container's content

C. Full screen size

D. 100 pixels wide and 50 pixels tall

Solution

1. Step 1: Understand SizedBox effect

   SizedBox fixes the child's size to width 100 and height 50 pixels.

2. Step 2: Container inside SizedBox

   Container will fill the SizedBox size, so red box is 100x50 pixels.

3. Final Answer:

   100 pixels wide and 50 pixels tall -> Option D

4. Quick Check:

   SizedBox fixes size = A [OK]

Hint: SizedBox sets fixed size regardless of child content [OK]

Common Mistakes:

• Thinking Container size controls box size
• Assuming full screen size
• Believing zero size without explicit child size

4. Identify the error in this code snippet:

Padding(
  padding: EdgeInsets.symmetric(10),
  child: Text('Hello'),
)

medium

A. Missing comma after child widget

B. Padding widget cannot have Text as child

C. EdgeInsets.symmetric requires two parameters: horizontal and vertical

D. EdgeInsets.symmetric should be EdgeInsets.all

Solution

1. Step 1: Check EdgeInsets.symmetric parameters

   EdgeInsets.symmetric requires named parameters horizontal and/or vertical, not a single number.

2. Step 2: Validate other options

   Padding can have Text child; comma is present; EdgeInsets.all is different but not error.

3. Final Answer:

   EdgeInsets.symmetric requires two parameters: horizontal and vertical -> Option C

4. Quick Check:

   EdgeInsets.symmetric needs named params = C [OK]

Hint: EdgeInsets.symmetric needs horizontal and/or vertical named args [OK]

Common Mistakes:

• Passing single number to EdgeInsets.symmetric
• Confusing EdgeInsets.symmetric with EdgeInsets.all
• Thinking Padding can't wrap Text

5. You want to create a button with fixed width 150, height 50, and 10 pixels padding inside around the text. Which widget tree achieves this correctly?

hard

A. SizedBox(width: 150, height: 50, child: Padding(padding: EdgeInsets.all(10), child: Text('Click')))

B. SizedBox(width: 150, height: 50, child: Text('Click'))

C. Container(width: 150, height: 50, margin: EdgeInsets.all(10), child: Text('Click'))

D. Padding(padding: EdgeInsets.all(10), child: SizedBox(width: 150, height: 50, child: Text('Click')))

Solution

1. Step 1: Understand padding inside fixed size

   To have fixed outer size with padding inside around text, use SizedBox containing Padding containing Text. SizedBox constrains total to 150x50; Padding adds space within that.

2. Step 2: Analyze correct structure

   SizedBox(width: 150, height: 50, child: Padding(padding: EdgeInsets.all(10), child: Text('Click'))) fixes outer size, adds inner padding.

3. Step 3: Check other options

   SizedBox(width: 150, height: 50, child: Text('Click')) lacks padding; Container(width: 150, height: 50, margin: EdgeInsets.all(10), child: Text('Click')) adds margin outside (total larger), no inner padding; Padding(padding: EdgeInsets.all(10), child: SizedBox(width: 150, height: 50, child: Text('Click'))) adds padding outside fixed box (total 170x70), no inner padding.

4. Final Answer:

   SizedBox(width: 150, height: 50, child: Padding(padding: EdgeInsets.all(10), child: Text('Click'))) -> Option A

5. Quick Check:

   SizedBox containing Padding = A [OK]

Hint: Padding inside SizedBox for fixed size with inner space [OK]

Common Mistakes:

• Putting SizedBox inside Padding (adds outer space)
• Using Container with margin
• Forgetting to add padding