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