Search code examples
flutterdartflutter-layoutdialog

Error in ListView in SimpleDialog in Flutter


I want to display in a SimpleDialog a ListView that I get from my api. But it throws this error

The following assertion was thrown during performLayout(): 'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1895 pos 16: 'constraints.hasBoundedHeight': is not true. The relevant error-causing widget was ListView

my SimpleDialog

showDialog(
  context: context,
   builder: (BuildContext context) {
    return SimpleDialog(
    contentPadding: EdgeInsets.zero,
     children: [
        Column(
         mainAxisSize:MainAxisSize.min,
             children: [
                Container(
                  child: Column(
                      children: [
                          const Text('Athletes'),
                          FutureBuilder<List<Presence>>(
                         future: getPresencesByAthleteId(_athlete[i].department!.id, widget._team.teamKey!.teamId, _athlete[i].id, context),                                                                 
                       builder: (BuildContext context, AsyncSnapshot snapshot) {                                                                                
                      if (snapshot.hasData) {                                                                         
                       return Container(
                       height: 300,
                       width: double.maxFinite,
                       child: ListView.builder(
                       shrinkWrap: true,
                       primary: true,
                       physics: const ClampingScrollPhysics(),
                       scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.length,
                       itemBuilder: (BuildContext context, int index) {
                       return ListTile(
                      title: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                       Row(
                         children: [
                        Flexible(child: Text('${(index + 1).toString()}.')),
                       Flexible(child: Text(snapshot.data[index].date)),
                      Flexible(
                                                                                                      child: Text(
                      snapshot.data[index].count.toString(),
                      style: const TextStyle(color: Colors.blue),
                     ),
                  )
                ],
                )
               ],
              ),
             );
            }),
            );
           } else if (snapshot.hasError) {
          logger.e('${snapshot.error}');
         }
         return const Center(
         heightFactor: 20,
        child: CircularProgressIndicator.adaptive(),
        );
      }),

Solution

  • You need to provide height for horizontal ListView,

     FutureBuilder<List>(
        builder: (BuildContext context, AsyncSnapshot snapshot) {
      return Container(
        height: 100, // the one  you prefer
        child: ListView.builder(
    
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return SimpleDialog(
          contentPadding: EdgeInsets.zero,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  child: Column(
                    children: [
                      const Text('Athletes'),
                      Container(
                        height: 300,
                        width: double.maxFinite,
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: 444,
                            itemBuilder:
                                (BuildContext context, int index) {
                              return Column(
                                mainAxisSize: MainAxisSize.min,
                                crossAxisAlignment:
                                    CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    children: [
                                      Text('{(index + 1).toString()}.'),
                                      Text("snap"),
                                      Text(
                                        "t",
                                        style: const TextStyle(
                                            color: Colors.blue),
                                      ),
                                    ],
                                  )
                                ],
                              );
                            }),
                      ),
                    ],
                  ),
                )
              ],
            )
          ],
        );
      },
    );