Displaying lists with ListView and GridView

  1. Objectives
  2. Code along
  3. Boilerplate
  4. Displaying items in a ListView
    1. the ListTile widget
  5. Displaying items in a GridView
  6. The Card widget
  7. Completed Code
  8. Other Resources

Objectives

Code along

Recording: https://youtu.be/rccHVJdd1Sc

Boilerplate

Troubleshooting: If you already downloaded the project, replace lib/bob_data.dart with this file bob_data.dart if you’re having trouble.

  1. Download and unzip lists_and_grids.zip. It will create a folder called lists_and_grids. Move this folder to be with your other Flutter projects.
  2. In VSCode, go to File -> Open Folder and select the lists_and_grids/ folder.
  3. You will see a pop-up in the bottom right about missing or out of data packages. Click the “Get packages” button to download a 3rd-party library used by this app. Or open the Command Palette and search for flutter pub get
  4. Open lib/main.dart and run the app. You should see the following:

ListView with placeholder blank

Displaying items in a ListView

ListView More coming soon.

the ListTile widget

ListTile More coming soon.

Displaying items in a GridView

GridView More coming soon.

The Card widget

Card More coming soon.

Completed Code

You can download the completed code here: lists_and_grids.zip

Other Resources