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

패키지 상세v0.0.2

page_slider

수평으로 페이지를 슬라이드하는 간단한 Flutter 위젯입니다. Material Stepper 위젯과 유사한 마법사나 온보딩 흐름용이지만, 특정 UI가 필요하지 않습니다. 어떤 위젯도 슬라이드할 수 있는 페이지로 사용할 수 있습니다.

30일 다운로드
22
좋아요
36
Pub 점수
30

패키지 설치

flutter pub add page_slider

패키지 개요

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

PageSlider는 수평 페이지 탐색을 가능하게 하는 가벼운 Flutter 위젯으로, 온보딩 흐름이나 마법사 유사 인터페이스에 적합합니다. 어떤 사용자 정의 위젯도 슬라이드 가능한 페이지로 사용할 수 있으며, 특정 UI 스타일을 강제하지 않고 유연성을 제공합니다. Material Stepper를 영감으로 하되 더 일반적인 형태이며, 부드러운 전환과 직관적인 스와이프 제스처를 지원합니다. 최소한의 설정으로 안내형 사용자 경험을 만들기에 완벽합니다.

사용 사례

  • 온보딩 튜토리얼
  • 워즈드 스타일 폼
  • 제품 안내
  • 인터랙티브 가이드
  • 사용자 지정 카루셀 표시

주요 기능

  • 수평 스와이프 탐색
  • 모든 위젯을 페이지로 지원
  • 최소 스타일링 제약
  • 부드러운 전환 애니메이션
  • 기존 위젯과의 간단한 통합

적합한 대상

  • 간단한 온보딩 흐름
  • 유연한 UI 워즈드
  • 사용자 지정 상호작용 콘텐츠
  • 경량 캐러셀 필요
  • 빠른 UI 시퀀스 프로토타이핑

고려 사항

  • 내장된 지표 또는 페이지네이션 없음
  • 스크롤 물리의 사용자 정의 제한
  • 대규모 페이지 수에 최적화되지 않음
  • 상태 관리를 수동으로 처리해야 합니다
  • 작은부터 중간 규모의 콘텐츠 세트에 가장 적합

원본 README

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

flutter_page_slider

Pub

A simple Flutter widget that slides through pages horizontally. Use-cases could be wizards or onboarding flows similar to the Material Stepper widget, but without a particular UI - any widget can be a page to slide through.

Here's a demo of the example app:

PageSlider demo app

How to use

First, create the PageSlider widget with a GlobalKey<PageSliderState> and the child widgets which you want to slide through. Then, control the active page using the global key to address the page slider state like so:

class Demo extends StatefulWidget {
  Demo({Key key}) : super(key: key);
  _DemoState createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  GlobalKey<PageSliderState> _sliderKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        PageSlider(
          key: _sliderKey,
          pages: [
            Text('Page 0'),
            Text('Page 1'),
            Text('Page 2'),
          ]
        ),
        RaisedButton(
          onPressed: _sliderKey.currentState.next,
          child: Text('Next')
        ),
        RaisedButton(
          onPressed: _sliderKey.currentState.previous,
          child: Text('Previous')
        ),
      ]
    );
  }
}

카테고리

소스 저장소

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

아직 데이터가 없습니다.