4 Horizontal Listviews in a Scrollable Column in FLutter

Question

I need 4 Scrollable Horizontal Listviews in a vertically scrollable column. I have tried multiple things again and again but the vertical scrolling just doesn't seem to work. This is the kind of layout I want.

Container(
 padding: EdgeInsets.all(20),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
               Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),
                  Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),
);

Can anyone tell me what I am doing wrong? I have been stuck in this for a long time now. The horizontal list does scroll but the vertical scroll is not working.

Answer 1

Try using SingleChildScrollView and Row instead of ListView

For example,

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("4 Horizontals"),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget getWid() {
    return Container(
      color: Colors.pink,
      width: 200,
      height: 200,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(5),
      child: Center(
        child: Text(
          "Hello",
          style: TextStyle(
            color: Colors.white,
            fontSize: 30
          ),
        ),
      ),
    );
  }
}