Why layout widgets arrange child widgets in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Column that arranges children vertically.

Flutter

Column(children: [Text('Hello'), Text('World')], [1]: MainAxisAlignment.center)

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

AmainAxisAlignment

BcrossAxisAlignment

Calignment

Ddirection

Attempts:

3 left

💡 Hint

Common Mistakes

Using crossAxisAlignment instead of mainAxisAlignment

Using alignment which is not a property of Column

The mainAxisAlignment property arranges children vertically in a Column.

2fill in blank

medium

Complete the code to arrange children horizontally in a Row widget.

Flutter

Row(children: [Icon(Icons.star), Icon(Icons.star_border)], [1]: MainAxisAlignment.spaceBetween)

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

AmainAxisAlignment

BcrossAxisAlignment

Cdirection

Dalignment

Attempts:

3 left

💡 Hint

Common Mistakes

Using crossAxisAlignment which controls vertical alignment in Row

Using direction which is not a property here

The mainAxisAlignment controls horizontal arrangement in a Row.

3fill in blank

hard

Fix the error in the code to properly arrange children in a Column.

Flutter

Column(children: [Text('A'), Text('B')], crossAxisAlignment: [1])

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

ACrossAxisAlignment.start

BMainAxisAlignment.center

CAlignment.center

DCrossAxisAlignment.center

Attempts:

3 left

💡 Hint

Common Mistakes

Using MainAxisAlignment value for crossAxisAlignment

Using Alignment which is not valid here

crossAxisAlignment expects a CrossAxisAlignment value, not MainAxisAlignment or Alignment.

4fill in blank

hard

Fill both blanks to create a Row that centers children vertically and spaces them evenly horizontally.

Flutter

Row(children: [Icon(Icons.home), Icon(Icons.settings)], [1]: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.[2])

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

AmainAxisAlignment

BcrossAxisAlignment

Cstart

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping mainAxisAlignment and crossAxisAlignment

Using start instead of center for vertical alignment

mainAxisAlignment controls horizontal spacing in Row, and crossAxisAlignment controls vertical alignment.

5fill in blank

hard

Fill all three blanks to create a Container with padding, margin, and a blue background color.

Flutter

Container(padding: EdgeInsets.[1](10), margin: EdgeInsets.[2](horizontal: 5), decoration: BoxDecoration(color: Colors.[3]))

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

Aall

Bsymmetric

Cblue

Donly

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets.only instead of all for padding

Using wrong color name

Confusing padding and margin

EdgeInsets.all sets padding on all sides, EdgeInsets.symmetric sets margin horizontally, and Colors.blue sets the background color.