Stack and Positioned in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Stack widget.

Flutter

Stack(children: [
  Container(width: 100, height: 100, color: Colors.blue),
  [1](left: 10, top: 10, child: Icon(Icons.star, color: Colors.white))
])

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

APositioned

BAlign

CPadding

DCenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using Align instead of Positioned inside Stack for exact positioning.

Forgetting to use Positioned when specifying left and top.

The Positioned widget is used inside a Stack to place a child at a specific position.

2fill in blank

medium

Complete the code to position a red square 20 pixels from the bottom and right inside a Stack.

Flutter

Stack(children: [
  Container(width: 150, height: 150, color: Colors.grey),
  [1](bottom: 20, right: 20, child: Container(width: 50, height: 50, color: Colors.red))
])

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

APositioned

BPadding

CAlign

DCenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using Align which positions relative to the Stack but does not accept bottom and right properties.

Using Padding which only adds space around a widget.

Positioned is used to place the red square 20 pixels from the bottom and right edges inside the Stack.

3fill in blank

hard

Fix the error in the code to correctly position the text inside the Stack.

Flutter

Stack(children: [
  Container(width: 200, height: 200, color: Colors.yellow),
  Positioned(left: 30, top: 30, child: [1]('Hello'))
])

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

AText('Hello')

BContainer('Hello')

CText

DTextWidget('Hello')

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the widget call inside the child property as a string.

Using a non-existent widget like TextWidget.

The child property expects a widget instance. Text is a widget class, so it should be called with parentheses outside the Positioned widget, not inside the child property as a string.

4fill in blank

hard

Fill both blanks to create a Stack with a blue box and a green box positioned 15 pixels from the top and left.

Flutter

Stack(children: [
  Container(width: 120, height: 120, color: [1]),
  Positioned(top: 15, left: 15, child: Container(width: 60, height: 60, color: [2]))
])

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

AColors.blue

BColors.red

CColors.green

DColors.yellow

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the colors for the containers.

Using colors not in the options.

The first container is blue, and the positioned container is green as specified.

5fill in blank

hard

Fill all three blanks to create a Stack with a yellow background, a centered icon, and a positioned text 10 pixels from the bottom and right.

Flutter

Stack(children: [
  Container(color: [1]),
  Center(child: Icon(Icons.favorite, color: [2])),
  Positioned(bottom: 10, right: 10, child: Text([3]))
])

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

AColors.yellow

BColors.red

C'Love'

DColors.blue

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names incorrectly.

Forgetting quotes around the text string.

The background container is yellow, the icon is red, and the positioned text shows 'Love'.