Flutter Vertical Viewport Unbounded Height Error

Question

I made an app to display a list of hospitals under a state.

This is the Main.dart

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'dart:async' show Future;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'package:emas_app/model/accounts_model.dart';

Future<String> _loadAsset() async{
  return await rootBundle.loadString('Assets/accounts.json');
}

Future<Accounts> loadAccounts() async{

  final response = await _loadAsset();
  final jsonResponse = json.decode(response);

  Accounts accounts = new Accounts.fromJson(jsonResponse);

  return accounts;
}

class ProviderList extends StatefulWidget {

  @override
  ListState createState() {
    return new ListState();
  }
}

class ListState extends State<ProviderList> {

  @override
  Widget build(BuildContext context) {

    Widget newbody = new ExpansionTile(
        title: new Text("State Name"),
        children: <Widget>[
          new FutureBuilder<Accounts>(
              future: loadAccounts(),
              builder: (context, snapshot){
                if(snapshot.hasData){

                return new ListView.builder(
                      itemCount: snapshot.data.accountinfo.length,
                      itemBuilder: (context, index){

                        String username = snapshot.data.accountinfo[index].name;
                        String address = snapshot.data.accountinfo[index].street;
                        String lat = snapshot.data.accountinfo[index].coordinates.lat;
                        String lng = snapshot.data.accountinfo[index].coordinates.lng;

                        return new ListTile(
                            title: new Text(username),
                            trailing: new Row(
                              mainAxisSize: MainAxisSize.min,
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                new IconButton(
                                    icon: Icon(Icons.info),
                                    onPressed: null
                                ),
                                new IconButton(
                                    icon: Icon(Icons.directions),
                                    onPressed: null
                                )
                              ],
                            )
                        );
                      });
                }else{
                  return new Center(
                    child: new CircularProgressIndicator(),
                  );
                }
              })
    ]);

    return new Scaffold(
      appBar: new AppBar(title: new Text("Providers")),
      body: newbody
    );
  }
}

This is the output where it shows the expanded ExpansionTile is blank:

And this is the error caught:

I/flutter ( 6305): Vertical viewport was given unbounded height.
I/flutter ( 6305): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 6305): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 6305): typically happens when a scrollable widget is nested inside another scrollable widget.

I have tried every possible solution I could find in Stack Overflow by wrapping the ListView.builder with Expanded or Flexible but its not working. Any ideas on how I could go about fixing this issue?

Answer 1

There are two solutions:

1. Use shrinkWrap property of the ListView

   new ListView.builder(
           shrinkWrap: true,
           itemCount: ...
   

   Reason:

   In your case, ListView is inside an ExpansionTile. ExpansionTile will show expand and show how many ever children are there. ListView will expand to the maximum size in scrollDirection as it is placed in ExpansionTile(unbounded constraints widget). As per docs,

   If the scroll view does not shrink wrap, then the scroll view will expand
   to the maximum allowed size in the [scrollDirection]. If the scroll view
   has unbounded constraints in the [scrollDirection], then [shrinkWrap] must
   be true.
   

2. Use SizedBox for giving fixed height for ListView.

   SizedBox(height: 200.0, child: new ListView.builder(...))