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.