ListView inside ExpansionTile doesn't work

Question

listview is not working inside ExpansionTile

i have tried to show a listview.builder inside ExpansionTile but it throws some exceptions

Card(
       child: ExpansionTile(
           leading: Icon(
              Icons.stars,
              color: Colors.pinkAccent,
           ),
           title: Text('Reviews',
                  style: Theme.of(context).textTheme.title,
                          ),
                children: [
                    ListView.builder(
                        itemCount: 5,
                        itemBuilder: (_, i) {
                          return (Text('item $i'));
                     })
                   ],
             ),
     ),

i want to achieve like this https://i.sstatic.net/tv074.jpg

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8182): The following assertion was thrown during performResize():
I/flutter ( 8182): Vertical viewport was given unbounded height.
I/flutter ( 8182): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 8182): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 8182): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 8182): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 8182): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 8182): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 8182): the height of the viewport to the sum of the heights of its children.
I/flutter ( 8182): 

Bifarious

add shrinkWrap: true, in ListView.builder – Fourdrinier

Answer 1

The vertical size of your ListView is unbounded which makes it impossible to render. Set the shrinkWrap property of ListView to true to work around that.

Brandish

thank it works but it throws this exception every time i scroll over ExpansionTile ```` [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception: E/flutter ( 8182): 'package:flutter/src/widgets/page_view.dart': Failed assertion: line 96 pos 7: 'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it. E/flutter ( 8182): #0 _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39) E/flutter ( 8182): #1 _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5) ``` – Bifarious

this is the exception again [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception: E/flutter ( 8182): 'package:flutter/src/widgets/page_view.dart': Failed assertion: line 96 pos 7: 'positions.isNotEmpty': PageController.page cannot be accessed before a PageView is built with it. E/flutter ( 8182): #0 _AssertionError._doThrowNew (dart:core/runtime/liberrors_patch.dart:40:39) E/flutter ( 8182): #1 _AssertionError._throwNew (dart:core/runtime/liberrors_patch.dart:36:5) – Bifarious

This must be something else in your UI. I can't see a PageView anywhere in your code. – Brandish

Answer 2

None of the above solution doesn't work as expected. So I have solved the issue. You need to use this in Listview.builder() inside ExpansionTile children:

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

Full Code:

                ExpansionTile( 
                    onExpansionChanged: (e){
                      //Your code
                    },
                    title: Text("You title text"),
                    children: [
                    ListView.builder(
                     shrinkWrap: true,
                     physics: NeverScrollableScrollPhysics(),
                     scrollDirection: Axis.vertical,
                     itemCount: items.length,
                     itemBuilder: (BuildContext context, int index){
                     return Text(items[index]);
                      }
                   )
                      
                    ],
                  ),

Trautman

@RudyRudy glad to help :) – Trautman

wouldn't shrink wrap and never scroll make listview useless ? there is no scrollabality inside listview and shrink wraps makes listview load all elements at once – Dated

i tried this way to build my expansion tile, but when my item.length become larger, it will take some time to build it. Is there any way to help improve the performance? – Cookstove

Answer 3

I try many ways, finally I found solution.

Use this code instread of ListView.Builder.

   ...List.generate(plist.length, (index) {

              return  Text('Text');
            }),

Summertime

When lists are large, ListView.builder is more efficient because it lazily loads items and handles scrolling automatically. List.generate creates all items upfront, which can lead to performance issues with large lists. – Cathedral

Answer 4

Add both shrinkwrap and controller to ListView.builder

final ScrollController _scrollController = ScrollController();


    ListView.builder(
          controller: _scrollController,
           shrinkWrap: true,
    ...

Blooper

Answer 5

To resolve use shrinkWrap: true, in ListView parameter.

Empirical