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

flutter listview auto scroll to bottom
flutter listview disable scroll
scroll physics flutter
scroll configuration flutter
flutter singlechildscrollview
move screen up when keyboard appears flutter
flutter scroll
flutter scrollbar position

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?

I created simple demo app for demonstrate the issue, you can look at this gist.

Initial state of the screen:

If I scroll tab1 shown as below:

Tab2 scrolling down automatically shown as below when I scroll tab1:

The reason behind this issue is that both tabs are using the same TabController which is in your case DefaultTabController which is impilictly defining tab controllers for children widgets, you have to explicitly set a separate TabController for each one of your tabs so its actions is independent of the other, but you will extra code to manage your new controllers:

here's the example:

inside your nestedScrollView

child: nestedScrollView(
controller: // add a `ScrollController` here
),

Prevent content from scrolling beneath SliverAppBar, This should be the maximum state you could scroll down: detail please reference this https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver -app- text: "Tab 1"), Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"), ], ), ) -396547.jpeg?auto=compress&cs=tinysrgb&h=350", fit: BoxFit.cover,� Problem: Scroll position of the tabView is not restored correctly when one of the tabView is scrolled to the top (revealing the sliverAppBar). The other tabView will also scrolled to the top (losing its previous scroll position).

Try wrapping the TabBarView in a separate Scaffold which is inside a StatefulWidget. That way you can ensure that the tab body is rebuilt everytime you change the tab so the scroll position won't be preserved.

Example:

return Scaffold(
  body: DefaultTabController(
    length: 2,
    child: NestedScrollView(
      headerSliverBuilder: /* Your headerSliverBuilder code */
      body: MyCustomTabWidget(),
    )
);

class MyCustomTabWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyCustomTabWidgetState();
  }
}

class MyCustomTabWidgetState extends State<MyCustomTabWidget > {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new TabBarView(
        children: [
          /*Code for both the Containers containing ListViews*/
        ]
      )
    )
  }
}

How to prevent auto scroll down on tab2 when user scroll , 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 [✓]� The problem is that when i scroll through one list in a specific tab, the scroll position affects all the other lists in the other tabs. Even if i do add "ScrollController" to each of the listview (in tabs), The listBuilder inside the tab scroll gets separated from the "NestedScrollView" here is an example code :

I have modified your gist with PageStorageKey. See below working example:

import 'package:flutter/material.dart';

void main() async {
    runApp(new TestApp());
}


class TestApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            theme: new ThemeData(primarySwatch: Colors.yellow),
            home: new TestAppHomePage(),
        );
    }
}

class TestAppHomePage extends StatefulWidget {

    @override
    State createState() => new TestAppHomePageState();
    //FPDetailScreen({Key key, @required this.period}) : super(key: key);
}

class TestAppHomePageState extends State<TestAppHomePage>
        with SingleTickerProviderStateMixin {

    @override
    Widget build(BuildContext context) {

        return new Scaffold(
            //bottomNavigationBar: bottomNavBar,
            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(
                                        "Foo Bar Baz",
                                        style: TextStyle(color: Colors.white),
                                        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(
                                                            '10.00 TL',
                                                            style: TextStyle(
                                                                    color: Colors.white,
                                                                    fontSize: 20.0,
                                                                    fontWeight: FontWeight.bold),
                                                        ),

                                                    ],
                                                    mainAxisAlignment: MainAxisAlignment.center,
                                                ),
                                                Container(
                                                    width: 0,
                                                    height: 0,
                                                )
                                            ],
                                        ),
                                    ),
                                    //background: ,
                                ),
                            ),
                            SliverPersistentHeader(
                                pinned: true,
                                delegate: _SliverAppBarDelegate(
                                    TabBar(
                                        tabs: [
                                            Tab(
                                                child: Text(
                                                    "Tab1",
                                                    style: TextStyle(
                                                            color: Colors.black,
                                                            fontWeight: FontWeight.bold),
                                                ),
                                            ),
                                            Tab(
                                                child: Text(
                                                    "Tab2",
                                                    style: TextStyle(
                                                            color: Colors.black,
                                                            fontWeight: FontWeight.bold),
                                                ),
                                            ),
                                        ],
                                    ),
                                ),
                            ),
                        ];
                    },

                    body:TabBarView(
                            //controller: _tabController,
                            children: [
                                CardList('one'),
                                CardList('two'),
                    ]),
                ),
            ),

        );

    }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
    _SliverAppBarDelegate(this._tabBar);

    final TabBar _tabBar;

    @override
    double get minExtent => _tabBar.preferredSize.height;
    @override
    double get maxExtent => _tabBar.preferredSize.height;

    @override
    Widget build(
            BuildContext context, double shrinkOffset, bool overlapsContent) {
        return new Container(
            color: Colors.white,
            child: _tabBar,
        );
    }

    @override
    bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
        return false;
    }
}




class CardList extends StatelessWidget {
    final String listKey;

    CardList(this.listKey);

    @override
    Widget build(BuildContext context) {
        return Container(
            child: ListView.builder(
                    key: PageStorageKey<String>(listKey),
                    scrollDirection: Axis.vertical,
                    shrinkWrap: true,
                    itemCount: 20,
                    //itemExtent: 1.0,
                    itemBuilder: (context, index){
                        return new ListTile(
                            title: new Text("Item $index"),
                        );
                    }),
        );
    }
}

How to prevent auto scroll down on tab2 when user , on tab1? Hi, I am new to flutter and I have a problem that I couldn't solve. If I scroll down in tab1, tab2 scrolling down automatically. How can I prevent this? Steps to Reproduce Change tab to Tab 2 Scroll inner list in Tab 2 Change tab to Tab 1 Inner list in Tab 1 has also scrolled If we switch tabs, States outside the screen will be disposed.

How to prevent auto scroll down on tab2 when user - csharp, How to prevent auto scroll down on tab2 when user scroll down on tab1 in flutter? - flutter. Lock worksheet screen to prevent scrolling with VBA code. Here also is a simple code for you to solve this job, please do as follows: 1. Hold down the ALT + F11 keys to open the Microsoft Visual Basic for Applications window. 2. Click Insert > Module, and paste the following code in the Module Window. VBA code: Lock worksheet screen to prevent

How to make the activity stack null in flutter? - flutter - csharp, Main.dart library flutter_walkthrough; import 'package:flutter/material.dart'; How to prevent auto scroll down on tab2 when user scroll down on tab1 in flutter? In any Windows window, when I move the mouse pointer to that window it automatically scrolls down without my touching the mouse wheel. This only happens in the actual Windows windows such as settings, the start menu and the live tiles. It does not happen with Edge or any non Windows software as the scroll wheel works correctly.

Android scrollview disable auto scroll, App Requirement. flutter. web If child is not a ScrollView , it is automatically embedded in a If I scroll down in tab1, tab2 scrolling down automatically. First of all turn on the android phone. auto: Let the Android System use its heuristics to� Auto-Play Videos Scrolling through your newsfeed, there are some videos you just do not want to see but with no warning they play anyway. To stop videos from auto playing all you have to do is go to “Settings,” click on the “Video” section, select the drop-down menu to the right of “Auto-Play Videos” and switch it from default to off.

Comments
  • stackoverflow.com/questions/54689594/… looks similar
  • I didn't understand completely. I am new to flutter and mobile app development.
  • this article will clarify what I explained : docs.flutter.io/flutter/material/…
  • How can I open related tab content when user click to tabs if there is seperate TabBarViews for each tab?
  • My apologies I think I haven't explained it well in the example, it shouldn't be a separate TabBarView for each tab. I meant to wrap the entire content on TabBarView inside a Scaffold which is in a StatefulWidget. I'll update the example code accordingly.
  • Wrapping TabBarView with Scaffold solved problem, now when I scroll on tab1, tab2 not scrolling automatically but caused another problem: If I scroll down on the screen, SliverAppBar not scrolling automatically, SliverAppBar should scroll first then tab content should start to scroll.
  • I haven't tried running my example with SilverAppBar yet. I'll try running the code with SilverAppBar and post an update in some time.
  • Not worked. Tab2 should not be scrolled when I scroll at tab1 or vice verse.
  • It's working as expected for me, have a look at the screen record: drive.google.com/open?id=1lyIkJClPgJ4OsAsgaFo2p142HRHJVFBE
  • At your gif tab2 scroll starting from item 2 not item 1, it should start from item 1