arc_floating_bottom_nav 0.1.1

A customizable floating bottom navigation bar for Flutter with a raised center item.

arc_floating_bottom_nav

English | 简体中文

A customizable Flutter package for a floating bottom navigation bar with a raised center item.

Demo

Features

• Controlled active/inactive state with currentIndex
• One dedicated center item with image or custom widget support
• Tunable top curve for a soft raised center shape
• Configurable colors, spacing, blur, shadows, labels, and icon behavior
• Safe-area aware bottom layout
• Example app included

Installation

dependencies:
  arc_floating_bottom_nav: ^0.1.0

Usage

import 'package:arc_floating_bottom_nav/arc_floating_bottom_nav.dart';
import 'package:flutter/material.dart';

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int currentIndex = 0;

  late final List<FloatingBottomNavigationItem> items =
      <FloatingBottomNavigationItem>[
        const FloatingBottomNavigationItem(
          label: 'Home',
          icon: Icons.home_outlined,
          activeIcon: Icons.home,
        ),
        const FloatingBottomNavigationItem(
          label: 'Trips',
          icon: Icons.directions_car_outlined,
          activeIcon: Icons.directions_car_outlined,
        ),
        const FloatingBottomNavigationItem(
          label: 'AI Travel',
          isCenter: true,
          centerImage: NetworkImage('https://picsum.photos/200'),
        ),
        const FloatingBottomNavigationItem(
          label: 'Explore',
          icon: Icons.explore_outlined,
          activeIcon: Icons.explore_outlined,
        ),
        const FloatingBottomNavigationItem(
          label: 'Profile',
          icon: Icons.person_outline_rounded,
          activeIcon: Icons.person_outline_rounded,
        ),
      ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: currentIndex,
        children: items.map((item) => Center(child: Text(item.label))).toList(),
      ),
      bottomNavigationBar: FloatingBottomNavigationBar(
        items: items,
        currentIndex: currentIndex,
        onTap: (int index) => setState(() => currentIndex = index),
      ),
    );
  }
}

Main API

• FloatingBottomNavigationBar
• FloatingBottomNavigationItem
• FloatingBottomNavigationStyle
• FloatingBottomNavigationCurve

Parameter Reference

FloatingBottomNavigationBar

Parameter	Type	Meaning
items	List<FloatingBottomNavigationItem>	All tabs. At least 3 items are required, and exactly 1 item must have isCenter: true.
currentIndex	int	Currently selected tab index.
onTap	ValueChanged<int>	Callback fired when a tab is tapped.
style	FloatingBottomNavigationStyle	Global layout and visual configuration for the bar.

FloatingBottomNavigationItem

Parameter	Type	Meaning
label	String	Text displayed below the icon or center avatar.
icon	IconData?	Default icon for a regular item.
activeIcon	IconData?	Icon shown when a regular item is selected.
iconSize	double?	Icon size for the regular state.
activeIconSize	double?	Icon size for the selected state.
iconBuilder	Widget Function(BuildContext, bool, Color)?	Custom icon builder for a regular item. Receives context, selected, and resolved icon color.
isCenter	bool	Marks the item as the single raised center item.
filledSelection	bool	When true, the selected regular item gets a filled circular background.
centerImage	ImageProvider<Object>?	Image source for the center item.
centerChild	Widget?	Custom center content when you do not use centerImage.
centerSize	double?	Center item size in the unselected state.
activeCenterSize	double?	Center item size in the selected state.
activeColor	Color?	Active icon or label color override for this item.
inactiveColor	Color?	Inactive icon or label color override for this item.
activeLabelStyle	TextStyle?	Active label style override for this item.
inactiveLabelStyle	TextStyle?	Inactive label style override for this item.
selectionGradient	Gradient?	Gradient used by the filled selected circle for a regular item.

FloatingBottomNavigationStyle

Parameter	Type	Meaning
outerPadding	EdgeInsets	Outer spacing around the whole navigation bar widget.
barHeight	double	Bar height on regular-width screens.
compactBarHeight	double	Bar height on narrow screens.
barTop	double	Top offset of the clipped bar background on regular-width screens.
compactBarTop	double	Top offset of the clipped bar background on narrow screens.
centerGap	double	Empty horizontal gap reserved for the center item on regular-width screens.
compactCenterGap	double	Empty horizontal gap reserved for the center item on narrow screens.
centerTop	double	Top offset of the raised center item. Smaller values move it upward.
adaptBottomSafeArea	bool	Adds bottom safe-area padding when enabled.
backgroundColor	Color	Fill color of the navigation bar background.
blurSigma	double	Blur strength applied by the background BackdropFilter.
backgroundShadow	BoxShadow?	Optional shadow for the clipped bar background.
curve	FloatingBottomNavigationCurve	Shape configuration for the raised top contour.
selectedItemColor	Color	Default selected color for regular items.
unselectedItemColor	Color	Default unselected color for regular items.
selectedCenterLabelColor	Color	Default selected label color for the center item.
unselectedCenterLabelColor	Color	Default unselected label color for the center item.
itemTopPadding	double	Top padding before regular item content starts.
itemSpacing	double	Vertical spacing between a regular item icon and label.
itemLabelStyle	TextStyle	Default label style for unselected regular items.
selectedItemLabelStyle	TextStyle	Default label style for selected regular items.
itemIconSize	double	Fallback icon size for regular items.
filledSelectionSize	double	Diameter of the filled selected background for regular items.
defaultSelectionGradient	Gradient	Default gradient used by filled regular items.
centerSelectedSize	double	Fallback center item size when selected.
centerUnselectedSize	double	Fallback center item size when unselected.
centerButtonPadding	EdgeInsets	Inner padding inside the circular center button.
centerButtonColor	Color	Background color behind the center image or child.
centerShadowColor	Color	Shadow color of the center button.
centerShadowBlur	double	Blur radius of the center button shadow.
centerShadowOffset	Offset	Offset of the center button shadow.
centerLabelSpacing	double	Fine-tunes the vertical distance between the center avatar and its label.
centerLabelStyle	TextStyle	Default label style for the unselected center item.
selectedCenterLabelStyle	TextStyle	Default label style for the selected center item.
centerForegroundGradient	Gradient	Foreground overlay gradient applied on top of the center image or child.

FloatingBottomNavigationCurve

Parameter	Type	Meaning
topY	double	Baseline Y position of the top edge on the left and right flat sections.
shoulderWidth	double	Width of the left and right transition zones leading into the center crest.
crestWidth	double	Diameter of the virtual circular guest used to build the convex top contour.
crestHeight	double	Vertical offset that lifts the circular guest above the bar top line.
topCornerRadius	double	Top-left and top-right corner radius of the bar background.
bottomCornerRadius	double	Bottom-left and bottom-right corner radius of the bar background.
slopeLift	double	Extra spacing between the bar top line and the circular guest. This slightly changes how open or tight the shoulder transition feels.
shoulderRoundness	double	Reserved parameter from an earlier curve model. It is currently kept for API compatibility and does not affect rendering.
crestRoundness	double	Reserved parameter from an earlier curve model. It is currently kept for API compatibility and does not affect rendering.

Tuning Tips

• The current top contour is built with a convex-notch path, inspired by convex_bottom_bar, using a circular guest shape plus mirrored shoulder transitions.
• Increase crestWidth to make the middle convex area wider and fuller.
• Increase crestHeight to raise the center item further above the bar top edge.
• Increase shoulderWidth to lengthen the shoulder transition on both sides.
• Increase slopeLift slightly if the shoulder transition feels too tight around the center.
• If the center avatar feels too low, reduce centerTop.

Layout Notes

• Use outerPadding: EdgeInsets.zero to let the bar span the full page width.
• adaptBottomSafeArea is enabled by default and keeps content above the iOS home indicator area.