Beginning Flutter Debugging

Sep 29 2022 Dart 2.18, Flutter 3.3, Visual Studio Code / Android Studio

Part 1: Beginning Flutter Debugging

9. Solve Layout Errors in ListViews

Episode complete

Play next episode

Next
Save for later
About this episode
See versions
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 8. Debug Common Layout Issues Next episode: 10. Understand the Red Screen of Death

Prerequesites: Basic knowledge of how ListViews work is needed. Please see our Flutter ListView Course. The student materials have been reviewed and are updated as of SEPTEMBER 2022.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

ListViews can also scroll horizontally. For this, we set the scrollDirection to horizontal like so:

...
scrollDirection: Axis.horizontal,
...
itemExtent: 200
body: ListView(
  children: List.generate(20, (index) {
    return const CardItem();
  }),
),
body: ListView(
  children: List.generate(10, (index) {
    // New Code
    if (index == 2) {
      return ListView(
          scrollDirection: Axis.horizontal,
          children: List.generate(10, (index) => const AdvertBox()),
      );
    }
    // End New Code
    return const CardItem();
  }),
),
return SizedBox(
  height: 100,
  child: ListView(
    ...