Expanded and Flexible in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the child widget fill the available space horizontally using Expanded.

Flutter

Row(children: [Expanded(child: Container(color: Colors.blue, width: [1], height: 50))])

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

Anull

B100

Cdouble.infinity

D50

Attempts:

3 left

💡 Hint

Common Mistakes

Setting a fixed width like 100 prevents filling the space.

Using null width causes errors inside Expanded.

Using double.infinity for width inside Expanded makes the container fill all available horizontal space.

2fill in blank

medium

Complete the code to make the Flexible widget allow its child to shrink if needed.

Flutter

Flexible(flex: 2, fit: [1], child: Container(color: Colors.red, width: 100, height: 50))

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

AFlexFit.tight

BFlexFit.loose

CFlexFit.expand

DFlexFit.fill

Attempts:

3 left

💡 Hint

Common Mistakes

Using FlexFit.tight forces the child to fill all space, no shrinking.

FlexFit.expand is not a valid option.

FlexFit.loose lets the child be smaller than the available space, allowing it to shrink.

3fill in blank

hard

Fix the error in the code by choosing the correct widget to wrap the child for flexible space allocation.

Flutter

Row(children: [[1](child: Container(color: Colors.green, width: 50, height: 50))])

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

AFlexible

BExpanded

CContainer

DSizedBox

Attempts:

3 left

💡 Hint

Common Mistakes

Using Container or SizedBox does not provide flexible space behavior.

Expanded forces full expansion, which may cause layout issues.

Flexible allows flexible space allocation without forcing full expansion, suitable here.

4fill in blank

hard

Fill both blanks to create a Row where the first child takes twice the space of the second child using Expanded.

Flutter

Row(children: [Expanded(flex: [1], child: Container(color: Colors.orange, height: 50)), Expanded(flex: [2], child: Container(color: Colors.purple, height: 50))])

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

A2

B1

C3

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using 0 flex causes the child to get no space.

Using equal flex values gives equal space, not twice.

The first Expanded has flex 2, the second has flex 1, so the first child gets twice the space.

5fill in blank

hard

Fill all three blanks to create a Column with Flexible children where the first child can shrink, the second fills tightly, and the third shrinks.

Flutter

Column(children: [Flexible(fit: [1], flex: [2], child: Container(color: Colors.yellow, height: 50)), Flexible(fit: [3], flex: 1, child: Container(color: Colors.blueGrey, height: 50)), Flexible(flex: 1, child: Container(color: Colors.teal, height: 50))])

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

AFlexFit.loose

B1

CFlexFit.tight

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using FlexFit.tight for all children forces all to fill space.

Not setting flex values properly changes space distribution.

The first Flexible uses FlexFit.loose and flex 2 to allow shrinking. The second uses FlexFit.tight and flex 1 to fill tightly.