CustomScrollView in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a CustomScrollView with a single SliverList.

Flutter

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => Text('Item $index'),
        childCount: [1],
      ),
    ),
  ],
)

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

A10

Bitems

Cnull

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name without defining it.

Passing null or false instead of a number.

The childCount property expects an integer to define how many items to build. Here, 10 means 10 items will be shown.

2fill in blank

medium

Complete the code to add a SliverAppBar inside CustomScrollView.

Flutter

CustomScrollView(
  slivers: [
    [1](
      title: Text('My AppBar'),
      floating: true,
    ),
  ],
)

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

ASliverList

BAppBar

CSliverAppBar

DSliverGrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using AppBar directly inside slivers.

Using SliverList instead of SliverAppBar.

The SliverAppBar widget is used inside a CustomScrollView to create an app bar that scrolls with the content.

3fill in blank

hard

Fix the error in the code by completing the blank with the correct widget to create a grid inside CustomScrollView.

Flutter

CustomScrollView(
  slivers: [
    [1](
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(color: Colors.blue, height: 100),
        childCount: 6,
      ),
    ),
  ],
)

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

ASliverGrid

BSliverList

CGridView

DListView

Attempts:

3 left

💡 Hint

Common Mistakes

Using GridView inside slivers causes errors.

Using SliverList instead of SliverGrid for grids.

The SliverGrid widget is used to create grid layouts inside a CustomScrollView. GridView cannot be used directly inside slivers.

4fill in blank

hard

Fill both blanks to create a CustomScrollView with a SliverAppBar and a SliverList.

Flutter

CustomScrollView(
  slivers: [
    [1](
      title: Text('Header'),
      pinned: true,
    ),
    [2](
      delegate: SliverChildListDelegate([
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ]),
    ),
  ],
)

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

ASliverAppBar

BSliverGrid

CSliverList

DSliverPadding

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the widgets in the blanks.

Using SliverGrid instead of SliverList for the list.

The first blank should be SliverAppBar to create the header bar. The second blank should be SliverList to create a list of items.

5fill in blank

hard

Fill all three blanks to build a CustomScrollView with a pinned SliverAppBar, a SliverGrid, and a SliverList.

Flutter

CustomScrollView(
  slivers: [
    [1](
      title: Text('Gallery'),
      pinned: true,
    ),
    [2](
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      delegate: SliverChildBuilderDelegate(
        (context, index) => Container(color: Colors.red, height: 100),
        childCount: 9,
      ),
    ),
    [3](
      delegate: SliverChildListDelegate([
        ListTile(title: Text('Footer Item 1')),
        ListTile(title: Text('Footer Item 2')),
      ]),
    ),
  ],
)

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

ASliverAppBar

BSliverChildBuilderDelegate

CSliverList

DSliverGrid

Attempts:

3 left

💡 Hint

Common Mistakes

Using SliverChildBuilderDelegate as a sliver widget.

Mixing up SliverGrid and SliverList positions.

The first blank is SliverAppBar for the pinned header. The second blank is SliverGrid to show a grid of items. The third blank is SliverList for the footer list.