圆形底部导航栏（或者说标签栏）。

Flutter 的圆形底部导航

这是 Uplabs 上的一个作品的实现。

开始吧

1 - 依赖它

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  circular_bottom_navigation: ^1.0.1

2 - 安装它

从命令行安装软件包

flutter packages get

3 - 导入它

现在，在您的 Dart 代码中，您可以使用

import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
import 'package:circular_bottom_navigation/tab_item.dart';

4 - 备忘单

5 - 轻松使用

创建你的TabItems

List<TabItem> tabItems = List.of([
    new TabItem(Icons.home, "Home", Colors.blue, labelStyle: TextStyle(fontWeight: FontWeight.normal)),
    new TabItem(Icons.search, "Search", Colors.orange, labelStyle: TextStyle(color: Colors.red, fontWeight: FontWeight.bold)),
    new TabItem(Icons.layers, "Reports", Colors.red),
    new TabItem(Icons.notifications, "Notifications", Colors.cyan),
  ]);

在任何你想要的地方使用这个组件

CircularBottomNavigation(
      tabItems,
      selectedCallback: (int selectedPos) {
        print("clicked on $selectedPos");
      },
    )

如何使用CircularBottomNavigationController

使用这个控制器，你可以读取当前标签位置，并在组件中设置新的标签位置（无需重建树），并使用组件内置的动画。

只需创建一个新的控制器实例

CircularBottomNavigationController _navigationController = 
new CircularBottomNavigationController(selectedPos);

然后将其传递到你的组件中

CircularBottomNavigation(
      tabItems,
      controller: _navigationController,
    );

现在你可以在任何你想要的地方读取和写入值

// Write a new value 
_navigationController.value = 0;

// Read the latest value
int latest = _navigationController.value;

GitHub

https://github.com/imaNNeoFighT/circular_bottom_navigation