How to implement Nested ListView in Flutter?

Question

What is the preferred way to achieve a nested ListView, or in other words, ListView Widgets that could be included within a scrollable parent?

Imagine a "Reports" page, where a section is an itemized list.

Serdar Polat · Accepted Answer · 2018-11-29 16:08:19Z

275

For child ListView, use that parameter:

shrinkWrap: true,
physics: ClampingScrollPhysics(),

answered Nov 29, 2018 at 16:08

Serdar Polat

4,4402 gold badges15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kaki Master Of Time Over a year ago

This doesn't work for me when the child list view is nested in a scrollBar nested in a ScrollConfiguration nested in a Container

Travis Whitten Over a year ago

This works for the nested ListView that is inside of a parent ListView! Thanks!

Janpan Over a year ago

Thanks, ClampingScrollPhysics() basically adds the length of the nested scrollbar to the entire screen. Very useful, thanks !

CopsOnRoad Over a year ago

It only works for a specific case, like both parent and child listviews are just normal ListView(children: [...]). It fails for ListView.builder(...)

Parth Godhani Over a year ago

there is choppy scroll whent Listview => Listview.Builder

|

Burak · Accepted Answer · 2020-01-28 20:48:11Z

Adding physics: ClampingScrollPhysics() and shrinkWrap: true did the trick for me.

sample code:

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          child: ListView.builder(
              shrinkWrap: true,
              itemCount: 123,
              itemBuilder: (BuildContext context, int index) {
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Parent'),
                    ListView.builder(
                        itemCount: 2,
                        physics: ClampingScrollPhysics(), 
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index) {
                          return Text('Child');
                        }),
                  ],
                );
              }),
        )
      ],
    ),
  );
}

double-beep · Accepted Answer · 2023-02-19 10:49:32Z

31

If you want to have the inner ListView be scrollable independently of the main scroll view, you should use NestedScrollView. Otherwise, use a CustomScrollView.

Here is some code illustrating the NestedScrollView approach.

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            new SliverAppBar(
              pinned: true,
              title: new Text('Flutter Demo'),
            ),
          ];
        },
        body: new Column(
          children: <Widget>[
            new FlutterLogo(size: 100.0, colors: Colors.purple),
            new Container(
              height: 300.0,
              child: new ListView.builder(
                itemCount: 60,
                itemBuilder: (BuildContext context, int index) {
                  return new Text('Item $index');
                },
              ),
            ),
            new FlutterLogo(size: 100.0, colors: Colors.orange),
          ],
        ),
      ),
    );
  }
}

edited Feb 19, 2023 at 10:49

double-beep

5,67019 gold badges43 silver badges50 bronze badges

answered Jul 24, 2017 at 6:37

Collin Jackson

117k31 gold badges229 silver badges154 bronze badges

2 Comments

NullPointer Over a year ago

This does not scroll the Flutterlogo completly. It stops scrolling. How can I scroll the whole container? I mean that the FlutterLogo is completly invisible?

visoft Over a year ago

The "main" scroll, the Nested, does not scroll at all. Adding more logos at the end, resulted in overflow and not the expected scrolling. Hmm . . .

CopsOnRoad · Accepted Answer · 2019-09-10 06:36:34Z

13

Screenshot:

Code:

var _container = Container(
  height: 200,
  color: Colors.blue,
  margin: EdgeInsets.symmetric(vertical: 10),
);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text("ListView")),
    body: Padding(
      padding: const EdgeInsets.all(40.0),
      child: ListView( // parent ListView
        children: <Widget>[
          _container,
          _container,
          Container(
            height: 200, // give it a fixed height constraint
            color: Colors.teal,
            // child ListView
            child: ListView.builder(itemBuilder: (_, i) => ListTile(title: Text("Item ${i}"))),
          ),
          _container,
          _container,
          _container,
        ],
      ),
    ),
  );
}

answered Sep 10, 2019 at 6:36

CopsOnRoad

271k97 gold badges702 silver badges471 bronze badges

3 Comments

visoft Over a year ago

Briliant! Trying to work around fixed height (eg let it expand if there is more room)

visoft Over a year ago

10 mins later: wrap inner ListView in ConstrainedBox (where specify min/max dims) and shrinkWrap inner list. Bam! Let's see if it works in production.

Dipanjan Ghosal Over a year ago

This is the only one that worked for me. I wonder if there is a way to not hardcode the height. Will try what @visoft tried

Mimu Saha Tishan · Accepted Answer · 2020-11-18 14:36:31Z

12

For inner Listview I have just added below code and it solved for me

shrinkWrap: true,
physics: ScrollPhysics(),

answered Nov 18, 2020 at 14:36

Mimu Saha Tishan

2,6931 gold badge27 silver badges44 bronze badges

1 Comment

abrsh Over a year ago

When the inner Listview becomes scrollable your code doesn't work.

iDecode · Accepted Answer · 2020-05-21 11:16:21Z

10

Thanks to Serdar Polat:

ListView.builder( // outer ListView
  itemCount: 4,
  itemBuilder: (_, index) {
    return Column(
      children: [
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('Header $index'),
        ),
        ListView.builder( // inner ListView
          shrinkWrap: true, // 1st add
          physics: ClampingScrollPhysics(), // 2nd add
          itemCount: 10,
          itemBuilder: (_, index) => ListTile(title: Text('Item $index')),
        )
      ],
    );
  },
)

answered May 21, 2020 at 11:16

iDecode

29.8k26 gold badges151 silver badges254 bronze badges

Comments

Amaury Ricardo · Accepted Answer · 2022-11-30 18:01:44Z

4

shrinkWrap to wrap your content and ClampingScrollPhysics to use the parent scroll

ListView.builder(
    shrinkWrap: true,
    physics: const ClampingScrollPhysics(),
    itemCount: yourList.length,
    itemBuilder: (context, index) => YourWidget(items[index]),
),

answered Nov 30, 2022 at 18:01

Amaury Ricardo

3573 silver badges5 bronze badges

Comments

Ali Bagheri · Accepted Answer · 2022-03-03 19:38:11Z

2

I use this:

scrollController.addListener(onScroll);

void onScroll(){
    if(scrollController.offset == 0.0
        || scrollController.position.extentBefore == 0.0
        || scrollController.position.extentAfter == 0.0){
      scrollPhysics = NeverScrollableScrollPhysics();

      Future.delayed(Duration(seconds: 1), (){
        scrollPhysics = ClampingScrollPhysics();
        setState((){});
      });

      setState((){});;
    }
  }

answered Mar 3, 2022 at 19:38

Ali Bagheri

3,49733 silver badges33 bronze badges

1 Comment

Viktor Shvachuk Over a year ago

Use AlwaysScrollableScrollPhysics instead of ClampingScrollPhysics.

sarjeet singh · Accepted Answer · 2022-03-10 08:43:47Z

 Expanded(
                  child: ListView.builder(
                      shrinkWrap: true,
                      padding: const EdgeInsets.all(8),
                      itemCount: requestList.length,

                      itemBuilder: (BuildContext context, int index) {
                        int que = index;
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Container(
                                padding: const EdgeInsets.only(
                                    left: 20,
                                    top: 10,
                                    bottom: 10,
                                    right: 20),
                                child: Text(
                                  '${que++} . ${requestList[index].question}',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    fontSize: 14,
                                    color: HexColor(HexColor.black),
                                    fontFamily: 'montserrat_regular',
                                    decoration: TextDecoration.none,
                                  ),
                                )),
                            ListView.builder(
                                itemCount: requestList[index].questionOptions!.length,
                                physics: ClampingScrollPhysics(),
                                shrinkWrap: true,
                                itemBuilder: (BuildContext context, int subindex) {
                                  return Row(
                                    children: <Widget>[
                                      Radio(
                                          value: 1,
                                          groupValue: radio_value[index],
                                          onChanged: (values) async {
                                            setState(() {
                                              radio_value[index] = 1;
                                              qutionCheckModel[index].response =
                                              "yes";
                                            });
                                          }),
                                      Container(
                                        child: Text(
                                          requestList[index].questionOptions![subindex],
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            fontSize: 14,
                                            color: HexColor(HexColor.black),
                                            fontFamily: 'montserrat_regular',
                                            decoration: TextDecoration.none,
                                          ),
                                        ),
                                      ),

                                    ],
                                  );
                                }),
                          ],
                        );
                      }),
                ),

hey man. i'm looking at this code. In case i have a textfield with controller on the 2nd listview.builder. how do i make the controller unique for each entry? coz i can't do "controller: _controllertext[index][subindex].

Collectives™ on Stack Overflow

How to implement Nested ListView in Flutter?

9 Answers 9

10 Comments

Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

10 Comments

Comments

2 Comments

3 Comments

1 Comment

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related