circle_nav_bar

安裝套件

flutter pub add circle_nav_bar

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

一個 Flutter 套件，可簡化圓形導航列的建立，提供現代且視覺上吸引人的傳統底端導航列替代方案。它讓開發者能輕鬆實作帶有自訂圖示與顏色的動畫圓形按鈕。此套件支援多個平台，包括 Android、iOS、Web、macOS、Windows 與 Linux，適用於跨平台應用程式。透過 pub add 進行最少設定，即可順暢整合至現有的 Flutter 專案中。

適用情境

建立現代應用程式介面
透過圓形導航增強使用者體驗
使用獨特的使用者介面元素建構行動與網頁應用
在創意應用中設計直覺的導航
實現動畫標籤切換

主要特色

圓形按鈕設計
可自訂圖示和顏色
流暢的動畫
跨平台支援
與 Flutter 的輕鬆整合
最小配置要求

適合對象

尋求創新導航的UI設計師
開發創意或藝術類應用的開發者
需要現代介面元素的專案
跨平台 Flutter 應用
專注於使用者參與度和視覺吸引力的應用程式

使用建議

可能需要額外的樣式來實現複雜佈局
與完整自訂小部件相比，自訂選項有限
大量動畫元素可能帶來的效能影響
不太適合簡單的導航需求
最適合導航項目較少的應用程式

原始 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 ],
        ),
      ),
      ...