Container widget in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Container with a fixed width of 100 pixels.

Flutter

Container(width: [1], height: 50, color: Colors.blue)

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

Anull

Bdouble.infinity

C200

D100

Attempts:

3 left

💡 Hint

Common Mistakes

Using double.infinity sets width to fill available space, not fixed size.

Using null means no width constraint.

The width property sets the container's width. Using 100 sets it to 100 pixels wide.

2fill in blank

medium

Complete the code to add padding of 16 pixels inside the Container.

Flutter

Container(padding: EdgeInsets.[1](16), color: Colors.red)

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

Aall

Bsymmetric

Conly

Dzero

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets.zero means no padding.

EdgeInsets.symmetric requires two values, not one.

EdgeInsets.all(16) adds 16 pixels of padding on all sides inside the container.

3fill in blank

hard

Fix the error in the code to set a circular border radius of 12 pixels.

Flutter

Container(decoration: BoxDecoration(borderRadius: BorderRadius.[1](12)))

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

Acircular

Ball

Conly

Dvertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using BorderRadius.all expects Radius values, not Radius.circular inside.

BorderRadius.only requires named parameters for corners.

BorderRadius.circular(12) creates a border radius with 12 pixels on all corners.

4fill in blank

hard

Fill both blanks to create a Container with a blue background and a margin of 20 pixels on all sides.

Flutter

Container(margin: EdgeInsets.[1](20), decoration: BoxDecoration(color: Colors.[2]))

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

Aall

Bsymmetric

Cred

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of margin changes inside spacing, not outside.

Using Colors.red instead of blue changes the color.

EdgeInsets.all(20) adds margin of 20 pixels on all sides. Colors.blue sets the background color to blue.

5fill in blank

hard

Fill all three blanks to create a Container with width 150, height 150, and a green border of width 4.

Flutter

Container(width: [1], height: [2], decoration: BoxDecoration(border: Border.all(color: Colors.[3], width: 4)))

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

A100

B150

Cgreen

Dblue

Attempts:

3 left

💡 Hint

Common Mistakes

Using different values for width and height changes shape.

Using wrong color changes border color.

Setting width and height to 150 makes the container square. Border.all with Colors.green and width 4 creates a green border.

Practice

1. What is the primary purpose of the Container widget in Flutter?

easy

A. To manage app navigation between screens

B. To handle user input events like taps and swipes

C. To fetch data from the internet

D. To hold and style a single child widget with size, color, and padding

Solution

1. Step 1: Understand Container's role

   The Container widget is designed to hold one child widget and apply styling like size, color, padding, and margin.

2. Step 2: Compare with other options

   Navigation, data fetching, and input handling are done by other widgets or classes, not Container.

3. Final Answer:

   To hold and style a single child widget with size, color, and padding -> Option D

4. Quick Check:

   Container = styling box for one child [OK]

Hint: Container styles one child widget visually [OK]

Common Mistakes:

• Confusing Container with navigation widgets
• Thinking Container handles user input
• Assuming Container manages data fetching

2. Which of the following is the correct way to set a fixed width and height of 100 pixels for a Container?

easy

A. Container(constraints: BoxConstraints(width: 100, height: 100))

B. Container(size: Size(100, 100))

C. Container(width: 100.0, height: 100.0)

D. Container(dimensions: {width: 100, height: 100})

Solution

1. Step 1: Recall Container size properties

   Container uses width and height properties inside a BoxConstraints via constraints or directly in width and height parameters.

2. Step 2: Check syntax correctness

   Width and height expect double values, so 100.0 is correct. Other options use invalid syntax: no size property, constraints: BoxConstraints(width: 100, height: 100) is wrong as BoxConstraints uses minWidth/maxWidth, no dimensions.

3. Final Answer:

   Container(width: 100.0, height: 100.0) -> Option C

4. Quick Check:

   Width and height use double values [OK]

Hint: Use width and height as doubles for Container size [OK]

Common Mistakes:

• Using non-existent 'size' or 'dimensions' properties
• Using BoxConstraints with invalid 'width'/'height' parameters
• Confusing Container size with padding

3. What will be the background color of this Container?

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: Container(
    color: Colors.red,
    width: 50,
    height: 50,
  ),
)

medium

A. Blue background with a smaller red box inside

B. Red background with a smaller blue box inside

C. Only blue background visible, red ignored

D. Only red background visible, blue ignored

Solution

1. Step 1: Understand nested Containers

   The outer Container has a blue color and contains a smaller inner Container colored red with fixed size 50x50.

2. Step 2: Visualize layering

   The outer Container's blue color fills its area. The inner Container is smaller and red, so it appears as a red box inside the blue background.

3. Final Answer:

   Blue background with a smaller red box inside -> Option A

4. Quick Check:

   Outer color shows behind inner smaller Container [OK]

Hint: Inner Container overlays outer Container color [OK]

Common Mistakes:

• Thinking inner Container replaces outer color
• Assuming colors blend automatically
• Ignoring size difference between Containers

4. Identify the error in this Container code:

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.symmetric(horizontal: 20),
  color: Colors.green,
  child: Text('Hello'),
  width: 100,
  height: 50,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
)

medium

A. EdgeInsets.symmetric requires vertical parameter

B. Cannot use both color and decoration properties together

C. Text widget cannot be child of Container

D. width and height must be inside decoration

Solution

1. Step 1: Check Container property rules

   Container's color and decoration cannot be used together because color should be inside BoxDecoration if decoration is used.

2. Step 2: Verify other properties

   EdgeInsets.symmetric with only horizontal is valid, Text can be child, width and height are direct Container properties, not inside decoration.

3. Final Answer:

   Cannot use both color and decoration properties together -> Option B

4. Quick Check:

   color and decoration are mutually exclusive [OK]

Hint: Use color inside decoration or alone, not both [OK]

Common Mistakes:

• Using color and decoration simultaneously
• Misunderstanding EdgeInsets.symmetric usage
• Placing width/height inside decoration

5. You want to create a Container with a red border of 3 pixels, rounded corners of 12 pixels, padding of 16 pixels inside, and a fixed size of 150x150. Which code snippet correctly achieves this?

hard

A. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

B. Container(
width: 150,
height: 150,
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

C. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
color: Colors.red,
borderRadius: BorderRadius.circular(12),
child: Text('Styled Box'),
)

D. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

Solution

1. Step 1: Set fixed size and padding

   Width and height are set directly on Container. Padding is set with EdgeInsets.all(16) to add space inside the border.

2. Step 2: Define border and rounded corners in decoration

   Use BoxDecoration with border: Border.all(color: Colors.red, width: 3) for red border 3 pixels thick, and borderRadius.circular(12) for rounded corners.

3. Step 3: Check other options

   Container( width: 150, height: 150, margin: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) uses margin instead of padding, which adds space outside border. Container( width: 150, height: 150, padding: EdgeInsets.all(16), color: Colors.red, borderRadius: BorderRadius.circular(12), child: Text('Styled Box'), ) incorrectly uses color and borderRadius outside decoration. Container( width: 150, height: 150, padding: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) misses border width, default is 1 pixel.

4. Final Answer:

   Container with width, height, padding, and BoxDecoration with red border 3px and 12px radius -> Option A

5. Quick Check:

   Border and radius go inside decoration; padding adds inner space [OK]

Hint: Put border and radius inside decoration, padding outside [OK]

Common Mistakes:

• Using margin instead of padding for inner space
• Setting color and borderRadius outside decoration
• Forgetting border width in Border.all