搜索插件、代码仓与 APP 分类

bnb_flutter 封面
插件详情v0.0.4

bnb_flutter

一个高度可定制的 Flutter 底部导航栏包,支持流畅动画和灵活的项目支持。专为简洁性、响应性和原生外观设计。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
56
喜欢数
3
Pub 分数
160

安装插件

flutter pub add bnb_flutter

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

bnb_flutter 是一个可定制的 Flutter 包,用于创建带有平滑动画和灵活项目支持的底部导航栏。设计简洁且响应迅速,可在所有平台上提供原生外观和感觉。开发者可以轻松调整导航栏的外观和行为,以匹配其应用的设计语言。该包支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,确保一致的用户体验。通过直观的 API 和内置动画,它简化了动态底部导航栏的实现。

适合场景

  • 移动应用中的自定义底部导航
  • 跨多个平台的响应式导航
  • 动画标签切换
  • 动态徽章和图标管理
  • 高度定制的UI组件

主要特点

  • 流畅的动画
  • 灵活的项目自定义
  • 跨平台兼容性
  • 原生外观
  • 与现有 Flutter 项目的轻松集成
  • 支持徽章和图标

适合对象

  • Flutter 开发人员构建移动或 Web 应用
  • 需要响应式导航的设计人员
  • 需要动画和交互式底部栏的项目
  • 针对多个操作系统的应用程序

使用建议

  • 需要 Flutter SDK 3.0 或更高版本
  • 可能需要额外的样式来处理复杂布局
  • 仅限底部导航使用场景

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

bnb_flutter

GitHub Repo License

A highly customizable Flutter bottom navigation bar package with smooth animations and flexible item support. Built for simplicity, responsiveness, and a native look and feel.


✨ Features

  • 🎨 UI with smooth transition animations
  • 📱 Supports fixed and shifting navigation bar types
  • 🔄 State persistence across tab switches
  • 🔧 Easily integrates into any Flutter project

💻 Installation

Add the following to your pubspec.yaml:

dependencies:
  bnb_flutter: ^<latest_version>

Then run:

flutter pub get

🚀 Getting Started

Import the package:

import 'package:bnb_flutter/bnb_flutter.dart';

Use the BnbWidget widget in your scaffold:

class MyBottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BnbWidget(
      items: [
        BnbItem(
          iconData: Icons.home,
        ),
        BnbItem(
          iconData: Icons.list,
        ),
        BnbItem(
          iconData: Icons.settings,
        ),
        BnbItem(
          iconData: Icons.book_outlined,
        ),
        BnbItem(
          iconData: Icons.person,
        ),
      ],
      onTap: (p0) =>
          setState(() {
            selectedIndex = p0;
          }),
      selectedIndex: selectedIndex,
      style: BnbStyle(
        iconSize: const Size(24, 24),
      ),
    );
  }
}

📂 Example

For a complete example, check the example project included in the repository


📸 Screenshot

Screenshot


🛠️ Contribution

Contributions are welcome! Feel free to open issues or submit PRs.

  1. Fork the repo
  2. Create a new branch (git checkout -b feature/my-feature)
  3. Commit your changes (git commit -am 'Add new feature')
  4. Push to the branch (git push origin feature/my-feature)
  5. Create a new Pull Request

📄 License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.


🤝 Author

Developed with ❤️ by Touhid

所属分类

源码仓库

使用此插件的项目

暂无相关数据。