ff_navigation_bar

一个高度可配置的导航栏，强调选中的项目。

navbar-demo

添加依赖

dependencies:
  ff_navigation_bar: ^0.0.1

基本用法

import 'package:flutter/material.dart';
import 'package:ff_navigation_bar/ff_navigation_bar.dart';
...
          return Scaffold(
            backgroundColor: Colors.grey[200],
            body: CustomScrollView(
              slivers: [
                ESSliverAppBar(
                  context: context,
                  title: homeData.getTitle(),
                  actions: homeData.getAvailableActions(),
                  forceElevated: true,
                ),
                SliverFillRemaining(
                  child: homeData.getChild(),
                ),
              ],
            ),
            bottomNavigationBar: FFNavigationBar(
              theme: FFNavigationBarTheme(
                barBackgroundColor: Colors.white,
                selectedItemBackgroundColor: Colors.green,
                selectedItemIconColor: Colors.white,
                selectedItemLabelColor: Colors.black,
              ),
              selectedIndex: 1,
              onSelectTab: (index) {},
              items: [
                FFNavigationBarItem(
                  iconData: Icons.calendar_today,
                  label: 'Schedule',
                ),
                FFNavigationBarItem(
                  iconData: Icons.people,
                  label: 'Contacts',
                ),
                FFNavigationBarItem(
                  iconData: Icons.attach_money,
                  label: 'Bills',
                ),
                FFNavigationBarItem(
                  iconData: Icons.note,
                  label: 'Notes',
                ),
                FFNavigationBarItem(
                  iconData: Icons.settings,
                  label: 'Settings',
                ),
              ],
            ),
          );

主题

navbar 包含一个 Theme 类，可用于定义 navbar 及其项目的绝大多数外观设置。

  • barBackgroundColor: 整个栏的背景色（默认 = 白色）
  • selectedItemBackgroundColor: 用于显示选中项目图标的 CircleAvatar 小部件的背景色（默认 = blueAccent）
  • selectedItemIconColor: 选中项目的图标颜色（默认 = 白色）
  • selectedItemLabelColor: 选中项目的标签颜色（默认 = 黑色）
  • unselectedItemBackgroundColor: 未选中项目的背景色（默认 = 透明）
  • unselectedItemIconColor: 未选中项目图标的颜色（默认 = 灰色）
  • unselectedItemLabelColor: 未选中项目标签的颜色（默认 = 灰色）
  • selectedItemTextStyle: 用于选中项目标签的文本样式。selectedItemLabelColor 属性的优先级高于样式中的任何颜色属性（默认大小 = 13.0，粗细 = Bold）
  • unselectedItemTextStyle: 用于未选中项目标签的文本样式（默认大小 = 12.0，粗细 = Normal）
  • barHeight: 栏的高度（已自动包含在 SafeArea 小部件中）
  • itemWidth: 用于选中项目 CircleAvater 的宽度（默认 = 48.0）
  • showSelectedItemShadow: 指示是否显示选中项目下方的阴影（默认 = true）

FFNavigationBar 属性

  • selectedIndex: 应标记为选中的项目编号（从零开始）
  • onSelectTab: 用于接收点击通知的回调函数，使用类型定义 Function(int selectedIndex)
  • items: 要显示为栏项目的 FFNavigationBarItem 对象列表
  • theme: FFNavigationBarTheme 主题对象

FFNavigationBarItem

  • label: 要显示为项目标签的字符串
  • iconData: 用于项目图标的 IconData
  • animationDuration: Duration 对象，可用于调整导航栏项目的 AnimatedContainer 行为。
  • selectedBackgroundColor: Color 值，可覆盖特定导航栏项目的 theme 的 selectedItemBackgroundColor 值（用于为每个项目创建不同的颜色）
  • selectedForegroundColor: Color 值，可覆盖 theme 的 selectedItemIconColor 值
  • selectedLabelColor: Color 值，可覆盖 theme 的 selectedItemLabelColor 值

GitHub

https://github.com/jwbaldry/Flutter-FFNavigationBar