Home > Blockchain >  Can't scroll properly when using 2 ListView.builder
Can't scroll properly when using 2 ListView.builder

Time:04-06

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.

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(),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }));
  }
}

CodePudding user response:

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.

  • Related