패키지, 저장소 및 앱 카테고리 검색

snapping_page_scroll 표지
패키지 상세v3.1.0

snapping_page_scroll

스크롤 속도에 따라 지정된 수의 페이지를 스크롤한 후 가장 가까운 페이지로 스냅하는 PageView를 만들 수 있는 플러그인입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
613
좋아요
33
Pub 점수
160

패키지 설치

flutter pub add snapping_page_scroll

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

PageView의 기능을 향상시키는 플러터 패키지로, 부드럽고 속도 기반의 스크롤링과 가장 가까운 페이지에 자동으로 스냅하는 기능을 제공합니다. 정확한 페이지 정렬이 중요한 카루셀형 인터페이스나 콘텐츠 슬라이더에 적합하며, 직관적이고 유연한 사용자 경험을 제공합니다. 이 플러그인은 모바일, 웹, 데스크톱을 포함한 모든 주요 플랫폼에서 작동하여 일관된 동작을 보장합니다. 경량이며 기존 프로젝트에 쉽게 통합할 수 있도록 설계되었습니다.

사용 사례

  • 카루셀 슬라이더
  • 이미지 갤러리
  • 온보딩 화면
  • 제품 전시
  • 인터랙티브 튜토리얼

주요 기능

  • 속도 기반 스크롤
  • 자동 페이지 스냅
  • 크로스 플랫폼 지원
  • 최소 설정
  • 부드러운 애니메이션
  • 사용자 정의 가능한 스냅 동작

적합한 대상

  • 인터랙티브 UI를 구축하는 개발자
  • 다중 페이지 콘텐츠를 가진 앱
  • 정교한 스크롤 효과를 원하는 디자이너
  • 반응형 탐색이 필요한 프로젝트
  • 모바일 및 웹 애플리케이션

고려 사항

  • 최적의 스냅 감도를 위해 조정이 필요할 수 있습니다
  • 페이지 기반 스크롤 레이아웃에 적합하지 않음
  • 성능은 콘텐츠의 복잡성에 따라 달라집니다
  • 고급 스크롤 로직에 대한 사용자 정의 제한

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

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'),
          ],
        ),
      ),
    );
  }
}

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.