SingleChildScrollView in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the Column scrollable using SingleChildScrollView.

Flutter

SingleChildScrollView(
  child: Column(
    children: [
      Text('Item 1'),
      Text('Item 2'),
      Text('Item 3'),
    ],
  ),
  [1]: Axis.vertical,
)

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

AscrollDirection

Bdirection

Caxis

Dorientation

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'direction' or 'axis' instead of 'scrollDirection'.

Forgetting to wrap the Column with SingleChildScrollView.

The property to set scroll direction in SingleChildScrollView is scrollDirection.

2fill in blank

medium

Complete the code to add padding inside SingleChildScrollView.

Flutter

SingleChildScrollView(
  padding: EdgeInsets.[1](16),
  child: Text('Scrollable content'),
)

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

Aonly

Bsymmetric

Call

DfromLTRB

Attempts:

3 left

💡 Hint

Common Mistakes

Using EdgeInsets.symmetric or EdgeInsets.only when equal padding is needed.

Not adding padding inside SingleChildScrollView.

EdgeInsets.all(16) adds equal padding on all sides inside SingleChildScrollView.

3fill in blank

hard

Fix the error in the code to make the SingleChildScrollView scroll horizontally.

Flutter

SingleChildScrollView(
  scrollDirection: [1],
  child: Row(
    children: [
      Icon(Icons.star),
      Icon(Icons.star_border),
    ],
  ),
)

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

AAxis.vertical

BAxis.horizontal

CScrollDirection.horizontal

DScrollDirection.vertical

Attempts:

3 left

💡 Hint

Common Mistakes

Using ScrollDirection instead of Axis.

Setting scrollDirection to Axis.vertical for horizontal scroll.

To scroll horizontally, scrollDirection must be Axis.horizontal.

4fill in blank

hard

Fill both blanks to create a scrollable list with padding and vertical scroll direction.

Flutter

SingleChildScrollView(
  [1]: Axis.[2],
  padding: EdgeInsets.all(12),
  child: Column(
    children: [
      Text('Line 1'),
      Text('Line 2'),
    ],
  ),
)

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

AscrollDirection

Bpadding

Cvertical

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing padding with scrollDirection.

Using horizontal instead of vertical for vertical scroll.

scrollDirection sets the scroll axis, and Axis.vertical means vertical scrolling.

5fill in blank

hard

Fill all three blanks to create a horizontally scrollable SingleChildScrollView with symmetric padding.

Flutter

SingleChildScrollView(
  [1]: Axis.[2],
  padding: EdgeInsets.[3](horizontal: 20, vertical: 10),
  child: Row(
    children: [
      Icon(Icons.home),
      Icon(Icons.settings),
    ],
  ),
)

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

AscrollDirection

Bvertical

Csymmetric

Dhorizontal

Attempts:

3 left

💡 Hint

Common Mistakes

Using vertical instead of horizontal for horizontal scroll.

Using EdgeInsets.all instead of EdgeInsets.symmetric for different horizontal and vertical padding.

scrollDirection sets the scroll axis, Axis.horizontal for horizontal scroll, and EdgeInsets.symmetric for padding on horizontal and vertical sides.