[Bug report] The provided ScrollController is currently attached to more than one ScrollPosition. #128

MichalNemec · 2023-03-20T01:38:11Z

Version

6.0.0

Platforms

macOS, Web, Windows

Device Model

Macbook air m1 2020

flutter info

[✓] Flutter (Channel stable, 3.7.4, on macOS 13.2.1 22D68 darwin-arm64, locale en-CZ)
    • Flutter version 3.7.4 on channel stable at /Users/michalnemec/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b4bce91dd0 (4 weeks ago), 2023-02-21 09:50:50 +0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/michalnemec/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.76.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

How to reproduce?

Make nestedscrollview with controller
make tabs keep alive
content of tabs is customscrollview
see errors when hovering over scrollbar.

Logs

Error: 'The provided ScrollController is currently attached to more than one ScrollPosition.
The Scrollbar requires a single ScrollPosition in order to be painted.
When the scrollbar is interactive, the associated ScrollController must only have one ScrollPosition attached.The provided ScrollController must be unique to one ScrollView widget.' has been skipped to due to duplication occurence within 3000 ms.

Example code (optional)

TabBar get _tabBar => TabBar(
        controller: _tabController,
        tabs: const [
          Tab(
            text: 'foo',
          ),
          Tab(
            text: 'bar',
          ),
        ],
      );

ExtendedNestedScrollView(
            physics: AlwaysScrollablePhysics(),
            floatHeaderSlivers: true,
            onlyOneScrollInBody: true,
            controller: scrollController,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                  SliverAppBar(
                    title: Text('title'),
                  ),
                SliverAppBar(
                  pinned: true,
                  bottom: PreferredSize(
                    preferredSize: const Size.fromHeight(50 + 40),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 4),
                          child: TextField(
                            decoration: InputDecoration(
                              hintText: 'search',
                            ),
                          ),
                        ),
                        _tabBar,
                      ],
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              physics: const NeverScrollableScrollPhysics(),
              children: const [
                Tab1(),
                Tab2(),
              ],
            ),
          ),


class Tab1 extends ConsumerStatefulWidget {
  const Tab1({super.key});

  @override
  State<Tab1> createState() => _Tab1State();
}

class _FollowingTabState extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
  bool _shouldKeepAlive = true;

  @override
  bool get wantKeepAlive => _shouldKeepAlive;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CustomScrollView(
      physics: scrollingPhysics(),
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                leading: Container(
                  padding: const EdgeInsets.all(8),
                  width: 100,
                  color: Colors.red,
                  child: const Placeholder(),
                ),
                title: Text('tab1 ${index + 1}', textScaleFactor: 2),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    );
  }
}

class Tab2 extends ConsumerStatefulWidget {
  const Tab2({super.key});

  @override
  State<Tab2> createState() => _Tab2State();
}

class _FollowingTabState extends State<Tab2> with AutomaticKeepAliveClientMixin<Tab2> {
  bool _shouldKeepAlive = true;

  @override
  bool get wantKeepAlive => _shouldKeepAlive;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CustomScrollView(
      physics: scrollingPhysics(),
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                leading: Container(
                  padding: const EdgeInsets.all(8),
                  width: 100,
                  color: Colors.red,
                  child: const Placeholder(),
                ),
                title: Text('tab2 ${index + 1}', textScaleFactor: 2),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    );
  }
}

How to create Nested scrollview with kept alive tabs and have scrollbar there in any way that it just works?

jhmarryme · 2023-10-18T05:53:09Z

Version

6.0.0

Platforms

macOS, Web, Windows

Device Model

Macbook air m1 2020

flutter info

[✓] Flutter (Channel stable, 3.7.4, on macOS 13.2.1 22D68 darwin-arm64, locale en-CZ)
    • Flutter version 3.7.4 on channel stable at /Users/michalnemec/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b4bce91dd0 (4 weeks ago), 2023-02-21 09:50:50 +0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/michalnemec/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] VS Code (version 1.76.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.60.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.2.1 22D68 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 111.0.5563.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

How to reproduce?

Make nestedscrollview with controller make tabs keep alive content of tabs is customscrollview see errors when hovering over scrollbar.

Logs

Error: 'The provided ScrollController is currently attached to more than one ScrollPosition.
The Scrollbar requires a single ScrollPosition in order to be painted.
When the scrollbar is interactive, the associated ScrollController must only have one ScrollPosition attached.The provided ScrollController must be unique to one ScrollView widget.' has been skipped to due to duplication occurence within 3000 ms.

Example code (optional)

TabBar get _tabBar => TabBar(
        controller: _tabController,
        tabs: const [
          Tab(
            text: 'foo',
          ),
          Tab(
            text: 'bar',
          ),
        ],
      );

ExtendedNestedScrollView(
            physics: AlwaysScrollablePhysics(),
            floatHeaderSlivers: true,
            onlyOneScrollInBody: true,
            controller: scrollController,
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                  SliverAppBar(
                    title: Text('title'),
                  ),
                SliverAppBar(
                  pinned: true,
                  bottom: PreferredSize(
                    preferredSize: const Size.fromHeight(50 + 40),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 4),
                          child: TextField(
                            decoration: InputDecoration(
                              hintText: 'search',
                            ),
                          ),
                        ),
                        _tabBar,
                      ],
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              physics: const NeverScrollableScrollPhysics(),
              children: const [
                Tab1(),
                Tab2(),
              ],
            ),
          ),


class Tab1 extends ConsumerStatefulWidget {
  const Tab1({super.key});

  @override
  State<Tab1> createState() => _Tab1State();
}

class _FollowingTabState extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
  bool _shouldKeepAlive = true;

  @override
  bool get wantKeepAlive => _shouldKeepAlive;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CustomScrollView(
      physics: scrollingPhysics(),
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                leading: Container(
                  padding: const EdgeInsets.all(8),
                  width: 100,
                  color: Colors.red,
                  child: const Placeholder(),
                ),
                title: Text('tab1 ${index + 1}', textScaleFactor: 2),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    );
  }
}

class Tab2 extends ConsumerStatefulWidget {
  const Tab2({super.key});

  @override
  State<Tab2> createState() => _Tab2State();
}

class _FollowingTabState extends State<Tab2> with AutomaticKeepAliveClientMixin<Tab2> {
  bool _shouldKeepAlive = true;

  @override
  bool get wantKeepAlive => _shouldKeepAlive;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return CustomScrollView(
      physics: scrollingPhysics(),
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (context, index) {
              return ListTile(
                leading: Container(
                  padding: const EdgeInsets.all(8),
                  width: 100,
                  color: Colors.red,
                  child: const Placeholder(),
                ),
                title: Text('tab2 ${index + 1}', textScaleFactor: 2),
              );
            },
            childCount: 50,
          ),
        ),
      ],
    );
  }
}

How to create Nested scrollview with kept alive tabs and have scrollbar there in any way that it just works?

hello， you can set scrollerController to CustomScrollView，like this：
@OverRide
Widget build(BuildContext context) {
super.build(context);
return CustomScrollView(
physics: scrollingPhysics(),
controller: ScrollController(), //add this
slivers: [
.....
],
);
}

MichalNemec · 2023-10-18T06:05:57Z

if customscrollview has its own scrollcontroller, then its not scrolling with tabs, or did it change in flutter v 3.13?

jhmarryme · 2023-10-18T06:14:47Z

if customscrollview has its own scrollcontroller, then its not scrolling with tabs, or did it change in flutter v 3.13?

You can try another solution,
flutter/flutter#93862

add primary: false to CustomScrollView, like this

CustomScrollView(
primary: false,
controller: _tab1ScrollController,
......

feduke-nukem · 2023-10-26T10:53:13Z

Same

GuoguoDad · 2023-12-27T06:19:32Z

同样的问题，6.2.0版本的问题，回退到 6.1.2就没问题了

zmtzawqlp added the StackOverflow issue can be asked in StackOverflow label Mar 20, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug report] The provided ScrollController is currently attached to more than one ScrollPosition. #128

[Bug report] The provided ScrollController is currently attached to more than one ScrollPosition. #128

MichalNemec commented Mar 20, 2023 •

edited

jhmarryme commented Oct 18, 2023

Version

Platforms

Device Model

flutter info

How to reproduce?

Logs

Example code (optional)

MichalNemec commented Oct 18, 2023

jhmarryme commented Oct 18, 2023

feduke-nukem commented Oct 26, 2023

GuoguoDad commented Dec 27, 2023

[Bug report] The provided ScrollController is currently attached to more than one ScrollPosition. #128

[Bug report] The provided ScrollController is currently attached to more than one ScrollPosition. #128

Comments

MichalNemec commented Mar 20, 2023 • edited

Version

Platforms

Device Model

flutter info

How to reproduce?

Logs

Example code (optional)

jhmarryme commented Oct 18, 2023

Version

Platforms

Device Model

flutter info

How to reproduce?

Logs

Example code (optional)

MichalNemec commented Oct 18, 2023

jhmarryme commented Oct 18, 2023

feduke-nukem commented Oct 26, 2023

GuoguoDad commented Dec 27, 2023

MichalNemec commented Mar 20, 2023 •

edited