CODEWITHSUNDEEP
flutteruser-interface
Isfaaq
Isfaaq

Reputation: 435

Using ListView in Column in Flutter

I am trying to place a ListView within a Column. When the number of children in the ListView is small (ie, the complete ListView can be displayed on the screen), scrolling is possible. However, as the number of children grows, scrolling is no more possible and, when in debug mode, the overflow error is shown.

The following demonstrates my problem:

class DemoScreen extends StatelessWidget {
  final List<String> arr = ["a","b","c","d","e","f","g","h","i","j","k"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Text('hi'),
          ListView.builder(
            shrinkWrap:true,
            itemCount: arr.length,
            itemBuilder: (BuildContext _, int index) => ListTile(
              title: Text(arr.elementAt(index)),
            )
            ),
          Text('hi'),
        ]
      )
    );
  }
}

output:

Output of the above code

TLDR

I would like the ListView to remain scrollable even when it has a large number of children.

Upvotes: 0

Views: 108

Answers (3)

Jay Shah
Jay Shah

Reputation: 11

final List<String> arr = [
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k",
    "a",
    "b",
    "c",
    "d",
    "e",
    "f",
    "g",
    "h",
    "i",
    "j",
    "k"
  ];

Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          body: SingleChildScrollView(
            child: Column(children: <Widget>[
        Text('hi'),
        ListView.builder(
          physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: arr.length,
              itemBuilder: (BuildContext _, int index) => ListTile(
                    title: Text(arr.elementAt(index)),
                  )),
        Text('hi'),
      ]),
          )),
    );
  }

You can wrap your column with SingleChildScrollView and ListView Physics should be NEverScrollable Physics so parent scroll will be active and you want get the overflow error..

Upvotes: 1

timilehinjegede
timilehinjegede

Reputation: 14043

TLDR;

Consider using an Expanded widget to wrap the ListView widget:

Also note, using shrinkWrap is expensive:

Shrink wrapping the content of the scroll view is significantly more expensive than expanding to the maximum allowed size because the content can expand and contract during scrolling, which means the size of the scroll view needs to be recomputed whenever the scroll position changes.

A demo using an Expanded widget:

class DemoScreen extends StatelessWidget {

  final List<String> arr = ["a","b","c","d","e","f","g","h","i","j","k",];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Text('hi'),
          Expanded( // new line
              child: ListView.builder(
              itemCount: arr.length,
              itemBuilder: (BuildContext _, int index) => ListTile(
                title: Text(arr.elementAt(index)),
              )
              ),
          ),
          Text('hi'),
        ]
      )
    );
  }
}

Upvotes: 2

Sajjad
Sajjad

Reputation: 3218

please try this ... wrap your column with single child scroll view

SingleChildScrollView(
  child : Column(   // your column
  )
)

Upvotes: 1

Related Questions