ss_bottom_navbar

Flutter 现代底部导航栏。兼容 Android 和 iOS。您可以自由定制。

ss_bottom_navbar

入门

dependencies:
  ss_bottom_navbar: 0.1.0

$  flutter pub get

import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';

示例

SSBottomNav

用法

创建项目
final items = [
  SSBottomNavItem(text: 'Home', iconData: Icons.home),
  SSBottomNavItem(text: 'Store', iconData: Icons.store),
  SSBottomNavItem(text: 'Add', iconData: Icons.add, isIconOnly: true),
  SSBottomNavItem(text: 'Explore', iconData: Icons.explore),
  SSBottomNavItem(text: 'Profile', iconData: Icons.person),
];
创建状态
SSBottomBarState _state = SSBottomBarState();

SSBottomNav(
  items: items,
  state: _state,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  onTabSelected: (index) {
     print(index);
     setState(() {
        _index = index;
    });
  }
),
带有底部对话框
SSBottomNav(
  items: items,
  state: _state,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  visible: isVisible,
  bottomSheetWidget: Container(),
  showBottomSheetAt: 2,
  onTabSelected: (index) {}
),

自定义

名称 类型 描述
items List<SSBottomNavItem> SSBottomNavItem 项目列表
state SSBottomBarState 底部导航栏状态，作为ChangeNotifier
iconSize 双精度 项目中图标的大小
backgroundColor 颜色 组件的背景颜色
color 颜色 滑块的颜色
selectedColor 颜色 选中时项目的颜色
unselectedColor 颜色 未选中时项目的颜色
onTabSelected ValueChanged<int> 选项卡被选中时返回索引的函数
阴影 List<BoxShadow> 滑块的阴影
visible 布尔值 SSBottomNavItem 的可见性
bottomSheetWidget Widget 底部对话框的子组件
showBottomSheetAt 整数 显示SSBottomNavItem的SSBottomNavItem的索引
bottomSheetHistory 布尔值 默认true。如果在显示SSBottomSheet时按下showBottomSheetAt，则返回到上一个选项卡的选项
dismissedByAnimation ValueChanged<bool> 如果SSBottomSheet被动画关闭，则返回true的函数

SSBottomSheet

showcase-bottom-sheet

如果您想使用SSBottomNav的底部对话框，可以使用SSBottomSheet来实现

用法
SSBottomSheet.show(
  context: context,
  child: bottomSheet(),
  onPressed: (offset) {}
);

bottomSheet() => Container(
  color: Colors.white,
  child: Column(
    children: [
      ListTile(
        leading: Icon(Icons.camera_alt),
        title: Text('Use Camera'),
      ),
      ListTile(
        leading: Icon(Icons.photo_library),
        title: Text('Choose from Gallery'),
      ),
      ListTile(
        leading: Icon(Icons.edit),
        title: Text('Write a Story'),
      ),
    ],
  ),
);
关闭底部对话框
Navigator.maybePop(context);

自定义

名称 类型 描述
Widget child 子组件
backgroundColor 颜色 组件的背景颜色
bottomMargin 双精度 底部边距，根据您的底部导航栏高度设置
onPressed ValueChanged<Offset> 点击时返回Offset

GitHub

https://github.com/NBK-Group/ss_bottom_navbar