SizedBox and Padding in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a fixed space of 20 pixels height between widgets using SizedBox.

Flutter

SizedBox(height: [1]),

Drag options to blanks, or click blank then click option'

A0

B50

C10

D20

Attempts:

3 left

💡 Hint

Common Mistakes

Using width instead of height for vertical space.

Setting height to 0 which creates no space.

The height property of SizedBox sets the vertical space. Here, 20 pixels creates the fixed space.

2fill in blank

medium

Complete the code to add 16 pixels padding on all sides around a Text widget.

Flutter

Padding(padding: EdgeInsets.all([1]), child: Text('Hello')),

Drag options to blanks, or click blank then click option'

A8

B24

C16

D32

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets.symmetric instead of EdgeInsets.all for equal padding.

Using too small or too large padding values.

EdgeInsets.all(16) adds 16 pixels of padding on every side of the child widget.

3fill in blank

hard

Fix the error in the code to create horizontal space of 30 pixels using SizedBox.

Flutter

SizedBox(width: [1]),

Drag options to blanks, or click blank then click option'

A30

B'30'

C30.0

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around numbers causing type errors.

Passing null which causes runtime errors.

The width property expects a number without quotes. Using 30 (an integer) is correct.

4fill in blank

hard

Fill both blanks to add vertical padding of 10 and horizontal padding of 20 around a Container.

Flutter

Padding(padding: EdgeInsets.symmetric(vertical: [1], horizontal: [2]), child: Container()),

Drag options to blanks, or click blank then click option'

A10

B15

C20

D25

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping vertical and horizontal values.

Using EdgeInsets.all instead of symmetric for different padding.

EdgeInsets.symmetric takes vertical and horizontal values separately. Here, vertical is 10 and horizontal is 20 pixels.

5fill in blank

hard

Fill all three blanks to create a SizedBox with width 100, height 50, and a child Text widget.

Flutter

SizedBox(width: [1], height: [2], child: Text('[3]')),

Drag options to blanks, or click blank then click option'

A100

B50

CHello

DWorld

Attempts:

3 left

💡 Hint

Common Mistakes

Putting numbers inside quotes.

Using wrong text string or missing quotes around text.

The SizedBox sets width and height to 100 and 50 pixels respectively, and the child Text widget displays 'Hello'.

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