curved_bottom_nav_bar_animated

A customizable curved bottom navigation bar for Flutter with an animated floating bubble that highlights the active tab.

Demo Video

Click the image to watch the animation demo

Features

• Smooth curved notch painted behind the active item
• Animated floating bubble that slides between tabs
• Fully configurable sizes, colors, notch shape and animation timing
• Optional distinct active icons and accessibility labels
• Respects the bottom safe-area inset

Installation

Add it to your pubspec.yaml:

dependencies:
  curved_bottom_nav_bar_animated: ^1.0.1

Usage

Create a stateful page and update currentIndex when an item is tapped:

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

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

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  int _index = 0;

  static const _labels = ['Calls', 'Home', 'Chat'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(_labels[_index])),
      body: Center(child: Text(_labels[_index])),
      bottomNavigationBar: CurvedBottomNavBar(
        currentIndex: _index,
        onTap: (index) => setState(() => _index = index),
        items: const [
          CurvedBottomNavItem(icon: Icons.call, label: 'Calls'),
          CurvedBottomNavItem(icon: Icons.home_outlined, label: 'Home'),
          CurvedBottomNavItem(icon: Icons.chat_outlined, label: 'Chat'),
        ],
      ),
    );
  }
}

See the complete runnable example in example/lib/main.dart.

Customization

License

MIT