Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luunc/overscroll_pop
A Flutter widget for Scrollview, pop when overscroll
https://github.com/luunc/overscroll_pop
Last synced: 9 days ago
JSON representation
A Flutter widget for Scrollview, pop when overscroll
- Host: GitHub
- URL: https://github.com/luunc/overscroll_pop
- Owner: luunc
- License: bsd-2-clause
- Created: 2021-03-25T09:36:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-18T04:53:26.000Z (about 2 months ago)
- Last Synced: 2024-09-18T07:32:37.161Z (about 2 months ago)
- Language: Dart
- Size: 158 KB
- Stars: 34
- Watchers: 1
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# overscroll_pop
A Flutter widget for Scrollview, pop when overscroll like Instagram, Pinterest, ...
  
## Getting Started
1) Include the package to your project as dependency:
```
dependencies:
overscroll_pop:
```
2) Use the widget:
Wrap your `Scaffold` or top widget by `OverscrollPop`, every `ScrollView` widget (`Listview`, `GridView`, `PageView`, `CustomScrollView`, ...) which has scroll physics `ClampingScrollPhysics`**(important)** will have overscroll to pop effect.
```dart
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Overscroll Example'),
),
body: Builder(
builder: (c) => Center(
child: Hero(
tag: '${ScrollToPopOption.start}${DragToPopDirection.toRight}',
child: ElevatedButton(
onPressed: () => pushPage(
c,
(BuildContext context, _, __) => VerticalScrollview(
scrollToPopOption: ScrollToPopOption.start,
dragToPopDirection: DragToPopDirection.toRight,
),
),
child: Text('Vertical scrollview ${ScrollToPopOption.start}'),
),
),
),
),
),
);
class VerticalScrollview extends StatelessWidget {
final ScrollToPopOption scrollToPopOption;
final DragToPopDirection? dragToPopDirection;
const VerticalScrollview({
Key? key,
this.scrollToPopOption = ScrollToPopOption.start,
this.dragToPopDirection,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return OverscrollPop(
scrollToPopOption: scrollToPopOption,
dragToPopDirection: dragToPopDirection,
child: Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(16.0)),
child: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: Hero(
tag: '$scrollToPopOption${dragToPopDirection ?? ''}',
child: AppBar(
title: Text(
'Vertical Scrollview',
overflow: TextOverflow.visible,
),
),
),
),
body: ListView.builder(
physics: const ClampingScrollPhysics(),
itemBuilder: (_, index) => Container(
height: 160.0,
margin: const EdgeInsets.symmetric(vertical: 8.0),
color: index % 2 == 0 ? Colors.cyanAccent : Colors.orangeAccent,
alignment: Alignment.center,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(scrollToPopOption.toString()),
if (dragToPopDirection != null)
Text(dragToPopDirection.toString()),
],
),
),
itemCount: MediaQuery.of(context).size.height ~/ 160.0 + 2,
),
),
),
);
}
}
```
If your `Scaffold` does not contain any ScrollView and want to achieve drag to pop effect, wrap your `Scaffold` or top widget by `DragToPop` instead [(Example)](https://github.com/luunc/overscroll_pop/blob/main/example/lib/full_screen_drag_to_pop_example.dart).
Quick push route config helper:
```
pushOverscrollRoute(
context: context,
child: ,
// scrollToPopOption: ,
// dragToPopDirection: ,
// other route configs
)
pushDragToPopRoute(
context: context,
child: ,
// other route configs
)
```
3) Configure scroll direction and add extra drag to pop:
- By default, the effect only apply for overscroll at the start of `ScrollView` (top edge of vertical scroll, left edge of horizontal scroll)
 
- To enable the end edge (or both edges) for overscroll to pop, set `scrollToPopOption` to `ScrollToPopOption.end` (or `ScrollToPopOption.both`)
```
OverscrollPop(
scrollToPopOption: ScrollToPopOption.end, // or ScrollToPopOption.both
...
)
```
 
- Beside overscroll, you can config the other drag direction to achieve the pop effect by passing `dragToPopDirection`
```
OverscrollPop(
dragToPopDirection: DragToPopDirection.toTop, // toTop, toBottom, toLeft, toRight, horizontal and vertical
...
)
```
1. Vertical scroll: drag to left, right or horizontal (both left and right)
 
2. Horizontal scroll: drag to top, bottom or vertical (both top and bottom)
 