FancyBottomNavigation

Flutter 插件 - 炫酷底部导航。

入门

添加插件(pub即将上线)

dependencies:
  ...
  fancy_bottom_navigation: ^0.1.0

限制

目前此插件仅限于多于1个标签,少于5个标签。所以是2-4个标签。

基本用法

bottomNavigationBar: FancyBottomNavigation(
    tabs: [
        TabData(iconData: Icons.home, title: "Home"),
        TabData(iconData: Icons.search, title: "Search"),
        TabData(iconData: Icons.shopping_cart, title: "Basket")
    ],
    context: context,
    onTabChangedListener: (position) {
        setState(() {
        currentPage = position;
        });
    },
)

属性

必需

tabs -> TabData 对象列表

onTabChangedListener -> 处理标签点击的函数,接收int position

可选

initialSelection -> 默认为 0

circleColor -> 默认为 null,从Theme派生

activeIconColor -> 默认为 null,从Theme派生

inactiveIconColor -> 默认为 null,从Theme派生

taxtColor -> 默认为 null,从Theme派生

barBagroundColor -> 默认为 null,从Theme派生

主题化

该栏将尝试开箱即用您的当前主题,但您可能希望对其进行主题化。以下是属性

Fancy Theming

GitHub

https://github.com/tunitowen/fancy_bottom_navigation