Flutter Question posted in
The official Flutter documentation can be found here.

ListView.builder within ExpansionTile children is not showing when tile is expanded in Flutter

Right now I am generating a List of ExpansionTiles using a ListView.builder. Each ExpansionTile can be expanded to view an additional list of items which is generated with a ListView.builder as well. My problem is on the second part, displaying the list once the ExpansionTile is open. When the ExpansionTile is expanded, the ExpansionTile shows the expanded shape, so it is in the expanded state, but the ListView.builder is not showing.

Structure

FutureBuilder
->returns CircularLoading Indictator if data not loaded
->Otherwise returns first ListView.builder building list with ExpansionTiles
    ->ExpansionTile 
         children: FutureBuilder **PROBLEM AREA**
                   -> Returns CircularLoading Indicator if data not loaded
                   -> Otherwise returns second ListView.builder building list with ExpansionTiles```

As denoted the issued is in the second area. Here is the code snippet

ExpansionTile(
   ...styling properties
   onExpansionChanged: (bool expanding) => {
       generateDataFunction().then((_){
          setState((){
          });
       }
   },
   children: <Widget>[
   FutureBuilder(
       future: dataFuture,
       builder: (context, snapshot) {
           if(snapshot.connectionState != ConnectionState.done){
               return Center(child: CircularProgressIndicator());
           }
           else{
               return ListView.builder( // <------------- PROBLEM AREA
                   shrinkWrap: true, // Keep true as listview needs bounded height
                   itemCount: data.length
                   controller: dataListScrollController,
                   itemBuilder: (BuildContext context, int index){ 
                        return ListTile(
                            ...I pass in my data here needed for the list tiles (title etc)
                        );
                   }
               );
           }
       }
   ),
   ]

If I replace the ListView.builder with simply a List with a children: [] parameter and put some ListTiles in there it works fine, so I don’t feel it’s related to my future builder or anything. The data is there as well. I’ve tried forcing a size with a Container being wrapped around to make it open up larger, but no tiles are displayed.

Thanks

Tags:

2

Answers


  1. 0

    You need to pass a return function inside you itemBuilder.

    Example:

    itemBuilder: (BuildContext context, int index){ 
    return ListTile();
}

    You can see a ListView.builder implementation at https://api.flutter.dev/flutter/widgets/ListView-class.html

    Login or Signup to reply.
  2. 0

    ListView.builder inside the ExpansionTile is not displaying its items when the expansiontile is gona be expanded. Maybethe ListView.builder isnot getting enough height to display its items properly.

    First, you can try tocheck the following points:

    Also check the ExpansionTile if it has enough height to have the ListView.builder when expanded?You can check this from Layout or breakpoint.
    Alternatively, set the physics property of the ListView.builder to
    Wrap the ListView.builder with a Container and set its height explicitly, itis for ensuring that it has enough space to display its items.
    Or try setting a fixed height or using constraints to calculate the height dynamically.

    ExpansionTile(
  minChildren: 1,
  maxChildren: 10, // adjust if required
 onExpansionChanged: (bool expanding) {
 if (expanding) {
   generateDataFunction().then((_) {
      setState(() {});
  });
}
},
children: <Widget>[
 FutureBuilder(
  future: dataFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState != ConnectionState.done) {
      return Center(child: CircularProgressIndicator());
    } else {
      return Container(
        height: 200, // adjust height as needed
        child: ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              // pass in data here for list tiles
            );
          },
        ),
      );
    }
    },),],)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search