Flutter底部导航栏插件ss_bottom_navbar的使用

Flutter底部导航栏插件ss_bottom_navbar的使用

ss_bottom_navbar 是一个现代的 Flutter 底部导航栏插件，兼容 Android 和 iOS。您可以自由地自定义它。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  ss_bottom_navbar: 0.1.1

然后运行以下命令以获取依赖项：

flutter pub get

导入插件：

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

示例代码

以下是一个完整的示例代码，展示如何使用 ss_bottom_navbar 插件。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SS Bottom NavBar Example App',
      home: App(),
    );
  }
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  final _isVisible = true;

  final _colors = [Colors.red, Colors.blue, Colors.green, Colors.orange, Colors.teal];
  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),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => SSBottomBarState(),
      child: Consumer<SSBottomBarState>(
        builder: (context, state, _) {
          return Scaffold(
            body: IndexedStack(
              index: state.selected,
              children: _buildPages(),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                state.setSelected(3);
              },
              child: Icon(_isVisible ? Icons.keyboard_arrow_down : Icons.keyboard_arrow_up),
            ),
            bottomNavigationBar: SSBottomNav(
              items: items,
              state: state,
              color: Colors.black,
              selectedColor: Colors.white,
              unselectedColor: Colors.black,
              visible: _isVisible,
              bottomSheetWidget: _bottomSheet(),
              showBottomSheetAt: 2,
            ),
          );
        },
      ),
    );
  }

  Widget _page(Color color) => Container(color: color);

  List<Widget> _buildPages() => _colors.map((color) => _page(color)).toList();

  Widget _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'),
              onTap: () {
                Navigator.maybePop(context);
              },
            ),
          ],
        ),
      );
}

效果图

使用说明

创建项目

首先，创建一个 Flutter 项目并安装 ss_bottom_navbar 插件。

初始化状态

final _isVisible = true;

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) {
    debugPrint(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) {}
),

自定义选项

底部弹出框（SSBottomSheet）

如果需要使用底部弹出框，可以使用 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);