How To Add TabBar with Horizontal And Vertical ListView In One Tab Scrolling In Respective Directions

Issue

Flutter newbie here if my code looks too messy. Managed to figure out a few basic layouts and have implemented a TabBar. In 2nd Tab(COMICS). I have a horizontal ListView and a vertical one. I just can't figure out how to make the horizontal ListView scroll without changing tabs.

How i create the tabs:

return NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return <Widget>[
        SliverAppBar(
          title: Text('NestedScrollView'),
        )
      ];
    },
    body: Scaffold(
      appBar: AppBar(
        toolbarHeight: 40,
        centerTitle: true,
        backgroundColor: Color(0xFFb92136),
        title: Text('Kata Kata African Cartoons'),
        // actions: [
        //   IconButton(onPressed: () {}, icon: Icon(Icons.search)),
        //   IconButton(onPressed: () {}, icon: Icon(Icons.more_vert))
        // ],
        bottom: TabBar(
          controller: tabController,
          tabs: [
            Tab(
              text: "VIDEOS",
            ),
            Tab(
              text: "COMICS",
            ),
            Tab(
              text: "MAGAZINE",
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: tabController,
        children: [
          VideosTab(),
          ComicsTab(),
          Magazines(),
        ],
      ),
    ));

Main body of comics tab

return Column(children: [
  Container(child: Card(
    elevation: 20,
    child: Column(
      children: [
        Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                  padding: EdgeInsets.all(5),
                  child: Text("Katakata Long Comics"))
            ]),
        Card(
          child: StreamBuilder(
            stream: ref.onValue,
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.hasData &&
                  !snapshot.hasError &&
                  snapshot.data.snapshot.value != null) {
                lists.clear();
                DataSnapshot dataValues = snapshot.data.snapshot;
                Map<dynamic, dynamic> values = dataValues.value as Map;
                values.forEach((key, values) {
                  lists.add(values);
                });

                return Container(
                  height: 200,
                  child: new ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    scrollDirection: Axis.horizontal,
                    shrinkWrap: true,
                    itemCount: lists.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Card(
                        margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
                        elevation: 20,
                        child: GestureDetector(
                          onTap: () {
                            String pdfurl = lists[index]["image"];
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => PDFViewer(
                                    url: pdfurl,
                                  ),
                                ));
                          },
                          child: Padding(
                            padding: EdgeInsets.all(5),
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Column(
                                  children: [
                                    Container(
                                      height: 100,
                                      width: 100,
                                      child: Image(
                                        image:
                                            NetworkImage(lists[index]["image"]),
                                      ),
                                    ),
                                    Text(lists[index]["name"]),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                );
              }

              return Container(child: Text("Add Plants"));
            },
          ),
        ),
      ],
    ),
  )),



  Container(child: Card(
    elevation: 20,
    child: Column(
      children: [
        Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Padding(
                  padding: EdgeInsets.all(5),
                  child: Text("Continuous Humour"))
            ]),
        Card(
          child: StreamBuilder(
            stream: secref.onValue,
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.hasData &&
                  !snapshot.hasError &&
                  snapshot.data.snapshot.value != null) {
                seclists.clear();
                DataSnapshot dataValues = snapshot.data.snapshot;
                Map<dynamic, dynamic> values = dataValues.value as Map;
                values.forEach((key, values) {
                  seclists.add(values);
                });

                return new ListView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: seclists.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                      margin: EdgeInsets.fromLTRB(2, 2, 2, 2),
                      elevation: 20,
                      child: GestureDetector(
                        onTap: () {
                          String pdfurl = seclists[index]["image"];
                          Navigator.push(
                              context,
                              MaterialPageRoute(
                                builder: (context) => PDFViewer(url: pdfurl,
                                ),
                              ));
                        },
                        child: Padding(
                          padding: EdgeInsets.all(5),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                height: 200,
                                width: 400,
                                child: Image(
                                  image:
                                  NetworkImage(seclists[index]["image"]),
                                ),
                              ),
                              Text(seclists[index]["name"]),
                            ],
                          ),
                        ),
                      ),
                    );
                  },
                );
              }

              return Container(child: Text("Add Plants"));
            },
          ),
        ),
      ],
    ),
  )),
]);

Solution

You have NeverScrollableScrollPhysics() defined as the physics for your listviews. That means they won't scroll even when there is no tabview around them. Also they won't absorb the scroll event and defer them to the tabview.

Answered By - MindStudio