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

ducafecatFlutter 생태계 탐색
bottom_sheet_expandable_bar 표지
패키지 상세v0.1.2

bottom_sheet_expandable_bar

하단 바를 표시하고 하단 시트를 확장하여 표시할 수 있는 기능을 제공하는 패키지

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
54
좋아요
28
Pub 점수
140

패키지 설치

flutter pub add bottom_sheet_expandable_bar

패키지 개요

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

하단 탐색 바를 제공하며 하단 시트로 확장하여 추가 콘텐츠 또는 작업을 제공하는 플러터 패키지입니다. 하단 바의 간결함과 하단 시트의 유연성을 결합함으로써 사용자 인터랙션을 향상시킵니다. 컴팩트한 네비게이션과 확장 가능한 기능이 필요한 앱에 적합하며, 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 다양한 플랫폼을 지원합니다. 가벼운 크기이며 기존 플러터 프로젝트와 원활하게 통합됩니다.

사용 사례

  • 확장 가능한 옵션을 갖춘 모바일 앱 탐색
  • 인터랙티브한 바텀 시트로 UI 개선
  • 웹 및 데스크톱 앱에서 동적 하단 바 만들기
  • 보조 작업에 대한 빠른 액세스 제공
  • 다양한 플랫폼에서 반응형 레이아웃 설계하기

주요 기능

  • 확장 가능한 하단 바 인터페이스
  • 다수의 플랫폼을 지원합니다
  • Flutter와의 간편한 통합
  • 사용자 정의 가능한 외관 및 동작
  • 부드러운 애니메이션 전환
  • 내장된 제스처 처리

적합한 대상

  • 다중 플랫폼 플러터 앱을 개발하는 개발자
  • 인터랙티브한 탐색 패턴을 찾는 UI 디자이너
  • 접을 수 있는 액션 패널이 필요한 앱
  • 일관된 크로스 플랫폼 UX를 목표로 하는 프로젝트
  • 고급 바텀 시트 기능을 위한 최소한의 설정을 원하는 팀

고려 사항

  • 복잡한 디자인을 위해 추가 스타일링이 필요할 수 있습니다
  • 하단 시트에 많은 콘텐츠가 있을 때 성능 영향
  • 기본 전개/접기 외의 사용자 정의 제한
  • 중간 규모의 콘텐츠 볼륨에 가장 적합
  • 작은 기기에서는 화면 공간을 신중하게 다뤄야 합니다

원본 README

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

Bottom Sheet Expandable Bar

This package create a bottom navigation bar with the capability to show a bottom sheet.

Instalation

Include bottom_sheet_expandable_bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_expandable_bar: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';

...

bottomSheet: BottomBarSheet(
  children: [
    BottomSheetBarIcon(
      icon: Icon(Icons.home),
      color: Colors.redAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.person),
      color: Colors.blueAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.edit),
      color: Colors.blue[800], 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.star),
      color: Colors.orangeAccent, 
      onTap: (){
      },
    ),
  ],
),

...

IMPORTANT: Add this line to your theme to avoid an unexpected behaviour

theme: ThemeData(
  /// Add this line
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),
BottomSheetBarIcon

This widget allow to generate a dynamic icon

Properties

Name Description Required Default
icon Widget to put as button icon False
color Color to indicate icon color False Colors.black
onTap Function to handle button on tap True
BottomBarSheet

This widget allow to generate a bottom bar with the capability to expanto to a bottom sheet

Properties

Name Description Required Default
children List of BottomSheetBarIcon widget to show icons within the bar False
buttonPosition ButtonBottomBarPosition to indicate expandable button position (center, end) False ButtonBottomBarPosition.center
backgroundBarColor Color to indicate bottom bar background color False Colors.white
backgroundColor Color to indicate bottom sheet color False Colors.white
showExpandableButton Boolean value to indicate when to show or hide expandable button False False
innerChild Widget to show into the bottom sheet False
bottomRadius Double value to indicate the corners radius for the bottom bar False 50.0
bottomBarHeight Double value to indicate the bottom bar height False 60.0
bottomBarWidth Double value to indicate the bottom bar height False Screen width * 0.9
duration Duration between show or hide the bottom sheet False 250 milliseconds
bottomSheetHeight Double value to indicate the bottom sheet height False Screen height * 0.75
iconExpand Icon to show into the expandable button False Icon(Icons.navigation)
iconColor Expandable button color False Colors.green
onClose Function to call when bottom sheet is closed False (){}
currentIndex Integer value to indicatet which tab is selected False 0
curve Curve to use on enter bottom sheet animation False Curves.ease
Expandable button at center

Expandable button at end

As a simple navigation bar

카테고리

하단 탐색 바

소스 저장소

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

아직 데이터가 없습니다.