CODEWITHSUNDEEP
scrolldartflutterflutter-layout
user8866053
user8866053

Reputation:

Overflow of List-Based ListView

I want to preface this question by saying that I am very new to flutter/dart.

Essentially, I have a list containing a bunch of strings. I want to list them in the main (and only) view. I have this code:

ListView(
  shrinkWrap: true,
  padding: const EdgeInsets.all(24.0),
  children: _availableTraits.map((item) => new Text(item, style: TextStyle(fontSize: 24.0))).toList()
  )

I guess I am fortunate that _availableTraits is a relatively large list so that I discovered this problem. The list goes beyond the bottom of the page and a sort of warning/caution tape is put up at the bottom of the screen by flutter along with the error message: BOTTOM OVERFLOWED BY 93 PIXELS.

So how can I force flutter to just use a scroll bar?

Edit:

Figured I should probably share a picture of the problem. Failed Scroll: yellow/black stripes

Edit 2:

The above ListView is wrapped in a column element. The column element is wrapped in a scaffold.

Upvotes: 0

Views: 237

Answers (1)

diegoveloper
diegoveloper

Reputation: 103551

In order to fix your issue you need to expand your shrinked ListView, like this:

  Column(
        children: <Widget>[
          Expanded(
            child: ListView(
                shrinkWrap: true,
                ...

Upvotes: 1

Related Questions