zeba_academy_snap_scroll #

A powerful Flutter package that provides smooth and customizable snapping scroll experiences, including TikTok-style page snapping, card snapping carousels, wheel pickers, and magnetic scroll behavior.

✨ Features #

• 🎯 TikTok-style vertical page snapping
• 🎴 Card snapping carousel
• 🎡 Wheel snapping picker
• 🧲 Magnetic scroll behavior
• ⚡ Smooth spring animations
• 📱 Horizontal and vertical scrolling support
• 🎨 Easy-to-use widgets
• 🚀 Lightweight and dependency-free

Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_snap_scroll: ^1.0.0

Then run:

flutter pub get

Import #

import 'package:zeba_academy_snap_scroll/zeba_academy_snap_scroll.dart';

TikTok Style Snap PageView #

Perfect for video feeds, reels, stories, onboarding screens, and full-screen experiences.

SnapPageView(
  scrollDirection: Axis.vertical,
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
)

Card Snapping Carousel #

Create beautiful snapping card carousels.

SnapCarousel(
  items: [
    Card(
      child: SizedBox(
        height: 200,
        child: Center(child: Text('Card 1')),
      ),
    ),
    Card(
      child: SizedBox(
        height: 200,
        child: Center(child: Text('Card 2')),
      ),
    ),
  ],
)

Wheel Snapping Picker #

Ideal for date pickers, option selectors, and settings screens.

SnapWheel(
  items: const [
    'Apple',
    'Banana',
    'Orange',
    'Mango',
  ],
  onSelected: (index) {
    print(index);
  },
)

Snap ListView #

Automatically snaps items into position while scrolling.

SnapListView(
  itemExtent: 120,
  children: List.generate(
    20,
    (index) => Container(
      height: 120,
      alignment: Alignment.center,
      child: Text('Item $index'),
    ),
  ),
)

Custom Snap Physics #

Use snapping behavior with your own scrollable widgets.

ListView.builder(
  physics: const SnapScrollPhysics(
    itemExtent: 100,
  ),
  itemBuilder: (context, index) {
    return SizedBox(
      height: 100,
      child: Center(
        child: Text('Item $index'),
      ),
    );
  },
)

Snap Controller #

Control snapping programmatically.

final controller = SnapController();

Dispose when no longer needed:

controller.dispose();

Use Cases #

• TikTok-style feeds
• Instagram Reels clones
• Shorts-style applications
• Product showcases
• Card carousels
• Wheel pickers
• Media galleries
• Onboarding flows
• Content browsers
• Settings selectors

Example #

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SnapPageView(
          scrollDirection: Axis.vertical,
          children: List.generate(
            5,
            (index) => Container(
              color: Colors.primaries[index],
              child: Center(
                child: Text(
                  'Page $index',
                  style: const TextStyle(
                    fontSize: 40,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Additional Information #

Found a bug or have a feature request?

Feel free to open an issue or contribute improvements to the project.

Contributions, feature requests, and pull requests are always welcome.

About Me #

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at https://sufyanism.com/ or connect with me on LinkedIn.

Your all-in-one learning hub! #

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience.

Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡ Visit our main site: https://zeba.academy

➡ Explore hands-on courses and resources at: https://code.zeba.academy

➡ Check out our YouTube for more tutorials: https://www.youtube.com/@zeba.academy

➡ Follow us on Instagram: https://www.instagram.com/zeba.academy/

License #

This project is licensed under the MIT License.

Thank you for visiting and supporting open-source development! ❤️