Beginning Flutter Debugging

Jan 18 2022 · Dart 2.14, Flutter 2.5, VS Code 1.62 OR Android Studio

Part 1: Beginning Flutter Debugging

09. Solve Layout Errors in ListViews

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 08. Debug Common Layout Issues Next episode: 10. Understand the Red Screen of Death

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 09. Solve Layout Errors in ListViews

Prerequesites: Basic knowledge of how ListViews work is needed. Please see our Flutter ListView Course.

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

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

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

Unlock now

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(
    ...