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

ducafecatFlutter 生态导航
blur_bottom_bar 封面
插件详情v1.0.3

blur_bottom_bar

Flutter 模糊底部栏是 iOS 标签视图的重现，采用 Material Design 适用于 Android 和 iOS

AndroidiOSWebmacOSWindowsLinux
pub.dev API 文档 源代码
近 30 天下载
82
喜欢数
29
Pub 分数
150

安装插件

flutter pub add blur_bottom_bar

插件介绍

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

Blur Bottom Bar 是一个 Flutter 包，可重现带有模糊背景效果的 iOS 风格标签栏，将 iOS 美学与 Material Design 原则相结合，实现 Android、iOS、Web、macOS、Windows 和 Linux 平台上的跨平台一致性。它提供现代化且视觉吸引力强的导航体验，具有流畅的过渡效果和可自定义的样式。该包非常适合希望在不牺牲跨平台可用性的情况下获得高端外观的应用程序。

适合场景

  • 跨平台移动应用导航
  • iOS 风格的用户界面，采用 Material Design
  • 现代应用程序界面带有模糊效果
  • 基于选项卡的应用程序需要视觉深度
  • 通过动态底部栏增强用户体验

主要特点

  • 背景模糊效果，灵感来自iOS
  • Android 的 Material Design 集成
  • 对多个平台的支持
  • 可自定义标签外观
  • 流畅的动画和过渡
  • 跨设备的响应式设计

适合对象

  • 在Flutter上开发类似iOS的应用程序的开发者
  • 注重设计的应用程序，需要美观的导航
  • 跨平台项目，目标为 iOS 和 Android
  • 旨在实现精致现代用户界面的应用程序
  • 优先考虑跨平台视觉一致性的团队

使用建议

  • 可能会影响低端设备的性能
  • 需要仔细的色彩对比以确保可读性
  • 与原生实现相比，自定义选项有限
  • 模糊效果可能存在的可访问性问题
  • 最适合浅色主题设计

原始 README

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

blur_bottom_bar

Flutter blur bottom bar

This is a recreation of the ios tab view with material design for android and ios

BlurBottomBar Gif BlurBottomBar Gif

Getting Started

Add the dependency in pubspec.yaml:

dependencies:
  ...
  blur_bottom_bar: ^1.0.1

Basic Usage

return Scaffold(
      appBar: AppBar(title: Text("Blur bar example")),
      body: Stack(
        children: <Widget>[
          _widgetOptions.elementAt(_selectedIndex),
          BlurBottomView(
              bottomNavigationBarItems: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.business),
                  label: 'Business',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.school),
                  label: 'School',
                )
              ],
              currentIndex: _selectedIndex,
              onIndexChange: (val) {
                _onItemTapped(val);
              }),
        ],
      ),
    );

所属分类

底部导航栏

源码仓库

使用此插件的项目

暂无相关数据。