Search packages, repositories and app categories

snapping_page_scroll cover
Package detailsv3.1.0

snapping_page_scroll

A plugin that allows you to make a pageView that scrolls a certain number of pages based on the scroll velocity, and then snaps to the nearest page.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
613
Likes
33
Pub points
160

Install package

flutter pub add snapping_page_scroll

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enhances PageView functionality by enabling smooth, velocity-based scrolling with automatic snapping to the nearest page. It provides a more intuitive and fluid user experience, ideal for carousel-like interfaces or content sliders where precise page alignment is essential. The plugin works across all major platforms, including mobile, web, and desktop, ensuring consistent behavior. It's designed to be lightweight and easy to integrate into existing projects.

Use cases

  • Carousel sliders
  • Image galleries
  • Onboarding screens
  • Product showcases
  • Interactive tutorials

Key features

  • Velocity-based scrolling
  • Automatic page snapping
  • Cross-platform support
  • Minimal setup
  • Smooth animations
  • Customizable snap behavior

Suitable for

  • Developers building interactive UIs
  • Apps with multi-page content
  • Designers seeking polished scroll effects
  • Projects requiring responsive navigation
  • Mobile and web applications

Considerations

  • May require tuning for optimal snap sensitivity
  • Not ideal for non-page-based scroll layouts
  • Performance depends on content complexity
  • Limited customization for advanced scroll logic

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Snapping Page Scroll

A plugin that acts similar to a PageView but either snaps to the closest page or scrolls multiple pages and then snaps, based on how fast the user scrolls.

If the user scrolls faster than a certain threshold, page snapping will be disabled until friction slows the velocity to below that threshold, leading to page snapping being enabled again.

If the user scrolls slower than the threshold, the widget will act like a regular PageView with pageSnapping: true.

GIF showing how the plugin works

Usage

To use this plugin, add snapping_page_scroll as a dependency in your pubspec.yaml file.

Example

import 'package:flutter/material.dart';
import 'package:snapping_page_scroll/snapping_page_scroll.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  Widget customCard(String text) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20, 100, 20, 100),
      child: Card(
        child: Text(text),
      ),
    );
  }

  final controller = PageController(
    viewportFraction: 0.75,
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.amber,
        appBar: AppBar(),
        body: SnappingPageScroll(
          controller: controller,
          children: <Widget>[
            customCard('Card 1'),
            customCard('Card 2'),
            customCard('Card 3'),
            customCard('Card 4'),
            customCard('Card 5'),
            customCard('Card 6'),
          ],
        ),
      ),
    );
  }
}

Categories

Source repository

Projects using this package

No data available yet.