SingleChildScrollView in Flutter - Mini App: Build & Ship

Build: Scrollable List Screen

This screen shows a vertical list of colored boxes that can be scrolled if they don't fit on the screen.

Target UI

Scrollable List Screen

+-----------------------+
| Title: Scrollable List|
|-----------------------|
| [Red Box]             |
| [Green Box]           |
| [Blue Box]            |
| [Yellow Box]          |
| [Purple Box]          |
| [Orange Box]          |
|                       |
|                       |
|                       |
+-----------------------+

Use SingleChildScrollView to make the list scrollable vertically.

Display six colored boxes stacked vertically.

Each box should have a fixed height and fill the screen width with some margin.

Add a title text at the top inside an AppBar.

Starter Code

Flutter

import 'package:flutter/material.dart';

class ScrollableListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable List'),
      ),
      body: // TODO: Add SingleChildScrollView with colored boxes here
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class ScrollableListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scrollable List'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.red,
            ),
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.green,
            ),
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.blue,
            ),
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.yellow,
            ),
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.purple,
            ),
            Container(
              height: 150,
              margin: EdgeInsets.all(10),
              color: Colors.orange,
            ),
          ],
        ),
      ),
    );
  }
}

We use SingleChildScrollView to make the whole column scrollable vertically. Inside it, a Column holds six Container widgets, each with a fixed height of 150 pixels and a margin of 10 pixels around for spacing. Each container has a different background color to visually separate them. The AppBar shows the screen title at the top. This setup allows the user to scroll through the colored boxes if they don't fit on the screen.

Final Result

Completed Screen

Scrollable List Screen

+-----------------------+
| Title: Scrollable List|
|-----------------------|
| [Red Box]             |
| [Green Box]           |
| [Blue Box]            |
| [Yellow Box]          |
| [Purple Box]          |
| [Orange Box]          |
|                       |
|                       |
|                       |
+-----------------------+

User can scroll vertically to see all six colored boxes.

The AppBar stays fixed at the top while scrolling.

Stretch Goal

Add horizontal scrolling with SingleChildScrollView to show colored boxes side by side.

💡 Hint

Set scrollDirection to Axis.horizontal and use a Row instead of Column inside SingleChildScrollView.