flutter assertion_error ai_generated true

Assertion failed: 'verticalDirection' is null or not set

ID: flutter/assertion-failed-vertical-viewport

Also available as: JSON · Markdown · 中文
93%Fix Rate
87%Confidence
1Evidence
2023-09-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Flutter 3.13 active
Flutter 3.16 active
Flutter 3.19 active

Root Cause

A vertical viewport (e.g., ListView, Column) is used without specifying a constrained height, causing infinite vertical space.

generic

中文

垂直视口(例如 ListView、Column)在没有指定约束高度的情况下使用,导致无限垂直空间。

Official Documentation

https://api.flutter.dev/flutter/widgets/ScrollView-class.html

Workarounds

  1. 95% success Wrap the ListView in a Container or SizedBox with a fixed height: SizedBox( height: 300, child: ListView( children: [...], ), )
    Wrap the ListView in a Container or SizedBox with a fixed height:
    SizedBox(
      height: 300,
      child: ListView(
        children: [...],
      ),
    )
  2. 90% success If inside a Column, wrap the ListView in an Expanded and ensure the Column has a bounded height (e.g., by wrapping the Column in a SizedBox or Expanded): Column( children: [ Expanded( child: ListView(children: [...]), ), ], )
    If inside a Column, wrap the ListView in an Expanded and ensure the Column has a bounded height (e.g., by wrapping the Column in a SizedBox or Expanded):
    Column(
      children: [
        Expanded(
          child: ListView(children: [...]),
        ),
      ],
    )
  3. 85% success Use a CustomScrollView with slivers if you need mixed scrolling and non-scrolling content.
    Use a CustomScrollView with slivers if you need mixed scrolling and non-scrolling content.

中文步骤

  1. Wrap the ListView in a Container or SizedBox with a fixed height:
    SizedBox(
      height: 300,
      child: ListView(
        children: [...],
      ),
    )
  2. If inside a Column, wrap the ListView in an Expanded and ensure the Column has a bounded height (e.g., by wrapping the Column in a SizedBox or Expanded):
    Column(
      children: [
        Expanded(
          child: ListView(children: [...]),
        ),
      ],
    )
  3. Use a CustomScrollView with slivers if you need mixed scrolling and non-scrolling content.

Dead Ends

Common approaches that don't work:

  1. Wrapping the ListView in an Expanded widget inside a Column 40% fail

    Expanded only works when the parent has a fixed height; if the Column itself is unbounded, it still fails.

  2. Setting shrinkWrap: true on the ListView without also constraining the parent 30% fail

    ShrinkWrap only affects the viewport's own size calculation; the parent widget must still provide a finite height constraint.

  3. Using Flexible instead of Expanded 50% fail

    Flexible also requires a bounded parent; same fundamental issue.