Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can't scroll properly when using 2 ListView.builder

I can’t scroll properly when using 2 ListView.builder

I am new to flutter and can’t scroll properly. I am using 2 listView.builders and I don’t know what I am doing wrong. I have tried to change physics form NeverScrollableScrollPhysics to AlwaysScrollableScrollPhysics but still not scrolling properly

Here is the code.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import 'package:flutter/material.dart';
import 'package:map/containerWidget.dart';

class Body extends StatefulWidget {
  const Body({Key? key}) : super(key: key);

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: 3,
            itemBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 10000,
                child: Padding(
                  padding: const EdgeInsets.only(left: 5, right: 5, top: 5),
                  child: Scaffold(
                    appBar: AppBar(),
                    body: DefaultTabController(
                      length: 4,
                      child: NestedScrollView(
                        headerSliverBuilder: (context, _) {
                          return [
                            SliverList(
                              delegate: SliverChildListDelegate(
                                [
                                  ListView.builder(
                                      shrinkWrap: true,
                                      physics:
                                          const AlwaysScrollableScrollPhysics(),
                                      itemCount: 3,
                                      itemBuilder:
                                          (BuildContext context, int index) {
                                        return Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment
                                                    .center,
                                            children: const [
                                          SizedBox(
                                              width: 300,
                                              height: 300,
                                              child: Card(
                                                color: Colors.blue,
                                              )),
                                        ]);
                                      })
                                ],
                              ),
                            ),
                          ];
                        },
                        body: Column(
                          children: <Widget>[
                            Material(
                              color: Colors.white,
                              child: TabBar(
                                isScrollable: true,
                                labelColor: Colors.black,
                                unselectedLabelColor: Colors.grey[400],
                                indicatorWeight: 1.5,
                                indicatorColor: Colors.black,
                                tabs: const [
                                  Tab(
                                    text: "1",
                                  ),
                                  Tab(
                                    text: "2",
                                  ),
                                  Tab(
                                    text: "3",
                                  ),
                                  Tab(
                                    text: "4",
                                  ),
                                ],
                              ),
                            ),
                            const Expanded(
                              child: TabBarView(
                                children: [
                                  ContainerWidget(),
                                  ContainerWidget(),
                                  ContainerWidget(),
                                  ContainerWidget(),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }));
  }
}

>Solution :

You should not nest two ListView widgets to achieve multiple lists.
This creates a Conflict.

To add Two Lists without any scrolling glitch. Use CustomScrollView widget.
Example
https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

follow above link it has detailed explanation on the usage.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading