How to prevent auto scroll down on tab2 when user scroll down on tab1?

[mesuutt]

Hi, I am new to flutter and I have a problem that I couldn't solve.

I asked the question on stackoverflow but I haven't found the solution. So I am asking at here.

I created a screen using SliverAppBar, SliverPersistentHeader, TabView and ListView.

If I scroll down in tab1, tab2 scrolling down automatically. So If I swith to tab2, list not starting from first item. How can I prevent this?

Simplified build function content of screen:

return Scaffold(
  body: DefaultTabController(
    length: 2,
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            expandedHeight: 120.0,
            floating: false,
            forceElevated: innerBoxIsScrolled,
            backgroundColor: Colors.green,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              centerTitle: true,
              title: Text(
                spaceBarFlatName,
                style: TextStyle(color: config.topBarTextColor),
                textAlign: TextAlign.left,
                overflow: TextOverflow.ellipsis,
                softWrap: true,
                maxLines: 1,
              ),
              background: Container(
                alignment: Alignment.topCenter,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Text(
                          '${formatMoney(periodBalance.abs())}',
                          style: TextStyle(
                              color: config.topBarTextColor,
                              fontSize: 30.0,
                              fontWeight: FontWeight.bold),
                        ),
                        Icon(FontAwesomeIcons.liraSign,
                            color: textColor, size: 24.0),
                        Text(" (Alacak)",
                          style: TextStyle(
                            color: config.topBarTextColor,
                            fontSize: 20.0,
                          ),
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.center,
                    ),
                    Container(width: 0,height: 0)
                  ],
                ),
              ),
            ),
          ),
          SliverPersistentHeader(
            pinned: true,
            delegate: _SliverAppBarDelegate(
              TabBar(
                tabs: [
                  Tab(child: Text("Borçlarım"),
                  Tab(child: Text("Ödemelerim"),
                ],
              ),
            ),
          ),
        ];
      },
      body: TabBarView(
        children: [
          Container(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: debits.length,
                //itemExtent: 1.0,
                itemBuilder: (context, index) {
                  return DebitCard(debits[index]);
                }),
          ),
          Container(
            child: ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: receipts.length,
                //itemExtent: 1.0,
                itemBuilder: (context, index) {
                  return ReceiptCard(receipts[index]);
                }),
          ),
        ]
      ),
    ),
  ),
);

Initial state of the screen:

If I scroll tab1 shown as below:

Tab2 scrolling down automatically shown as below when I scroll tab1 which I don't want to be:

I want when user switch to tab2, scroll should start in other words why tab2 scrolling automatically when I scroll on tab1?

---

$ flutter doctor -v

[✓] Flutter (Channel beta, v1.1.8, on Linux, locale en_US.UTF-8)
    • Flutter version 1.1.8 at /opt/flutter-sdk/flutter
    • Framework revision 985ccb6d14 (5 weeks ago), 2019-01-08 13:45:55 -0800
    • Engine revision 7112b72cc2
    • Dart version 2.1.1 (build 2.1.1-dev.0.1 ec86471ccc)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /opt/android-sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /opt/android-sdk
    • Java binary at: /opt/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
    • All Android licenses accepted.

[✓] Android Studio (version 3.3)
    • Android Studio at /opt/android-studio
    • Flutter plugin version 32.0.1
    • Dart plugin version 182.5215
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)

[!] IntelliJ IDEA Ultimate Edition (version 2018.2)
    • IntelliJ at /home/mesuutt/tmp/tools/idea-IU-182.4892.20
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

[zoechi]

To investigate we would need a minimal runnable reproduction
as a single file so that we can just copy your code into lib/main.dart of a new project and run to reproduce.

[mesuutt]

You can look at this gist for example code.

[zoechi]

Similar to #19720

[zmtzawqlp]

You can look at this gist for example code.

you can try this to fix your problem https://pub.flutter-io.cn/packages/extended_nested_scroll_view

[zoechi]

Does #27928 (comment) help?

[mesuutt]

To get rid of this you can have each tab bar be made of different Nested Scroll View instead of sharing a single one.

@zoechi I didn't understand how to use different NestedScrollView for tabs. Because there is only one TabBar.

[zoechi]

@mesuutt please check again #27928 (comment)