NamanShergill / flutter_scroll_to_top

A wrapper to show a scroll to top prompt to the user on scrollable widgets.
MIT License
17 stars 8 forks source link

PrimaryScrollController has multiple positions for multiple ScrollViews in the NestedScrollView body, throwing multiple errors in the console #11

Closed NamanShergill closed 2 years ago

NamanShergill commented 2 years ago

Caused by these issues: https://github.com/flutter/flutter/issues/36419 https://github.com/flutter/flutter/issues/81619

NamanShergill commented 2 years ago

Trying out a workaround here, but it still needs some work https://github.com/NamanShergill/flutter_scroll_to_top/blob/2ad150db1959f79b54ae8c74b1b209ab316ffbae/lib/src/scroll_wrapper.dart#L46

InAnadea commented 2 years ago

Trying out a workaround here, but it still needs some work

https://github.com/NamanShergill/flutter_scroll_to_top/blob/2ad150db1959f79b54ae8c74b1b209ab316ffbae/lib/src/scroll_wrapper.dart#L46

How to use it?

NamanShergill commented 2 years ago

Trying out a workaround here, but it still needs some work https://github.com/NamanShergill/flutter_scroll_to_top/blob/2ad150db1959f79b54ae8c74b1b209ab316ffbae/lib/src/scroll_wrapper.dart#L46

How to use it?

Here you go, I set it up in one of my projects https://github.com/NamanShergill/diohub/blob/issues_pulls_gql_migration/lib/common/misc/nested_scroll.dart

You will have to replace your nested scroll view implementation with this and it should work, albeit the animations would be slightly different.

InAnadea commented 2 years ago

Trying out a workaround here, but it still needs some work https://github.com/NamanShergill/flutter_scroll_to_top/blob/2ad150db1959f79b54ae8c74b1b209ab316ffbae/lib/src/scroll_wrapper.dart#L46

How to use it?

Here you go, I set it up in one of my projects https://github.com/NamanShergill/diohub/blob/issues_pulls_gql_migration/lib/common/misc/nested_scroll.dart

You will have to replace your nested scroll view implementation with this and it should work, albeit the animations would be slightly different.

Can't use it with a refresh indicator and bouncing scroll physics(((

NamanShergill commented 2 years ago

Trying out a workaround here, but it still needs some work

https://github.com/NamanShergill/flutter_scroll_to_top/blob/2ad150db1959f79b54ae8c74b1b209ab316ffbae/lib/src/scroll_wrapper.dart#L46

How to use it?

Here you go, I set it up in one of my projects https://github.com/NamanShergill/diohub/blob/issues_pulls_gql_migration/lib/common/misc/nested_scroll.dart

You will have to replace your nested scroll view implementation with this and it should work, albeit the animations would be slightly different.

Can't use it with a refresh indicator and bouncing scroll physics(((

Hmm, really? I have both in my project under it, it was working for me.

Unfortunately for now this workaround is the only option as the issue is caused by a framework limitation. You could try playing around with the scroll absorber function to modify the behaviour to fit more into your needs.

I'll think about if I can workaround this issue in the library itself, in the meantime.

InAnadea commented 2 years ago

Can You provide an example for NestedScroll usage with SliverAppBar and TabView with scrollable bodies wrapped in ScrollWrapper? I trying to create a SliverAppBar with a TabBar. Each tab contains a ScrollWrapper and RefreshIndicator.

NestedScroll(
  headerBuilder: (context, innerBoxIsScrolled) => [
    AppBarWithTabBar(
      ....
  ),
],
body: (context, nestedScrollController) => TabBarView(
  children: [
    PostsFeedListView(
      isNested: true,
      nestedScrollController: nestedScrollController,
      classId: classId,
      basePostsRequest: PostsRequest(
        text: _currentSearchText,
      ),
    ),
    ...

Here nestedScrollController isPrimaryScrollController.of(context) from NestedScroll

PostFeedListView:

return ScrollWrapper.nsvMultipleScrollViews(
  nestedScrollViewController: widget.nestedScrollController!,
  promptAlignment: Alignment.bottomRight,
  builder: (context, props) => RefreshIndicator(
    onRefresh: _onRefresh,
    child: NestedCustomScrollView(
      // controller: props.scrollController,
      slivers: _customScrollView(context),
    ),
  ),
);

class NestedCustomScrollView extends StatelessWidget {
  const NestedCustomScrollView({
    Key? key,
    required this.slivers,
    this.controller,
  }) : super(key: key);

  final List<Widget> slivers;
  final ScrollController? controller;

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollUpdateNotification>(
      // Prevents scroll notifications from propogating up to parent [NestedScroll]
      // to prevent scrolling from breaking.
      onNotification: (notification) => true,
      child: CustomScrollView(
        controller: controller,
        slivers: slivers,
      ),
    );
  }
}

If I add the controller in NestedCustomScrollView, ScrollWrapper will work, but SliverAppBar will stop working

NamanShergill commented 2 years ago

I have added infinite pagination (part of a custom scroll view under tab views in almost all parts of my project)

https://github.com/NamanShergill/diohub/blob/751dfb94282b48d873fe18d1aa98005acaae74fd/lib/common/wrappers/infinite_scroll_wrapper.dart#L134

However, I haven't used sliverappbar as I currently use my own implementation instead of it, so I never was able to test that.

This approach is very hacky as well and breaks scroll to top behaviour on iOS on status bar tap so not recommended either.

I'm gonna try thinking of some library side fix, but that is going to be tricky as this is a framework issue at the moment.

If you need an urgent fix, downgrading to version 1.2.0 will help, as it does not use PrimaryScrollController in its implementation. However, it is much more basic in design so that's the trade off for now.

InAnadea commented 2 years ago

Thank you! But it's not working with the sliver app bar. With _NestedScrollController too(( Waiting for the flutter team fixes.

NamanShergill commented 2 years ago

Thank you! But it's not working with the sliver app bar. With _NestedScrollController too((

Waiting for the flutter team fixes.

There's actually a related PR open on the flutter repository right now, so hopefully, soon.

https://github.com/flutter/flutter/pull/102099

NamanShergill commented 2 years ago

@InAnadea This issue should be fixed in 2.2.2-beta

Have a look if this works for you. No hacky NestedScrollView changes required.

InAnadea commented 2 years ago

@InAnadea This issue should be fixed in 2.2.2-beta

Have a look if this works for you. No hacky NestedScrollView changes required.

Thank you!