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
andsize
.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 passpromptbuttontheme
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.
Comments are closed.