circle_nav_bar

패키지 개요

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

원형 네비게이션 바를 생성하는 것을 단순화하는 플러터 패키지로, 전통적인 하단 네비게이션 바의 현대적이고 시각적으로 매력적인 대안을 제공합니다. 개발자들이 사용자 지정 아이콘과 색상으로 애니메이션된 원형 버튼을 쉽게 구현할 수 있도록 합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 크로스플랫폼 애플리케이션에 유연하게 활용할 수 있습니다. pub add를 통해 최소한의 설정으로 기존 플러터 프로젝트에 원활하게 통합됩니다.

사용 사례

현대적인 앱 인터페이스 만들기
원형 탐색을 통한 사용자 경험 향상
독특한 UI 요소로 모바일 및 웹 앱 만들기
창의적 앱에서 직관적인 탐색 설계하기
애니메이션 탭 전환 구현

주요 기능

원형 버튼 디자인
사용자 지정 가능한 아이콘 및 색상
부드러운 애니메이션
크로스 플랫폼 지원
Flutter와의 간편한 통합
필수 최소 구성

적합한 대상

혁신적인 탐색을 찾는 UI 디자이너
창의적 또는 예술 앱을 개발하는 개발자
현대적인 인터페이스 요소가 필요한 프로젝트
크로스 플랫폼 플러터 애플리케이션
사용자 참여도와 시각적 매력에 중점을 둔 앱

고려 사항

복잡한 레이아웃을 위해 추가 스타일링이 필요할 수 있습니다
완전히 사용자 지정된 위젯에 비해 사용자 정의가 제한됨
많은 애니메이션 요소로 인한 성능 영향 가능성
간단한 탐색 요구 사항에 적합하지 않습니다
나비게이션 항목이 적은 앱에 가장 적합

원본 README

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

Circle Nav Bar

Example style:

./example

no padding black	padding with gradient

./example_two

Level and Icons	only Icons	padding with Levels and icons

How to use

dependencies:
  circle_nav_bar: ^latest_version

import 'package:circle_nav_bar/circle_nav_bar.dart';

Scaffold(
      bottomNavigationBar: CircleNavBar(
        activeIcons: const [
          Icon(Icons.person, color: Colors.deepPurple),
          Icon(Icons.home, color: Colors.deepPurple),
          Icon(Icons.favorite, color: Colors.deepPurple),
        ],
        inactiveIcons: const [
          Text("My"),
          Text("Home"),
          Text("Like"),
        ],
        color: Colors.white,
        circleColor: Colors.white,
        height: 60,
        circleWidth: 60,
        initIndex: 1,
        onChanged: (v) {
          // TODO
        },
        // tabCurve: ,
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
        cornerRadius: const BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(24),
          bottomLeft: Radius.circular(24),
        ),
        shadowColor: Colors.deepPurple,
        circleShadowColor: Colors.deepPurple,
        elevation: 10,
        gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
        circleGradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [ Colors.blue, Colors.red ],
        ),
      ),
      ...