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

Overview

flutter_scroll_to_top

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

Installing

Add the following dependency to your pubspec.yaml file:

dependencies:
  flutter_scroll_to_top: ^1.1.0

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, and supply the ScrollController of the scrollable widget to the wrapper.

ScrollWrapper(
        scrollController: scrollController,
        child: ListView.builder(
          controller: scrollController,
          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

  • promptScrollOffset - At what scroll offset to show the prompt on.
  • 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.
ScrollWrapper(
        scrollController: scrollController,
        promptAlignment: Alignment.topCenter,
        promptAnimationCurve: Curves.elasticInOut,
        promptDuration: Duration(milliseconds: 400),
        promptScrollOffset: 300,
        promptTheme: PromptButtonTheme(
            icon: Icon(Icons.arrow_circle_up, color: Colors.amber),
            color: Colors.deepPurpleAccent,
            iconPadding: EdgeInsets.all(16),
            padding: EdgeInsets.all(32)),
        child: ListView.builder(
          controller: scrollController,
          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(
        scrollController: scrollController,
        promptReplacementBuilder: (BuildContext context, Function scrollToTop) {
          return MaterialButton(
            onPressed: () {
              scrollToTop();
            },
            child: Text('Scroll to top'),
          );
        },
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      )

NestedScrollView Implementation

The implementation is similar, just wrap your scrollable body with the ScrollWrapper and pass off the controller of the parent NestsedScrollView to the wrapper.

Check the example for code.

Comments
  • Floating Button Behaviour

    Floating Button Behaviour

    The scroll to top button currently appears at a fixed scroll off-set.

    I would be very interested in a behaviour similar to the SliverAppBar with floating: true, where the button would only appear if the user is scrolling up.

    (I also hope I am not too annoying with all the requests)

    opened by clragon 18
  • PrimaryScrollController Support

    PrimaryScrollController Support

    Currently, the ScrollWrapper explicitly demands a ScrollController.

    However, Flutter has this mechanic where it uses inherited widgets to pass a ScrollController through the widget tree by context. ListView and cohorts use this when primary is true and no ScrollController is passed.

    I feel like it would be nice to implement this here, because it could result in not having to pass a ScrollController to neither the ScrollWrapper nor the ListView.

    The PrimaryScrollController is documented and the exact usage is seen in the framework in scroll_view.dart

    opened by clragon 14
  • Improve PromptButtonTheme slightly

    Improve PromptButtonTheme slightly

    This is a PR with some slight improvements.

    • Added elevation to PromptButtonTheme
    • Removed ClipOval in favour of Material's clipBehaviour property
    • Added AppBarTheme's colors as default to the button, so it matches the AppBar
    • Removed cupertino.dart dependency, as it is not needed
    • Added a didUpdateWidget override, so the PromptButtonTheme updates on hot reload
    • Refactored child inside the build method to closer match standard flutter practices
    opened by clragon 10
  • [BUG] scroll to top button is displayed when scrollview changes size

    [BUG] scroll to top button is displayed when scrollview changes size

    Actual behavior: Having an infinite scroll list (items loaded on scrolling) when I scroll to top at the same time items are being loaded. Then the scroll to top button remains displays when the items get loaded (the scroll view changes height).

    Expected behavior: The scroll to top button should not display when the scroll view changes its size e.g. height.

    opened by KristianBalaj 8
  • scroll to bottom

    scroll to bottom

    I saw the package now supports both vertical and horizontal axis, which is very nice.

    It might be cool to have the option to pass the reverse boolean, which listviews etc also have, which makes the listview scroll to up instead of down.

    The package as is works fine, if the scrollview is reversed, but the button is misplaced.

    Now this isnt a feature that I personally would need, but I could imagine chat apps enjoying that. Apps like discord have a button like this one, it is simply located at the bottom, pointing down.

    Then again, their button also triggers something more than simply scrolling to the bottom, because of searching and inserting the user into the scrollview somewhere in the middle of nowhere etc... (maybe there could even be a VoidCallback that is called when scrolling back?)

    opened by clragon 7
  • Avoid prompt on specific scrollable

    Avoid prompt on specific scrollable

    when screen has multiple scrollable, for example , in my case screen has horizontal scroll [gridview] as well as vertical scroll [ListiVew] , so when i scroll grid view the promo appears on the screen , I want to avoid prompting at that time..

    opened by JhaNviSadhu 3
  • primary is bool? instead of bool

    primary is bool? instead of bool

    On the most recent stable version of flutter (3.3.0) I am getting the following error when building my app with the modified scroll views:

    ../Flutter/.pub-cache/hosted/pub.dartlang.org/flutter_scroll_to_top-2.2.4/Lib/src/modified_scrolls/sc
    roll view.dart:55:9:
    Error: A value of type ‘bool?' can't be assigned to a variable of type 'bool' because 'bool?'
    is nullable and ‘bool’ isn’t.
    primary ? PrimaryScrollController.of(context) : controller;
    
    ../Flutter/-pub-cache/hosted/pub.dartlang.org/flutter_scroll_to_top-2.2.4/Lib/sre/modified_scrolls/sc
    roll view.dart:69:30:
    Error: A value of type ‘bool?' can't be assigned to a variable of type 'bool' because 'bool?'
    is nullable and ‘bool’ isn’t.
    final scrollableResult = primary && scrollcontroller != null
    Error: Compilation failed.
    
    opened by GregPuccio 2
  • prevent stop tapping from hiding the button

    prevent stop tapping from hiding the button

    This PR aims to prevent the button from hiding if the user taps the screen to stop a ballistic scroll upwards.

    The small offset of 10 will prevent the button from hiding immediately, in cases where the scroll downwards is minimal.

    I did not test how well the value 10 works, and I did not include it in a parameter or a constant. Those things might need to be considered.

    opened by clragon 2
  • Is it possible to take control of status bar taps on iOS?

    Is it possible to take control of status bar taps on iOS?

    Right now there are problems with nested Scaffolds and detecting status bar taps for scroll to top. This would solve that, but the button on the top right is not as fluid appearing on iOS. Is it possible to modify this project to simply take control of the status bar (a transparent space over the status bar?) to mimic native iOS function?

    opened by mark8044 7
Owner
Naman Shergill
Naman Shergill
A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView

easy_scroll_to_index A new Flutter package support scroll to index for Listview, Gridview and NestedScrollView Author: DinhVanHung Demo Example: Displ

Dinh Hung 4 Nov 19, 2021
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jesús Rodríguez 44 Dec 6, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023
Scratch card widget which temporarily hides content from user.

scratcher Scratch card widget which temporarily hides content from user. Features Android and iOS support Cover content with full color or custom imag

Kamil Rykowski 405 Dec 27, 2022
A small attempt to make an e-commerce user interface in Flutter for Android and iOS.

Flutter ecommerce App A small attempt to make an e-commerce user interface in Flutter for Android and iOS. I developed this application just for learn

Md Tarikul Islam 615 Jan 3, 2023
🛍 A full E-commerce app with nice UI consists of on-boarding, login, sign-up, home, product details, cart and user profile.

?? A full E-commerce app with nice UI consists of on-boarding, login, sign-up, home, product details, cart and user profile.

null 56 Nov 27, 2022
An user interface sample application of women apparel in flutter

Women Apparel Application An user interface sample application of women apparel in flutter. Project Created & Maintained By MultiQoS Pvt. Ltd. Demo Ap

MultiQoS 13 Sep 16, 2022
A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

Shantanu 12 Dec 30, 2022
A BottomNavigationBar for nested routing and advanced features to improve user experience.

navbar_router 0.1.2 This is the ultimate BottomNavigionBar created by considering the advanced use cases in real world applications. This widget handl

Mahesh Jamdade 12 Dec 28, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 530 Dec 23, 2022
Flutter Widgets that you can touch and feel

Flutter widgets you haven't used yet. Problems that proximity solves Currently, Flutter has a lot of useful pre-built widgets, no, too many widgets. T

Masahiro Aoki 32 Nov 8, 2022
Responsive Sizer helps implement are responsive layout by providing helper widgets and extensions

Responsive Sizer Responsive Sizer helps implement a responsive layout by providing helper widgets and extensions Content Installation Parameters Take

CoderUni 71 Jan 3, 2023
A Flutter package that enables users to resize the internal widgets by dragging.

resizable_widget ResizableWidget enables users to resize the internal widgets by dragging. This package contains simple APIs, but if needed, you can c

null 35 Dec 2, 2022
🔥 Flutter Widgets 掘金对应专栏,欢迎关注

Flutter Widgets 示例集合 本项目基于 Flutter 2.2.1 版本,是系列 Flutter Widget 示例源码,有对应的文章详细讲解,持续更新敬请关注。 在线预览 全景脑图 持续更新中 掘金专栏 欢迎关注 已完成文章 AnimatedContainer ClipRRect、C

Zero 12 Dec 14, 2022
Allows widgets to be zoomed in and out by inserting a OverlayEntry which allows the widget to be on the front at all times.

zoom_pinch_overlay An instagram style pinch and zoom widget for all platform completely written in pure dart! All other "zoom_pinch" package doesnt di

Samuel 18 Nov 29, 2022
Code generation for Flutter Padding widgets based on your constants

Paddinger Paddinger is a Flutter package to generate Padding widgets. Given a set of constants like: @paddinger const double PADDING_NORMAL = 8; A set

Emanuele 14 Oct 20, 2022
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
Build Beautiful UIs with Flutter Widgets

I learnt this following thing from this project How to create Stateless Widgets What is the difference between hot reload and hot refresh and running

Chitraarasu.k 2 Dec 31, 2021
A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

AbdulMuaz Aqeel 15 Dec 20, 2022