Search code examples
flutterflutter-listview

How do you make child in a horizontal ListView take up the entire width of the parent?


If you have a ListView widget which is set to horizontally scroll, how do you make all the children in it take up the entire full width of the ListView widget? Therefore you can still scroll between them but they each are stretched to the full width of the parent widget.

EDIT: Additionally, I don't want the parent widget (the ListView widget) to be the full width of the screen. The ListView widget itself has a dynamic width based on other widgets.


Solution

  • See the following snippet, Both ListView and every item of its items allocate space as much as the parent of the ListView.

    Container(
      width: 200,
      height:100,
      child: LayoutBuilder(
        builder:(context,constraints){
          return ListView.builder(
            scrollDirection: Axis.horizontal,
            itemBuilder: (context,index){
              return Container(
                width:constraints.maxWidth,
                height: constraints.maxHeight,
                color: Color.fromRGBO(index*12,index*5,index*2,1),
              );
            },
          );
        }
      )
    )