flare_bottom_bar 1.0.0

A highly animated, premium glassmorphism bottom navigation bar for Flutter. Features a sliding elastic indicator, haptic feedback, and a sleek floating design.

example/lib/main.dart

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

void main() {
  runApp(const ExampleApp());
}

/// A premium showcase application for the FlareBottomBar component.
class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlareBottomBar Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
        scaffoldBackgroundColor: const Color(0xFF0D0D15),
      ),
      home: const FlareBottomBarDemoPage(),
    );
  }
}

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

  @override
  State<FlareBottomBarDemoPage> createState() => _FlareBottomBarDemoPageState();
}

class _FlareBottomBarDemoPageState extends State<FlareBottomBarDemoPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
    // Smooth scrolling to the new page
    _pageController.animateToPage(
      index,
      duration: const Duration(milliseconds: 600),
      curve: Curves.fastLinearToSlowEaseIn,
    );
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // EXTREMELY CRITICAL FOR FLOATING GLASS APPEARANCE
      body: PageView(
        controller: _pageController,
        physics: const BouncingScrollPhysics(),
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        children: [
          _buildBackgroundGradient('Home Tab', const Color(0xFF4C00FF)),
          _buildBackgroundGradient('Search Tab', const Color(0xFFFF0055)),
          _buildBackgroundGradient('Profile Tab', const Color(0xFF00C3FF)),
        ],
      ),
      bottomNavigationBar: FlareBottomBar(
        currentIndex: _currentIndex,
        onTap: _onTabTapped,
        // The bar will intelligently blur the colorful neon gradients we pass behind it.
        barColor: Colors.black.withValues(alpha: 0.3),
        indicatorColor: Colors.white.withValues(alpha: 0.15),
        activeIconColor: Colors.white,
        inactiveIconColor: Colors.white38,
        margin: const EdgeInsets.only(left: 24, right: 24, bottom: 32),
        items: const [
          FlareBarItem(icon: Icons.home_rounded, title: 'Home'),
          FlareBarItem(icon: Icons.search_rounded, title: 'Search'),
          FlareBarItem(icon: Icons.person_rounded, title: 'Profile'),
        ],
      ),
    );
  }

  /// Builds a stunning glowing abstract background simulating deep UI hierarchy.
  Widget _buildBackgroundGradient(String title, Color accent) {
    return Container(
      decoration: BoxDecoration(
        gradient: RadialGradient(
          colors: [accent.withValues(alpha: 0.5), const Color(0xFF0D0D15)],
          center: Alignment.center,
          radius: 1.5,
        ),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(
              Icons.widgets_rounded,
              size: 80,
              color: accent.withValues(alpha: 0.8),
            ),
            const SizedBox(height: 24),
            Text(
              title,
              style: const TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.w900,
                color: Colors.white,
                letterSpacing: -1,
              ),
            ),
          ],
        ),
      ),
    );
  }
}