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

ultimate_bottom_navbar 표지
패키지 상세v0.0.7

ultimate_bottom_navbar

최종 하단 탐색 바는 Flutter 애플리케이션용으로 사용자 정의 가능한 하단 탐색 바입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
25
좋아요
22
Pub 점수
140

패키지 설치

flutter pub add ultimate_bottom_navbar

패키지 개요

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

Ultimate Bottom Navigation Bar는 Flutter 애플리케이션을 위한 매우 사용자 정의 가능한 하단 네비게이션 바입니다. 광범위한 스타일링 옵션, 부드러운 애니메이션, 그리고 안드로이드, iOS, 웹, macOS, 윈도우, 리눅스 등 다양한 플랫폼에 쉽게 통합할 수 있습니다. 아이콘, 라벨, 배지, 사용자 지정 위젯을 지원하여 사용자 경험을 향상시키면서도 깔끔하고 반응형 디자인을 유지합니다. 직관적인 탐색과 현대적인 외관이 필요한 앱에 적합합니다. 유연성 덕분에 단순한 네비게이션부터 복잡한 네비게이션 요구까지 모두 충족시킬 수 있습니다.

사용 사례

  • 모바일 앱 탐색
  • 웹 애플리케이션 대시보드
  • 크로스 플랫폼 UI 일관성
  • 사용자 정의 가능한 탭 인터페이스
  • 애니메이션을 통한 사용자 경험 향상
  • 다중 플랫폼 배포

주요 기능

  • 완전히 사용자 정의 가능한 외관
  • 아이콘, 레이블 및 배지 지원
  • 부드러운 전환 애니메이션
  • 플랫폼 독립적 설계
  • Flutter와의 간편한 통합
  • 광범위한 구성 옵션

적합한 대상

  • 유연한 탐색을 원하는 개발자
  • 시각적 제어를 원하는 디자이너
  • 다중 플랫폼을 대상으로 하는 앱
  • 애니메이션 전환을 필요로 하는 프로젝트
  • UI 일관성을 우선시하는 팀

고려 사항

  • Flutter 레이아웃 원칙에 대한 이해가 필요합니다
  • 복잡한 테마에 대해 추가 스타일링이 필요할 수 있습니다
  • 과도한 사용자 정의 위젯으로 인한 성능 영향
  • 기본 사용법을 넘어서는 문서가 제한적
  • 3~6개의 탐색 항목을 가진 앱에 가장 적합

원본 README

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

Ultimate Bottom Navigation Bar

Ultimate Bottom Navigation Bar is a customizable bottom navigation bar for your Flutter applications. It allows you to easily create a navigation bar with icons and titles, and customize various aspects of its appearance and behaviors.

Under Curve

Under Curve

Upper Curve

Upper Curve

No Curve

No Curve

Static Curve

Static Upper Curve Static Under Curve

Dynamic Curve

Dynamic Upper Curve Dynamic Under Curve

Other Customiztions

Customizaions

How To Use

Ultimate Bottom Navigation Bar can be used with Scaffold by setting up at bottomNavigationBar property.

Add this to your package's pubspec.yaml file, use the latest version

dependencies:
  ultimate_bottom_navbar: ^latest_version
import 'package:ultimate_bottom_navbar/ultimate_bottom_navbar.dart';
    int currentIndex = 0;

    final List<String> title = [
        "Favourite",
        "Wallet",
        "Home",
        "Freeze",
        "Alarm"
    ];

    final List<IconData> icons = [
        Icons.favorite, 
        Icons.wallet_giftcard_sharp, 
        Icons.home, 
        Icons.ac_unit_outlined, 
        Icons.access_alarm_rounded, 
    ];

    final List pages = [
        const Page1(),
        const Page2(),
        const Page3(),
        const Page4(),
        const Page5(),
    ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: pages[currentIndex],
        bottomNavigationBar: UltimateBottomNavBar(
            icons         : icons,
            titles        : title,
            currentIndex  : currentIndex,
            onTap         : (index) async => onItemTapped(index), 
        ),
    );
  }

  void onItemTapped(int index) async{
    setState(() {
        currentIndex = index;
    });
  }

RTL Support

Works For Both RTL and LTR and can be configured with Directionality:

Directionality(
  textDirection: TextDirection.rtl,
  child: Scaffold(bottomNavigationBar:UltimateBottomNavBar()),
)

Controls For Upper And Under Curve And Stroke Borders

  • Upper Curves:

  • Control the width and shape of the upper curves using various X and Y control points.

  • Adjust stroke properties for the upper curves, such as width and control points.

  • Under Curves:

  • Manage the width and shape of the under curves with specific X and Y control points.

  • Modify stroke properties for the under curves, including width and control points.

These properties collectively allow users to finely control the appearance of upper and under curves, as well as stroke borders, providing flexibility in customizing the graphical elements of the interface.

Properties

Property Description
icons Required Icons
titles Required Titles Use Empty Text For No Title
currentIndex Required Current Selected Index
backgroundColor Solid Background Color
foregroundColor Solid Foreground Color
foregroundStrokeBorderColor Foreground Stroke Solid Border Color
backgroundStrokeBorderColor Background Stroke Solid Border Color
backgroundStrokeBorderWidth Background Stroke Border Thickness
foregroundStrokeBorderWidth Foreground Stroke Border Thickness
backgroundGradient Background Gradient Color
foreGroundGradientShader Foreground Gradient Shader Color
foregroundStrokeGradientShader Foreground Stroke Border Gradient Shader Color
backgroundStrokeGradientShader Background Stroke Border Gradient Shader Color
navMargin Bottom Navigation Margin
backgroundBorderRadius Background Border Radius
selectedIconColor Selected Icon Color
selectedIconSize Selected Icon Size
selectedTextSize Selected Text Size
selectedTextColor Selected Text Color
unselectedIconColor Unselected Icon Color
unselectedIconSize Unselected Icon Size
unselectedTextSize Unselected Text Size
unselectedTextColor Unselected Text Color
showForeGroundStrokeAllSide Show Foreground Stroke Border All Sides
showBackGroundStrokeAllSide Show Background Stroke Border All Sides
useForeGroundGradient Use Foreground Gradient Color
showForeGround Show Hide Foreground
useForegroundShaderStroke Use Foreground Shader Border Stroke Color
useBackgroundShaderStroke Use Background Shader Border Stroke Color
underCurve Under Curve Or Upper Curve
staticCurve Static Curve Or Dynamic Curve
showCircleStaticMidItemStatic Show Circle Decoration For Static Curve
midItemCircleColorStatic Mid Item Circle Color For Static Curve
midItemCircleBorderColorStatic Mid Item Circle Border Color For Static Curve
showMidCircleStatic Show Mid Circle Or Hide For Static Curve
midCircleRadiusStatic Mid Circle Radius For Static Curve
midCircleBorderRadiusStatic Mid Circle Border Radius For Static Curve
customSelectedItemDecor Custom Selected Item Decoration
customUnSelectedItemDecor Custom Unselected Item Decoration
badgeData Badge Data For Individual Item
badgeColor Badge Background Color
badgeTextStyle Badge Text Style
badgeCircleRadius Badge Circle Radius
badgeTopPosition Badge Top Position
badgeBottomPosition Badge Bottom Position
badgeLeftPosition Badge Left Position
badgeRightPosition Badge Right Position
backgroundHeight Height for Background Container
foregroundHeight Height for Foreground Container
animationType Animation Type
animationDuration Animation Duration
onTap Item Tap Function
upperCurveWidthCtrl Controls the width of the upper curve.
leftX1UpperCurveCtrl Controls the x-coordinate of the left control point 1.
leftY1UpperCurveCtrl Controls the y-coordinate of the left control point 1.
leftX2UpperCurveCtrl Controls the x-coordinate of the left control point 2.
leftY2UpperCurveCtrl Controls the y-coordinate of the left control point 2.
leftX3UpperCurveCtrl Controls the x-coordinate of the left control point 3.
leftY3UpperCurveCtrl Controls the y-coordinate of the left control point 3.
rightX1UpperCurveCtrl Controls the x-coordinate of the right control point 1.
rightY1UpperCurveCtrl Controls the y-coordinate of the right control point 1.
rightX2UpperCurveCtrl Controls the x-coordinate of the right control point 2.
rightY2UpperCurveCtrl Controls the y-coordinate of the right control point 2.
rightX3UpperCurveCtrl Controls the x-coordinate of the right control point 3.
rightY3UpperCurveCtrl Controls the y-coordinate of the right control point 3.
upperStrokeCurveWidthCtrl Controls the width of the upper stroke curve.
leftStrokeX1UpperCurveCtrl Controls the x-coordinate of the left control point 1 for the upper stroke.
leftStrokeY1UpperCurveCtrl Controls the y-coordinate of the left control point 1 for the upper stroke.
leftStrokeX2UpperCurveCtrl Controls the x-coordinate of the left control point 2 for the upper stroke.
leftStrokeY2UpperCurveCtrl Controls the y-coordinate of the left control point 2 for the upper stroke.
leftStrokeX3UpperCurveCtrl Controls the x-coordinate of the left control point 3 for the upper stroke.
leftStrokeY3UpperCurveCtrl Controls the y-coordinate of the left control point 3 for the upper stroke.
rightStrokeX1UpperCurveCtrl Controls the x-coordinate of the right control point 1 for the upper stroke.
rightStrokeY1UpperCurveCtrl Controls the y-coordinate of the right control point 1 for the upper stroke.
rightStrokeX2UpperCurveCtrl Controls the x-coordinate of the right control point 2 for the upper stroke.
rightStrokeY2UpperCurveCtrl Controls the y-coordinate of the right control point 2 for the upper stroke.
rightStrokeX3UpperCurveCtrl Controls the x-coordinate of the right control point 3 for the upper stroke.
rightStrokeY3UpperCurveCtrl Controls the y-coordinate of the right control point 3 for the upper stroke.
underCurveWidthCtrl Controls the width of the under curve.
leftX1UnderCurveCtrl Controls the x-coordinate of the left control point 1 for the under curve.
leftY1UnderCurveCtrl Controls the y-coordinate of the left control point 1 for the under curve.
leftX2UnderCurveCtrl Controls the x-coordinate of the left control point 2 for the under curve.
leftY2UnderCurveCtrl Controls the y-coordinate of the left control point 2 for the under curve.
leftX3UnderCurveCtrl Controls the x-coordinate of the left control point 3 for the under curve.
leftY3UnderCurveCtrl Controls the y-coordinate of the left control point 3 for the under curve.
rightX1UnderCurveCtrl Controls the x-coordinate of the right control point 1 for the under curve.
rightY1UnderCurveCtrl Controls the y-coordinate of the right control point 1 for the under curve.
rightX2UnderCurveCtrl Controls the x-coordinate of the right control point 2 for the under curve.
rightY2UnderCurveCtrl Controls the y-coordinate of the right control point 2 for the under curve.
rightX3UnderCurveCtrl Controls the x-coordinate of the right control point 3 for the under curve.
rightY3UnderCurveCtrl Controls the y-coordinate of the right control point 3 for the under curve.
underStrokeCurveWidthCtrl Controls the width of the under stroke curve.
leftStrokeX1UnderCurveCtrl Controls the x-coordinate of the left control point 1 for the under stroke.
leftStrokeY1UnderCurveCtrl Controls the y-coordinate of the left control point 1 for the under stroke.
leftStrokeX2UnderCurveCtrl Controls the x-coordinate of the left control point 2 for the under stroke.
leftStrokeY2UnderCurveCtrl Controls the y-coordinate of the left control point 2 for the under stroke.
leftStrokeX3UnderCurveCtrl Controls the x-coordinate of the left control point 3 for the under stroke.
leftStrokeY3UnderCurveCtrl Controls the y-coordinate of the left control point 3 for the under stroke.
rightStrokeX1UnderCurveCtrl Controls the x-coordinate of the right control point 1 for the under stroke.
rightStrokeY1UnderCurveCtrl Controls the y-coordinate of the right control point 1 for the under stroke.
rightStrokeX2UnderCurveCtrl Controls the x-coordinate of the right control point 2 for the under stroke.
rightStrokeY2UnderCurveCtrl Controls the y-coordinate of the right control point 2 for the under stroke.
rightStrokeX3UnderCurveCtrl Controls the x-coordinate of the right control point 3 for the under stroke.
rightStrokeY3UnderCurveCtrl Controls the y-coordinate of the right control point 3 for the under stroke.

Check Out example project @ example

FAQ

Create a feature requests or bugs @ Feature Request / issue tracker.

카테고리

소스 저장소

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

아직 데이터가 없습니다.