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

scrollable_panel 표지
패키지 상세v0.4.1

scrollable_panel

끌어서 확장한 후 내용을 스크롤할 수 있습니다. Google 지도 앱의 '근처 장소' 패널과 유사합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
84
좋아요
62
Pub 점수
150

패키지 설치

flutter pub add scrollable_panel

패키지 개요

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

Google 지도 앱에서 볼 수 있는 '근처 장소' 패널의 동작을 모방하여 하단 패널을 드래그하여 열고 스크롤할 수 있게 해주는 플러터 패키지입니다. 부드러운 드래그 확장 상호작용을 제공하며, 확장된 패널 내부에서 콘텐츠를 스크롤하는 것도 지원합니다. 세부 정보나 목록을 컴팩트하고 인터랙티브한 형식으로 표시하는 데 이상적입니다. 이 패키지는 Android, iOS, Web, macOS, Windows 및 Linux 플랫폼과 호환됩니다.

사용 사례

  • 지도 앱에서 위치 세부 정보 표시
  • 근처 관광지 목록 표시
  • 확장 가능한 정보 패널 만들기
  • 접을 수 있는 콘텐츠 섹션 구현
  • 드래그 가능한 바텀 시트를 통한 사용자 상호작용 향상

주요 기능

  • 드래그로 확장하는 제스처 지원
  • 내장된 스크롤 가능한 콘텐츠 영역
  • 크로스 플랫폼 호환성
  • 부드러운 애니메이션 전환
  • 사용자 정의 가능한 패널 높이 및 동작
  • 모든 화면 크기에 대응하는 반응형 디자인

적합한 대상

  • 지도 및 위치 기반 애플리케이션
  • 콘텐츠가 풍부한 하단 시트
  • 확장 가능한 패널이 필요한 사용자 인터페이스
  • 네이티브처럼 느껴지는 바텀 시트 경험을 원하는 개발자
  • 직관적인 제스처 기반 탐색이 필요한 앱

고려 사항

  • 사용자 지정 시각 효과를 위해 추가 스타일링이 필요할 수 있습니다
  • 매우 큰 데이터 세트와의 성능 영향
  • 복잡한 애니메이션에 대한 맞춤 설정이 제한적
  • 중첩 스크롤 뷰를 주의 깊게 다뤄야 합니다
  • 간단한 정적 콘텐츠 표시에 적합하지 않음

원본 README

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

scrollable_panel

pub package

drag to expand and then can scroll contents. similar "Nearby spots" panel on google map app.

https://pub.dev/packages/scrollable_panel

Panel Properties

Properties Data Type Description
builder ScrollableWidgetBuilder builder for inner panel view. ScrollableWidgetBuilder type define in draggable_scrollable_sheet.dart. provide PanelScrollController that extends ScrollController.
controller PanelController control panel from some interaction like button.
defaultPanelState PanelState set default panel state. (default value PanelState.open)
defaultPanelSize double set default panel height factor (default value 0.25)
minPanelSize double set minimum panel height factor. (default value 0)
maxPanelSize double set maximum panel height factor. (default value 1.0)
onOpen VoidCallback if non-null, this callback is called when panel state become open
onClose VoidCallback if non-null, this callback is called when panel state become close
onExpand VoidCallback if non-null, this callback is called when panel state become expand

PanelController actions

Action Data Type Description
open void open panel. panel animate to defaultPanelSize.
expand void expand panel. panel animate to maxPanelSize.
close void close panel. panel animate to minPanelSize.
animateTo double animate panel to value height.

Usage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  PanelController _panelController = PanelController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scrollable panel'),
      ),
      body: Stack(
        children: <Widget>[
          InkWell(
            onTap: () {
              _panelController.toDefault();
            },
            child: _FirstView(),
          ),
          ScrollablePanel(
            controller: _panelController,
            builder: (context, controller) {
              return SingleChildScrollView(
                controller: controller,
                child: _SecondView(),
              );
            },
          ),
        ],
      ),
    );
  }
}

TODO

  • ~write README.md and dartdoc~
  • ~null-safety support~
  • ~write test code~
  • add List<double> anchor property to use multi snapping point.

카테고리

소스 저장소

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

아직 데이터가 없습니다.