scrollable 1.0.5
scrollable: ^1.0.5 copied to clipboard
A powerful set of scrollable widgets including haptics, keyboard dismissing, and more.
🔥 A powerful set of scrollable widgets: haptics, keyboard dismissing, and more 🔥 #
3 Widgets in this package 📚 #
💥 ScrollHaptics
- Applies haptic feedback when its
childis scrolled (during scroll & reaching edge of scroll view).
💥 KeyboardDismiss
- Dismisses the soft-keyboard when its
childis scrolled, tapped, or swiped.
💥 ScrollableView
- The above 2 widgets combined into 1 widget for ease-of-use.
Example Gif 📸 #
It's hard to display haptics in a gif, but they're there.
Installing 🧑🏫 #
- Install the package from the pub.
flutter pub add scrollable
- Import the package.
import 'package:scrollable/exports.dart';
Quick Start 💨 #
Simply wrap whatever you want inside the ScrollHaptics, KeyboardDismiss, or ScrollableView widgets, then edit whatever of their properties you want!
Short Examples of the 3 Widgets 📜 #
For a full example with context, view the examples tab. It shows just the ScrollableView, but it's the same layout for all 3 widgets.
Scroll Haptics
ScrollHaptics #
ScrollHaptics(
// <Assorted Properties Here>
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 100, width: 100, color: Colors.redAccent),
Container(height: 100, width: 100, color: Colors.blue),
Container(height: 100, width: 100, color: Colors.purple),
],
),
),
);
Keyboard Dismiss
KeyboardDismiss #
KeyboardDismiss(
// <Assorted Properties Here>
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 100, width: 100, color: Colors.redAccent),
Container(height: 100, width: 100, color: Colors.blue),
Container(height: 100, width: 100, color: Colors.purple),
],
),
),
);
Scrollable View
ScrollableView #
ScrollableView(
// <Assorted Properties Here>
controller: ScrollController(),
child: SingleChildScrollView(
child: Column(
children: [
Container(height: 100, width: 100, color: Colors.redAccent),
Container(height: 100, width: 100, color: Colors.blue),
Container(height: 100, width: 100, color: Colors.purple),
],
),
),
);
Properties of the 3 Widgets 📜 #
Scroll Haptics
ScrollHaptics #
Highly reccomended to use ClampingScrollPhysics for the physics of whatever scrollable you're wrapping, as it works best with haptics.
child(required): This widget's child.bubbleUpScrollNotifications: Whether the widget should bubble up scroll notifications, or block them.heavyHapticsAtEdgeEnabled: When a scroll reaches the edge, if there should be a haptic effect emitted.hapticEffectAtEdge: Which kind of haptic effect should be emitted when the scroll edge is reached?hapticEffectDuringScroll: Which kind of haptic effect should be emitted during the scroll.distancebetweenHapticEffectsDuringScroll: The distance, in pixels, that should be scrolled before emitting a new haptic scroll effect.
Keyboard Dismiss
KeyboardDismiss #
child(required): This widget's child.bubbleUpScrollNotifications: Whether the widget should bubble up scroll notifications, or block them.closeKeyboardOnTap: If the keyboard should also be closed just on the widget being tapped.closeKeyboardOnVerticalSwipe: If the keyboard should be closed when a vertical swipe occurs.onKeyboardDismissed: Callback triggered when a dismiss occurs.
Scrollable View
ScrollableView #
child(required): This widget's child.controller(required): AScrollControllerto manage the scrolling of the widget.bubbleUpScrollNotifications: Whether the widget should bubble up scroll notifications, or block them.closeKeyboardOnScroll: Whether the keyboard should be automatically closed on the widget being scrolled.closeKeyboardOnTap: If the keyboard should also be closed just on the widget being tapped.physics: Physics of the scroll view. Highly reccomended to useClampingScrollPhysicsas it works best with haptics.scrollDirection: Direction of the scroll.inlineBottomOrRightPadding: Inline padding of the scroll view. This is a clean substitute to having to addSizedBoxwidgets inside your scroll view. For the bottom (if vertical) or right (if horizontal) of the scroll view.inlineTopOrLeftPadding: Inline padding of the scroll view. This is a clean substitute to having to addSizedBoxwidgets inside your scroll view. For the top (if vertical) or left (if horizontal) of the scroll view.padding: Outer padding of the widget.hapticsEnabled: If haptics should be enabled.distancebetweenHapticEffectsDuringScroll: The distance, in pixels, that should be scrolled before emitting a new haptic scroll effect.heavyHapticsAtEdgeEnabled: If the haptics when the edge of the scroll is reached should be enabled or not.hapticEffectAtEdge: Which kind of haptic effect should be emitted when the scroll edge is reached?hapticEffectDuringScroll: Which kind of haptic effect should be emitted during the scroll.primary: Whether this is the primary scroll view associated with the parentPrimaryScrollController.dragStartBehavior: Determines the way that drag start behavior is handled.restorationId: Restoration ID to save and restore the scroll offset of the scrollable.reverse: Whether the scroll view scrolls in the reading direction.closeKeyboardOnVerticalSwipe: If the keyboard should be closed when a vertical swipe occurs.
Additional Info 📣 #
-
The package is always open to improvements, suggestions, and additions!
-
I'll look through PRs and issues as soon as I can!