Slivers (SliverList, SliverGrid, SliverAppBar) in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic SliverAppBar with a title.

Flutter

SliverAppBar(
  pinned: true,
  expandedHeight: 150.0,
  flexibleSpace: FlexibleSpaceBar(
    title: Text([1]),
  ),
)

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

AMyApp

B"My App"

Ctitle

DAppBar

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the title string.

Passing a widget instead of a string.

The title property expects a Text widget with a string. "My App" is the correct string literal.

2fill in blank

medium

Complete the code to create a SliverList with 5 Text widgets.

Flutter

SliverList(
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Text('Item ${index + 1}');
    },
    childCount: [1],
  ),
)

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

A5

B1

C10

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting childCount to 0 results in no items.

Using a number larger than needed.

childCount defines how many children the SliverList builds. To create 5 items, use 5.

3fill in blank

hard

Fix the error in the SliverGrid delegate to use the correct grid delegate.

Flutter

SliverGrid(
  gridDelegate: [1](
    crossAxisCount: 3,
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
  ),
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(color: Colors.blue, height: 50.0);
    },
    childCount: 6,
  ),
)

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

ASliverGridDelegateFixedCrossAxisCount

BSliverGridDelegate

CGridDelegateWithFixedCrossAxisCount

DSliverGridDelegateWithFixedCrossAxisCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent class name.

Omitting 'With' in the class name.

The correct class for fixed cross axis count grid delegate is SliverGridDelegateWithFixedCrossAxisCount.

4fill in blank

hard

Fill both blanks to create a SliverAppBar that floats and snaps.

Flutter

SliverAppBar(
  floating: [1],
  snap: [2],
  title: Text('Floating AppBar'),
)

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

Atrue

Bfalse

Cnull

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Setting snap to true but floating to false causes error.

Using non-boolean values.

To enable floating and snapping behavior, both floating and snap must be true.

5fill in blank

hard

Fill all three blanks to create a SliverGrid with 2 columns, 8 items, and 8.0 spacing.

Flutter

SliverGrid(
  gridDelegate: [1](
    crossAxisCount: [2],
    mainAxisSpacing: [3],
    crossAxisSpacing: [3],
  ),
  delegate: SliverChildBuilderDelegate(
    (context, index) => Container(color: Colors.red),
    childCount: 8,
  ),
)

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

ASliverGridDelegateWithFixedCrossAxisCount

B2

C8.0

DSliverGridDelegateWithMaxCrossAxisExtent

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong delegate class.

Setting spacing as integer instead of double.

Use SliverGridDelegateWithFixedCrossAxisCount for fixed columns, set crossAxisCount to 2, and spacing to 8.0.