Simple Floating Bottom Nav Bar

Philip Abakah — Optometrist & AI Engineer, University of Cape Coast / Envision Technologies

Abstract

A fully customizable floating bottom navigation bar Flutter package providing smooth multi-tab navigation with zero-configuration defaults and broad platform support.

1. Problem Statement

Flutter's native bottom navigation bar is rigid in styling and animation. Developers needed a drop-in package with rounded corners, floating elevation, and smooth tab transitions without building custom widgets.

2. Method

Pure Flutter/Dart widget with customizable color, shape, size, and animation parameters. Published as open-source on pub.dev with full documentation, usage examples, and MIT license.

3. Results

150 pub points. 12+ community likes. Cross-platform support across Android, iOS, Web, and Desktop. Actively used in Flutter projects in the community.

4. Limitations & Future Work

Single bar layout only — no drawer or rail variants. Animation options limited to fade and slide transitions. No gesture-based tab switching support currently implemented.

Overview

simple_floating_bottom_nav_bar is an open-source Flutter package that provides a fully customizable floating bottom navigation bar component. Published on pub.dev under a verified publisher, it supports all major Flutter platforms out of the box.

The package was built to fill a gap in the Flutter ecosystem — a bottom nav bar that floats above content with clean, configurable styling and minimal setup.

Features

Fully customizable active and inactive icon states
Configurable background color, padding, elevation, border radius, width, and height
Custom labels per navigation item
Cross-platform: Android, iOS, Linux, macOS, Web, Windows
Simple drop-in API — import, define items, pass to the widget

Usage

FloatingBottomNavBar(
  items: [
    FloatingNavBarItem(icon: Icons.home, label: 'Home'),
    FloatingNavBarItem(icon: Icons.search, label: 'Search'),
    FloatingNavBarItem(icon: Icons.add, label: 'Add'),
    FloatingNavBarItem(icon: Icons.person, label: 'Profile'),
  ],
  onTap: (index) => setState(() => _currentIndex = index),
  currentIndex: _currentIndex,
)

Why I Built It

At the time, most available floating nav bar packages were either too opinionated or poorly maintained. I needed something lightweight, configurable, and production-ready for projects I was working on — so I built and published it as an open-source package for the Flutter community.