Home > Software engineering >  ListView.builder with scrollDirection horizontal got error
ListView.builder with scrollDirection horizontal got error

Time:09-17

I have this code:

  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => addProductClass()),
            );
          },
          child: const Icon(
            Icons.add,
            color: Colors.black,
          ),
        ),
        body: Column(children: [
          FutureBuilder(
              future: getDocId(),
              builder: (context, snapshot) {
                return ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: dataIDs.length,
                  itemBuilder: (BuildContext context, int index) {
                    return GetProduct(
                      documentId: dataIDs[index],
                    );
                  },
                );
              }),
          Text("text")
        ]));
  }

And i want to use scrollDirection: Axis.horizontal for listview. When I insert this value, I got the error:

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

How can I resolve this?

CodePudding user response:

Try to set shrinkwrap to true for listview builder here is an example of listview builder in horizontal mode :

SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    itemCount: 10,
                    itemBuilder: (BuildContext context, int index){
                      return Container( margin: EdgeInsets.all(5), height:10, width:20, color:black);
                    }
                ),
              ),

hope it will help !

CodePudding user response:

Easiest way is to provide a fixed height, either using a SizedBox or a ConstrainedBox with a maxHeight set.

  • Related