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

ducafecatFlutter 생태계 탐색
circle_bottom_navigation 표지
패키지 상세v2.0.0

circle_bottom_navigation

앱용 애니메이션 효과가 있는 아름답고 기능적인 하단 탐색 바입니다.

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
88
좋아요
37
Pub 점수
130

패키지 설치

flutter pub add circle_bottom_navigation

패키지 개요

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

시각적으로 매력적이고 애니메이션 효과가 있는 플러터 앱용 하단 탐색 바로, 미적 요소와 사용성 향상을 위해 설계되었습니다. 부드러운 전환, 사용자 정의 가능한 스타일, 전통적인 탐색 바와는 다른 원형 레이아웃을 제공합니다. 여러 플랫폼에서 독특하면서도 기능적인 탐색 경험을 원하는 현대 애플리케이션에 적합합니다. 간단한 pub add 명령어로 쉽게 통합 가능하며, 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스를 지원합니다.

사용 사례

  • 모바일 앱 탐색
  • 웹 애플리케이션 인터페이스
  • 크로스 플랫폼 플러터 앱
  • 현대적인 UI 디자인
  • 사용자 정의 가능한 하단 탭

주요 기능

  • 애니메이션 전환
  • 순환 레이아웃 디자인
  • 사용자 지정 가능한 색상 및 아이콘
  • 모든 플랫폼에서 반응형
  • pub를 통한 간편한 통합
  • 다중 테마 지원

적합한 대상

  • 독특한 UI 컴포넌트를 찾는 개발자
  • 디자인 중심의 플러터 프로젝트
  • 다중 플랫폼을 대상으로 하는 앱
  • 인터랙티브 사용자 경험
  • 최소주의적이지만 역동적인 인터페이스

고려 사항

  • 복잡한 레이아웃을 위해 추가 스타일링이 필요할 수 있습니다
  • 네이티브 구현과 비교해 사용자 정의가 제한적입니다
  • 많은 애니메이션과 함께 가능한 성능 영향
  • 접근성 중심 애플리케이션에는 적합하지 않음
  • 3~5개의 탐색 항목을 가진 앱에 가장 적합

원본 README

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

Circle Bottom Navigation

demo

Getting started

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^2.0.0

Minimum usage

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home),
    TabData(icon: Icons.history),
    TabData(icon: Icons.search),
    TabData(icon: Icons.alarm),
  ],
  onTabChangedListener: (index) => setState(() => currentPage = index),
)

Attributes

Required

initialSelection -> The number of page you want to start/navigate, receive a int
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

Optional

circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
circleSize -> Defaults to 60.0, size of intern circle
barHeight -> Defaults to 60.0, height of bar
arcHeight -> Defaults to 70.0, height of external circle arc
arcWidth -> Defaults to 90.0, width of external circle arc
circleOutline -> Defaults to 10.0
shadowAllowance -> Defaults to 20.0, size of icon shadow
hasElevationShadows -> Defaults to true, define if bar have elevation shadows
blurShadowRadius -> Defaults to 8.0, size of bar shadow if hasElevationShadows is true
key -> Defaults to null

TabData

Required

icon -> Icon to be used for the TabData

Optional

title -> String to be used for the tab
onClick -> Function to be used when the circle itself is clicked, on an active tab
iconSize -> Size of icon displayed active and not active
fontSize -> Size of font in case of title has informed
fontWeight -> Weight of font in case of title has informed

Example

There is an example project in the example folder. Check it out.

Showcase

If you use this package in a live app, let me know and I'll add your app here. ;)

Contributing

Found a bug? Please, open an issue and if you wanna help, do a PR :D

카테고리

하단 탐색 바

의존성

의존성 목록 2 개

소스 저장소

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

아직 데이터가 없습니다.