ducafecatFlutter ecosystem guide
FLUTTER ECOSYSTEM

mattrltrent/scrollable

A powerful set of scrollable widgets including haptics, keyboard dismissing, and more. Pub package.

View on GitHub ↗
scrollable project cover
Stars
2
Forks
0
Last push (UTC)
Dec 2, 2023
Project status
Active
Matthew Trent GitHub avatar
GITHUB User

Matthew Trent ↗

SWE @ Sorce (YC F25) | MS CS @ Columbia | Prev. @ Probe, Magi, Confesi (Founder) | Honors BS CS w/ Distinction

Sorce (YC F25)San Francisco, CA
LanguagesC++CMakeDartHTMLCSwiftKotlinObjective-C

Technical topics

# dart# flutter# haptics# package# package-manager# pub# scrollable

Packages published by this repository

Dependencies used

Dependency list 3 items
  • flutter{"sdk":"flutter"}
  • flutter_testDevelopment{"sdk":"flutter"}
  • flutter_lintsDevelopment^2.0.0

Original README

English project snapshot. Visit GitHub for the latest content.

Expand / collapse project README

🔥 A powerful set of scrollable widgets: haptics, keyboard dismissing, and more 🔥

  • Submit an issue here.
  • Create a pull request here.
  • Contact me via email [here](mailto:me@matthewtrent.me).

3 Widgets in this package 📚

💥 ScrollHaptics
  • Applies haptic feedback when its child is scrolled (during scroll & reaching edge of scroll view).
💥 KeyboardDismiss
  • Dismisses the soft-keyboard when its child is 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.

https://github.com/mattrltrent/scrollable/blob/main/resources/example.gif?raw=true

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): A ScrollController to 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 use ClampingScrollPhysics as 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 add SizedBox widgets 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 add SizedBox widgets 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 parent PrimaryScrollController.
  • 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 📣

analytics