Customization

FloatyNavBar

FloaticaTab

Shapes

// Pill shape (default)
FloatyNavBar(
  shape: const CircleShape(),       // radius: 100
  ...
);

// Rounded rectangle
FloatyNavBar(
  shape: const RectangleShape(),    // radius: 12
  ...
);

// Squircle (continuous corners)
FloatyNavBar(
  shape: const SquircleShape(),     // radius: 24
  ...
);

Glass Effects

Floatica includes built-in presets for glassmorphism and iOS 26 Liquid Glass:

// Light glass
FloatyNavBar(
  glassEffect: const FloaticaGlassEffect.light(),
  ...
);

// Dark glass
FloatyNavBar(
  glassEffect: const FloaticaGlassEffect.dark(),
  ...
);

// iOS 26 Liquid Glass
FloatyNavBar(
  glassEffect: const FloaticaGlassEffect.liquidGlass(),
  ...
);

// iOS 26 Liquid Glass (Clear variant)
FloatyNavBar(
  glassEffect: const FloaticaGlassEffect.liquidGlassClear(),
  ...
);

// Fully custom
FloatyNavBar(
  glassEffect: FloaticaGlassEffect(
    blur: 15,
    opacity: 0.25,
    tintColor: Colors.white,
    borderColor: Colors.white24,
    borderWidth: 1.5,
    enableShadow: true,
    specularHighlight: true,
    innerShadow: true,
    saturationBoost: 1.2,
    noiseOpacity: 0.05,
  ),
  ...
);

Floating Action Buttons

Attach a FAB to any tab — it appears above the nav bar when that tab is selected:

FloaticaTab(
  ...
  floatyActionButton: FloaticaActionButton(
    icon: const Icon(Icons.add),
    onTap: () => print('FAB tapped!'),
    size: 54,
    backgroundColor: Colors.blueAccent,
    foregroundColor: Colors.white,
    shape: const CircleBorder(),
  ),
);

FABs also support Hero animations via the heroTag parameter:

FloaticaActionButton(
  heroTag: 'profile-avatar',
  icon: ClipOval(child: Image.asset('assets/avatar.png')),
  onTap: () => Navigator.push(...),
);

Expandable Menu

Add an expandable overlay menu to the nav bar:

FloatyNavBar(
  menu: FloaticaMenu(
    icon: const Icon(Icons.apps, size: 18, color: Colors.white),
    title: 'Menu',
    borderRadius: BorderRadius.circular(32),
    barrierColor: const Color(0x40000000),
    barrierBlur: 4.0,
    child: Padding(
      padding: const EdgeInsets.all(20),
      child: Wrap(
        spacing: 16,
        runSpacing: 16,
        alignment: WrapAlignment.center,
        children: [
          _menuItem(Icons.description, Colors.blue, 'Docs'),
          _menuItem(Icons.videocam, Colors.purple, 'Clips'),
          _menuItem(Icons.dashboard, Colors.orange, 'Dashboard'),
        ],
      ),
    ),
  ),
  ...
);

Programmatic Menu Control

final menuController = FloaticaMenuController();

// In your widget
FloatyNavBar(
  menu: FloaticaMenu(
    controller: menuController,
    onMenuToggle: (isOpen) => print('Menu is ${isOpen ? "open" : "closed"}'),
    ...
  ),
  ...
);

// Control from anywhere
menuController.open();
menuController.close();
menuController.toggle();

// Check state
print(menuController.isOpen);

Tab Indicators

// Background highlight (default)
FloaticaTab(indicatorStyle: FloaticaIndicatorStyle.background, ...);

// Dot indicator
FloaticaTab(indicatorStyle: FloaticaIndicatorStyle.dot, ...);

// Underline indicator
FloaticaTab(indicatorStyle: FloaticaIndicatorStyle.underline, ...);

// No indicator
FloaticaTab(indicatorStyle: FloaticaIndicatorStyle.none, ...);

Display Modes

// Icon + title when selected, icon only when not
FloaticaTab(
  selectedDisplayMode: FloaticaTabDisplayMode.iconAndTitle,
  unselectedDisplayMode: FloaticaTabDisplayMode.iconOnly,
  labelPosition: FloaticaLabelPosition.bottom,  // or .right
  ...
);

// Title only
FloaticaTab(
  selectedDisplayMode: FloaticaTabDisplayMode.titleOnly,
  unselectedDisplayMode: FloaticaTabDisplayMode.titleOnly,
  ...
);