Hide chapters

Flutter Apprentice

Fourth Edition · Flutter 3.16.9 · Dart 3.2.6 · Android Studio 2023.1.1

Section II: Everything’s a Widget

Section 2: 5 chapters
Show chapters Hide chapters

Section IV: Networking, Persistence & State

Section 4: 6 chapters
Show chapters Hide chapters

5. Scrollable Widgets
Written by Vincent Ngo

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Building scrollable content is an essential part of UI development. There’s only so much information a user can process at a time, let alone fit on an entire screen in the palm of your hand!

In this chapter, you’ll learn everything you need to know about scrollable widgets. In particular, you’ll learn:

  • How to use ListView.
  • How to nest scroll views.

You’ll continue to build the Yummy app by adding HomeScreen, a new view that enables users to explore different restaurants, food categories, and view friends’ posts.

By the end of this chapter, you’ll be a scrollable widget wizard!

Getting Started

Open the starter project in Android Studio, then run flutter pub get if necessary and run the app.

You’ll see a placeholder for each tab as shown below:

Project Files

There are new files in this starter project to help you out. Before you learn how to create scrollable widgets, take a look at them.

Assets Folder

The assets directory contains all the images that you’ll use to build your app.

Sample Images

  • categories: Contains images for food categories.
  • food: Contains sample food items from a restaurant menu.
  • profile_pics: Contains Kodeco team member pictures.
  • restaurants: Contains restaurant hero images.

New Classes

In the lib directory, you’ll also notice the new api folder, as shown below:

API Folder

The api folder contains a mock service class.

XedtlXevyefa KulcvUTE GobzCihwqJuzpuxi

Introducing ListView

ListView is a very popular Flutter component. It’s a linear scrollable widget that arranges its children linearly and supports horizontal and vertical scrolling.

Introducing Constructors

A ListView has four constructors:

Setting Up the Explore Screen

The first screen you’ll create is the ExploreScreen. It contains three sections:

HogosizjFebcoob XusseoxarmDegqiix TufgTampeob