B.shruti
B.shruti

Reputation: 1630

RenderListWheelViewport object was given an infinite size during layout

I am using ListWheelScrollView Widget to give a wheeling effect to my list item but getting the error as mentioned. I just want to show Stacked Items with some image and texts in individual list item and give a 3D Wheeling effect to them.

Below is my code ->

class ExploreWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _ExploreState();
}

class _ExploreState extends State<ExploreWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: Column(
        children: <Widget>[
          _header(),
          _exploreList()
        ],
      )
    );

  }

  Widget _header(){
    return SizedBox(
      height: 200,
      width: 800,
    );

  }

  Widget _exploreList(){
    return ListWheelScrollView.useDelegate(
      itemExtent: 75,
      childDelegate: ListWheelChildBuilderDelegate(
        builder:(context,index){
          return Container(
            height: 500,
            width: 800,
            child: Stack(
              children: <Widget>[
                Image(image: AssetImage(
                  _products[index].image
                )),
                Text(_products[index].name,style: Style.sectionTitleWhite,),
                Text('70% off',style: Style.cardListTitleWhite,),
              ],
            ),
          );
        }
      ),
    );
  }

}

Upvotes: 0

Views: 1174

Answers (1)

Darshan
Darshan

Reputation: 11669

The error was occuring due to the way _exploreList() widget is implemented. This widget is wrapped inside Column which doesn't scroll in itself. Moreover, you are returning a ScrollView that has an infinite size. Hence it was throwing the said error. To resolve this issue, wrap _exploreList() widget inside Flexible which takes only minimum available space to render and scroll. Working sample code below:

body: Column(
          children: <Widget>[
            _header(),
            Flexible(
              child: _exploreList()
            )
          ],
        )

Now you should be able to use WheelScrollView properly.

enter image description here

Upvotes: 1

Related Questions