flutter_scroll_to_top

A wrapper to show a scroll to top prompt to the user on ScrollView widgets.

Installing

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter_scroll_to_top: ^2.2.4

Import the package

import 'package:flutter_scroll_to_top/flutter_scroll_to_top.dart';

ScrollWrapper

Just wrap the scrollable widget you want to show the scroll to top prompt over with a ScrollWrapper.

ScrollWrapper(
    builder: (context, properties) => ListView.builder(
        itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

ScrollView Properties

If the child ScrollView has different properties for scrollController, scrollDirection, primary or reverse parameters than the default values, you need to pass them to the ScrollWrapper widget as it requires the same parameters. It provides a ScrollViewProperties object in the builder callback that you can use to access the properties in the ScrollView widget.

ScrollWrapper(
    primary: true,
    scrollDirection: Axis.horizontal,
    reverse: true,
    builder: (context, properties) => ListView.builder(
        controller: properties.scrollController,
        scrollDirection: properties.scrollDirection,
        reverse: properties.reverse,
        primary: properties.primary,
        itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

Customisation

You can pass the following parameters to customise the prompt accordingly

• enabledAtOffset - At what scroll offset to enable the prompt on.
• alwaysVisibleAtOffset - If the prompt is to be always visible at the provided offset. Setting this to false only shows the prompt when the user starts scrolling upwards. Default value is false.
• scrollOffsetUntilVisible - Offset should the user scroll in the opposite direction before the prompt becomes visible.
• scrollOffsetUntilHide - Offset should the user scroll before the prompt hides itself, if visible.
• promptAlignment - Where on the widget to align the prompt.
• promptDuration - Duration it takes for the prompt to come into view/vanish.
• promptAnimationCurve - Animation Curve that the prompt will follow when coming into view.
• promptAnimationType - PromptAnimation that the prompt follows when animating. Has three options, fade, scale and size.
• scrollToTopDuration - Duration it takes for the page to scroll to the top on prompt button press.
• scrollToTopCurve - Animation Curve for scrolling to the top.
• promptTheme - You can pass PromptButtonTheme to modify the prompt button further. It has the following parameters:
  • padding - Padding around the prompt button.
  • iconPadding - Padding around the icon inside the button.
  • icon - The icon inside the button.
  • color - Color of the prompt button.
  • elevation - Elevation of the button.

ScrollWrapper(
    promptAlignment: Alignment.topCenter,
    promptAnimationCurve: Curves.elasticInOut,
    promptDuration: const Duration(milliseconds: 400),
    enabledAtOffset: 300,
    scrollOffsetUntilVisible: 500,
    promptTheme: const PromptButtonTheme(
    icon: Icon(Icons.arrow_circle_up, color: Colors.amber),
    color: Colors.deepPurpleAccent,
    iconPadding: EdgeInsets.all(16),
    padding: EdgeInsets.all(32)),
    builder: (context, properties) => ListView.builder(
        controller: properties.scrollController,
        scrollDirection: properties.scrollDirection,
        reverse: properties.reverse,
        primary: properties.primary,
            itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

Custom Prompt Widget

You can replace the default prompt widget with a widget of your choosing by passing it off in the promptReplacementBuilder parameter.

ScrollWrapper(
    promptReplacementBuilder: (context, function) => MaterialButton(
        onPressed: () => function(),
        child: const Text('Scroll to top'),
    ),
    builder: (context, properties) => ListView.builder(
        controller: properties.scrollController,
        scrollDirection: properties.scrollDirection,
        reverse: properties.reverse,
        primary: properties.primary,
        itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

The prompt shows up inconsistently if I have multipe scrollviews listening to the same scroll controller, how do I fix it?

This is a limitation of the way Flutter handles this scenario. If you are receiving this error (likely due to multiple scrollables under a NestedScrollView), this library bundles a modified version of the scrollviews which would fix this issue.

To use them, add the following import:

import 'package:flutter_scroll_to_top/scroll_view.dart' as scrollview;

Then replace your scrollview in the following way:

Before

ScrollWrapper(
    builder: (context, properties) => ListView.builder(
        itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

After

ScrollWrapper(
    builder: (context, properties) => scrollview.ListView.builder(
        properties: properties,
        itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
                title: Text('Tile $index'),
                tileColor: Colors.grey.shade200,
            ),
        ),
    ),
)

Changelog

2.3.2 - 2024-03-27

Changed

• Version bump from 2.3.1 to 2.3.2 (Deprecated this package).

2.3.1 - 2024-02-01

Changed

• Version bump from 2.3.0 to 2.3.1 (Resolve package version confusions).

2.3.0 - 2022-10-25

Changed

• Make primary bool nullable in modified scrollviews for flutter 3.3.0.

[2.2.4] - 11 June 2022.

• Bundled modified scrollviews to work around PrimaryScrollController limitations.

[2.1.1] - 22 November 2021.

• Fixed prompt not hiding on tap.

[2.1.0] - 22 November 2021.

• Added scrollOffsetUntilHide parameter.
• Slightly changed default values of parameters.

[2.0.1] - 22 November 2021.

• BREAKING CHANGE - Replaced child parameter with builder.
• BREAKING CHANGE - Renamed promptScrollOffset to enabledAtOffset.
• Added scrollDirection, primary, reverse, scrollOffsetUntilVisible and alwaysVisibleAtOffset parameters.
• Added onPromptTap callback.
• Made scrollController parameter nullable and added PrimaryScrollController.of(context) fallback.
• Better behaviour for horizontal ScrollViews.
• Changed default behaviour to only show prompt on upwards scroll. Can be disabled by setting alwaysVisibleAtOffset to true.
• Made ScrollWrapper and PromptButtonTheme constructors const.

[1.2.0] - 21 November 2021.

• Added elevation to PromptButtonTheme
• Added AppBarTheme's colors as default to the button, so it matches the AppBar
• Added a didUpdateWidget override, so the PromptButtonTheme updates on hot reload

[1.1.0] - 18 April 2021.

• Added promptAnimationType to specify the kind of animation the prompt shows up with.

[1.0.6] - 17 April 2021.

• Added scrollToTopDuration and scrollToTopCurve parameters.

[1.0.5] - 17 April 2021.

• Alignment fix.

[1.0.4] - 17 April 2021.

• Removed promptTheme assert.

[1.0.3] - 17 April 2021.

• Updated description.

[1.0.0] - 17 April 2021.

• Initial Release.