Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
blur_bottom_bar cover
Package detailsv1.0.3

blur_bottom_bar

Flutter blur bottom bar is a recreation of the ios tab view with material desifn for android and ios

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
82
Likes
29
Pub points
150

Install package

flutter pub add blur_bottom_bar

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Blur Bottom Bar is a Flutter package that recreates the iOS-style tab bar with a blurred background effect, combining iOS aesthetics with Material Design principles for cross-platform consistency on Android, iOS, Web, macOS, Windows, and Linux. It offers a modern, visually appealing navigation experience with smooth transitions and customizable styling. The package is ideal for apps seeking a premium look without sacrificing usability across platforms.

Use cases

  • Cross-platform mobile app navigation
  • iOS-inspired UI with Material Design
  • Modern app interfaces with blur effects
  • Tab-based applications requiring visual depth
  • Enhancing user experience with dynamic bottom bars

Key features

  • Blur background effect inspired by iOS
  • Material Design integration for Android
  • Support for multiple platforms
  • Customizable tab appearance
  • Smooth animations and transitions
  • Responsive design across devices

Suitable for

  • Developers creating iOS-like apps on Flutter
  • Design-focused applications needing aesthetic navigation
  • Cross-platform projects targeting iOS and Android
  • Apps aiming for a polished, modern UI
  • Teams prioritizing visual consistency across platforms

Considerations

  • May impact performance on low-end devices
  • Requires careful color contrast for readability
  • Limited customization compared to native implementations
  • Potential accessibility concerns with blur effects
  • Best suited for light-themed designs

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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);
              }),
        ],
      ),
    );

Categories

Bottom Navigation Bar

Source repository

Projects using this package

No data available yet.