fluttercandies / extended_nested_scroll_view

extended nested scroll view to fix following issues. 1.pinned sliver header issue 2.inner scrollables in tabview sync issue 3.pull to refresh is not work. 4.do without ScrollController in NestedScrollView's body
MIT License
596 stars 120 forks source link

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

Open MichalNemec opened 1 year ago

MichalNemec commented 1 year ago

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 commented 11 months ago

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 commented 11 months ago

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

jhmarryme commented 11 months ago

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, https://github.com/flutter/flutter/issues/93862

add primary: false to CustomScrollView, like this

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

feduke-nukem commented 11 months ago

Same

GuoguoDad commented 9 months ago

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