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

ducafecatFlutter 생태계 탐색
blur_bottom_bar 표지
패키지 상세v1.0.3

blur_bottom_bar

Flutter 블러 바텀바는 Android 및 iOS용 마테리얼 디자인으로 재현된 iOS 탭 뷰입니다

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
82
좋아요
29
Pub 점수
150

패키지 설치

flutter pub add blur_bottom_bar

패키지 개요

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

Blur Bottom Bar는 iOS 스타일의 탭 바를 흐린 배경 효과와 함께 재현하는 Flutter 패키지로, iOS 미학과 Material Design 원칙을 결합하여 Android, iOS, 웹, macOS, Windows, Linux에서 크로스 플랫폼 일관성을 제공합니다. 부드러운 전환과 사용자 정의 가능한 스타일링을 통해 현대적이고 시각적으로 매력적인 탐색 경험을 제공합니다. 이 패키지는 플랫폼 간 사용성에 영향을 주지 않고 고급 외관을 원하는 앱에 이상적입니다.

사용 사례

  • 크로스 플랫폼 모바일 앱 탐색
  • Material Design를 채택한 iOS 스타일의 사용자 인터페이스
  • 블러 효과가 있는 현대적인 앱 인터페이스
  • 시각적 깊이가 필요한 탭 기반 애플리케이션
  • 동적 하단 바를 통해 사용자 경험 향상

주요 기능

  • iOS를 영감으로 한 배경 흐림 효과
  • 안드로이드용 Material Design 통합
  • 다중 플랫폼 지원
  • 사용자 정의 가능한 탭 표시
  • 부드러운 애니메이션과 전환
  • 기기 간 반응형 디자인

적합한 대상

  • Flutter에서 iOS 스타일 앱을 개발하는 개발자
  • 미적 탐색이 필요한 디자인 중심 애플리케이션
  • iOS 및 안드로이드를 대상으로 하는 크로스 플랫폼 프로젝트
  • 정교하고 현대적인 사용자 인터페이스를 목표로 하는 앱
  • 다양한 플랫폼 간 시각적 일관성을 우선시하는 팀

고려 사항

  • 저사양 기기에서 성능에 영향을 줄 수 있습니다
  • 가독성을 위해 신중한 색상 대비가 필요합니다
  • 네이티브 구현과 비교해 사용자 정의가 제한적입니다
  • 블러 효과와 관련된 접근성 문제 가능성
  • 라이트 테마 디자인에 가장 적합

원본 README

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

blur_bottom_bar

Flutter blur bottom bar

This is a recreation of the ios tab view with material design for android and ios

BlurBottomBar Gif BlurBottomBar Gif

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  blur_bottom_bar: ^1.0.1

Basic Usage

return Scaffold(
      appBar: AppBar(title: Text("Blur bar example")),
      body: Stack(
        children: <Widget>[
          _widgetOptions.elementAt(_selectedIndex),
          BlurBottomView(
              bottomNavigationBarItems: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.business),
                  label: 'Business',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.school),
                  label: 'School',
                )
              ],
              currentIndex: _selectedIndex,
              onIndexChange: (val) {
                _onItemTapped(val);
              }),
        ],
      ),
    );

카테고리

하단 탐색 바

소스 저장소

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

아직 데이터가 없습니다.