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.