bubbled_navigation_bar

패키지 개요

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

시각적으로 매력적인 Flutter 패키지로, 애니메이션 효과가 있는 버블 모양의 네비게이션 바를 구현합니다. 사용자 정의 가능한 색상, 배경색, 애니메이션 곡선 및 지속 시간을 제공하여 동적 사용자 경험을 가능하게 합니다. 컨트롤러 매개변수를 통해 PageView와 원활하게 통합되어 페이지 간 전환을 부드럽게 지원합니다. 시각적 피드백과 상호작용 요소가 사용성을 향상시키는 현대적인 앱 인터페이스에 적합합니다. 성능과 유연성을 고려해 설계되었으며 다양한 화면 크기에서 반응형 디자인을 지원합니다.

사용 사례

애니메이션된 하단 네비게이션 바 만들기
유연한 전환으로 앱 UI 개선
스와이프 가능한 콘텐츠를 위한 PageView 통합
현대적인 모바일 앱 인터페이스 설계
네비게이션 작업에 시각적 피드백 추가

주요 기능

애니메이션 가능한 버블 모양
사용자 정의 가능한 색상 및 애니메이션 설정
컨트롤러를 통한 PageView 통합
부드러운 전환 효과
반응형 디자인 지원
pub add 명령을 사용한 간편한 설정

적합한 대상

현대적인 UI 컴포넌트를 찾는 플러터 개발자
매력적인 탐색 경험을 요구하는 앱
인터랙티브 요소를 갖춘 디자인 중심 애플리케이션
PageView를 사용하여 수평 스크롤하는 개발자
시각적 완성도와 애니메이션에 중점을 둔 프로젝트

고려 사항

애니메이션 매개변수를 신중하게 조정해야 합니다
저사양 기기에서 성능에 영향을 줄 수 있습니다
제한된 플랫폼별 사용자 정의
최소한의 탐색 항목을 가진 앱에 가장 적합
많은 화면을 포함한 복잡한 탭 레이아웃에는 적합하지 않습니다

원본 README

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

pub package

A Flutter package for easy implementation of bubbled navigation bar.

Gif

Add dependency

dependencies:
  bubbled_navigation_bar: ^0.0.3 #latest version

Easy to use

home: Scaffold(
bottomNavigationBar: BubbledNavigationBar(
  defaultBubbleColor: Colors.blue,
  onTap: (index) {
    // handle tap
  },
  items: <BubbledNavigationBarItem>[
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.home, size: 30, color: Colors.red),
      activeIcon: Icon(CupertinoIcons.home, size: 30, color: Colors.white),
      title: Text('Home', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.phone, size: 30, color: Colors.purple),
      activeIcon: Icon(CupertinoIcons.phone, size: 30, color: Colors.white),
      title: Text('Phone', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.info, size: 30, color: Colors.teal),
      activeIcon: Icon(CupertinoIcons.info, size: 30, color: Colors.white),
      title: Text('Info', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
    BubbledNavigationBarItem(
      icon:       Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.cyan),
      activeIcon: Icon(CupertinoIcons.profile_circled, size: 30, color: Colors.white),
      title: Text('Profile', style: TextStyle(color: Colors.white, fontSize: 12),),
    ),
  ],
),
body: Container(color: Colors.blue,),
)

Advanced use

Way of use with PageView and sliding animation from example.gif you can see in example folder.

Attributes

items: List of Widgets
initialIndex: Initial index of Curve
color: Color of NavigationBar, default Colors.white
defaultBubbleColor: background color of floating bubble onTap: Function handling taps on items
animationCurve: Curves interpolating button change animation, default Curves.easeInOutQuad
animationDuration: Duration of button change animation, default Duration(milliseconds: 500)

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