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

bottom_drawer 표지
패키지 상세v0.0.5

bottom_drawer

하단 드로어 위젯으로, 사용자 정의 드로어 헤더와 본문을 지원하며, 리스트 본문을 지원하고 드래그하여 열고 닫을 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
663
좋아요
36
Pub 점수
150

패키지 설치

flutter pub add bottom_drawer

패키지 개요

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

드래그로 열고 닫을 수 있는 커스터마이즈 가능한 플러터용 하단 드로어 위젯입니다. 선택적 헤더 및 본문 커스터마이징을 지원합니다. 정적 콘텐츠 또는 리스트 기반 본문을 표시할 수 있어 모달, 필터 또는 보조 정보 패널에 적합합니다. 모바일, 웹, 데스크톱 등 다양한 플랫폼에 대응하여 장치 간 일관된 UX를 보장합니다. 단순성과 유연성을 고려해 설계되어 기존 플러터 앱에 원활하게 통합됩니다.

사용 사례

  • 모달 오버레이
  • 필터 패널
  • 보조 콘텐츠가 표시됩니다
  • 인터랙티브 바텀 시트
  • 폼 입력
  • 네비게이션 드로어

주요 기능

  • 드래그로 열기/닫기 제스처
  • 사용자 정의 가능한 헤더 및 본문
  • 목록 본문 지원
  • 크로스 플랫폼 호환성
  • 기존 위젯과의 간편한 통합
  • 사용자 정의 가능한 애니메이션 및 동작

적합한 대상

  • 인터랙티브 UI를 구축하는 개발자
  • 접을 수 있는 패널이 필요한 앱
  • 플랫폼에 관계없이 사용 가능한 바텀 시트가 필요한 프로젝트
  • 유연한 드로어 레이아웃을 원하는 디자이너
  • 원활한 사용자 상호작용을 우선시하는 팀

고려 사항

  • 복잡한 헤더를 위해 추가 스타일링이 필요할 수 있습니다
  • 큰 목록과 함께하는 성능 영향
  • 기본 슬라이드 외에 내장 애니메이션 기능이 제한적
  • 전체 화면 모달에 적합하지 않습니다
  • 중첩 스크롤 가능한 요소에서 터치 이벤트를 신중하게 처리해야 합니다

원본 README

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

Bottom Drawer for Flutter Pub version

Bottom Drawer.

DEMO

1. Add dependency
dependencies:
  bottom_drawer: ^0.0.5
2. Import bottom drawer
import 'package:bottom_drawer/bottom_drawer.dart';
3. Use bottom drawer

Create a bottom drawer controller.

/// create a bottom drawer controller to control the drawer.
BottomDrawerController controller = BottomDrawerController();

Build a bottom drawer widget.

/// return a bottom drawer widget.
Widget buildBottomDrawer(BuildContext context) {
  return BottomDrawer(
    /// your customized drawer header.
    header: Container(),
    /// your customized drawer body.
    body: Container(),
    /// your customized drawer header height.
    headerHeight: 60.0,
    /// your customized drawer body height.
    drawerHeight: 180.0,
    /// drawer background color.
    color: Colors.lightBlue,
    /// drawer controller.
    controller: controller,
  );
}

Control the bottom drawer.

/// open the bottom drawer.
controller.open();

/// close the bottom drawer.
controller.close();

For more information, see the example.

카테고리

소스 저장소

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

아직 데이터가 없습니다.