SizedBox and Padding in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter widget tree?

Consider this Flutter code snippet. What will you see on the screen?

Flutter

Column(
  children: [
    SizedBox(width: 100, height: 50, child: Container(color: Colors.red)),
    Padding(padding: EdgeInsets.all(20), child: Container(width: 50, height: 50, color: Colors.blue))
  ]
)

A A red box 100x50 pixels overlapping a blue box 50x50 pixels

B A red box 100x50 pixels, then a blue box 90x90 pixels with padding inside

C Only a red box 100x50 pixels is visible; blue box is hidden

D A red box 100x50 pixels, then a blue box 50x50 pixels with 20 pixels space around it

💡 Hint

Remember that Padding adds space outside its child, while SizedBox sets fixed size.

SizedBox sets the size of its child container exactly. Padding adds empty space around its child, so the blue box remains 50x50 but has 20 pixels space around it.

❓ lifecycle

intermediate

How does Padding affect layout during Flutter widget rebuild?

If you change the padding value dynamically in a StatefulWidget, what happens to the layout?

A Padding does not change until app restart

B Padding causes a runtime error if changed dynamically

C The widget rebuilds and the padding space updates immediately

D Padding value changes but layout stays the same

💡 Hint

Think about how Flutter rebuilds widgets on state change.

When padding changes and setState is called, Flutter rebuilds the widget tree and updates the layout immediately to reflect new padding.

📝 Syntax

advanced

Which option correctly uses SizedBox to add vertical space between widgets?

You want to add 30 pixels of vertical space between two Text widgets. Which code is correct?

Flutter

Column(
  children: [
    Text('Hello'),
    // Add vertical space here
    Text('World')
  ]
)

A SizedBox(height: 30),

B SizedBox(width: 30),

C Padding(padding: EdgeInsets.symmetric(horizontal: 30)),

D Container(margin: EdgeInsets.all(30)),

💡 Hint

Vertical space means height, not width.

SizedBox with height adds vertical space. Width adds horizontal space. Padding with horizontal adds side space, not vertical. Container margin adds space around container but not specifically vertical between widgets.

🔧 Debug

advanced

Why does this Padding widget not add space around the child?

Given this code, why is there no visible space around the Text widget? Padding(padding: EdgeInsets.zero, child: Text('Hi'))

A Because EdgeInsets.zero means no padding is applied

B Because Padding requires a Container child to work

C Because Text widget ignores Padding always

D Because Padding only works with SizedBox children

💡 Hint

Check the padding value used.

EdgeInsets.zero means zero padding, so no space is added around the child widget.

🧠 Conceptual

expert

What is the difference between SizedBox and Padding in Flutter layout?

Choose the best explanation of how SizedBox and Padding differ in affecting widget size and layout.

A SizedBox adds empty space around child; Padding forces child to fixed size

B SizedBox forces its child to a fixed size; Padding adds empty space around its child without changing child's size

C Both SizedBox and Padding force child to fixed size but Padding adds color

D SizedBox and Padding both only add margin outside the child widget

💡 Hint

Think about size constraints vs spacing.

SizedBox sets exact width and height constraints on its child, changing child's size. Padding adds empty space around child but does not change child's size.

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