Unable to set dynamic height for a Column involving ListView.builder() flutter

Question

I have the following code where I'm trying to make a column inside which is a container containing title, and another container containing a list of items, that is scrollable horizontally. But I get the following runtime error - " The following assertion was thrown during performResize(): Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand."

Widget horizontalSlider(MediaQueryData mediaQuery){
  final List<String> entries = <String>['A', 'B', 'C','D','E'];
  return Container(
    padding: EdgeInsets.all(0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            padding: EdgeInsets.only(left:16),
            child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
        ),
        Container(
          child: ListView.builder(
          padding: EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index){
            return Column(
              children: <Widget>[
                Container(
                  height: mediaQuery.size.height/3,
                  margin: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/$index.jpg'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(18),
                    boxShadow: [BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 4,
                    ),],
                  ),
                  width: mediaQuery.size.width/1.5,
                ),
                Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
              ],
            );
          },
          scrollDirection: Axis.horizontal,
      ),
        )],
    ),
  );
}

What I expect from this is a heading (i.e. the first container inside the first column), an image of height equal to one-third of screen height and a Text widget at the end. But why do I get the error I cannot understand.

user185887 user185887 · Accepted Answer · 2020-08-04T23:47:32

Finally I found the answer from this thread https://github.com/flutter/flutter/issues/18341. I have to replace the second Container with Expanded and it works well. Updated Code

Widget horizontalSlider(MediaQueryData mediaQuery){
  final List<String> entries = <String>['A', 'B', 'C','D','E'];
  return Container(
    padding: EdgeInsets.all(0),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
            padding: EdgeInsets.only(left:16),
            child: Text("Home",style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),)
        ),
        Expanded(
          child: ListView.builder(
          padding: EdgeInsets.all(8),
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index){
            return Column(
              children: <Widget>[
                Container(
                  height: mediaQuery.size.height/3.5,
                  margin: EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage('assets/images/$index.jpg'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: BorderRadius.circular(18),
                    boxShadow: [BoxShadow(
                      color: Colors.grey.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 4,
                    ),],
                  ),
                  width: mediaQuery.size.width/1.5,
                ),
                Text("Item ${entries[index]}",style: TextStyle(fontSize: 18),),
              ],
            );
          },
          scrollDirection: Axis.horizontal,
      ),
        )],
    ),
  );
}

Unable to set dynamic height for a Column involving ListView.builder() flutter

1 Answers