glass_liquid_navbar 0.1.0

glass_liquid_navbar: ^0.1.0 copied to clipboard

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:glass_liquid_navbar/liquid_glass_navbar.dart';
import 'package:glass_liquid_navbar/src/liquid_glass_theme.dart';

void main() => runApp(const LiquidGlassDemo());

class LiquidGlassDemo extends StatelessWidget {
  const LiquidGlassDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Liquid Glass Navbar Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.dark),
      home: const _DemoPage(),
    );
  }
}

class _DemoPage extends StatefulWidget {
  const _DemoPage();

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

class _DemoPageState extends State<_DemoPage> {
  int _currentIndex = 0;

  static const _pages = [
    _PageContent(title: 'Home', icon: Icons.home_rounded, color: Color(0xFF0A84FF)),
    _PageContent(title: 'Search', icon: Icons.search_rounded, color: Color(0xFF30D158)),
    _PageContent(title: 'Create', icon: Icons.add_circle_rounded, color: Color(0xFFFF9F0A)),
    _PageContent(title: 'Alerts', icon: Icons.notifications_rounded, color: Color(0xFFFF453A)),
    _PageContent(title: 'Profile', icon: Icons.person_rounded, color: Color(0xFFBF5AF2)),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true, // ← Makes content bleed under the floating bar
      body: AnimatedSwitcher(
        duration: const Duration(milliseconds: 300),
        transitionBuilder: (child, anim) => FadeTransition(
          opacity: anim,
          child: SlideTransition(
            position: Tween<Offset>(
              begin: const Offset(0, 0.04),
              end: Offset.zero,
            ).animate(CurvedAnimation(parent: anim, curve: Curves.easeOut)),
            child: child,
          ),
        ),
        child: _pages[_currentIndex],
      ),
      bottomNavigationBar: LiquidGlassNavbar(
        currentIndex: _currentIndex,
        onTap: (i) => setState(() => _currentIndex = i),
        showLabels: true,
        theme: const LiquidGlassTheme(
          glassBlur: 28,
          pillHeight: 72,
          borderRadius: 34,
        ),
        items: const [
          LiquidNavItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home_rounded,
            label: 'Home',
          ),
          LiquidNavItem(
            icon: Icons.search_rounded,
            label: 'Search',
          ),
          LiquidNavItem(
            icon: Icons.add_circle_outline_rounded,
            activeIcon: Icons.add_circle_rounded,
            label: 'Create',
            badge: 0,
          ),
          LiquidNavItem(
            icon: Icons.notifications_outlined,
            activeIcon: Icons.notifications_rounded,
            label: 'Alerts',
            badge: 3,
          ),
          LiquidNavItem(
            icon: Icons.person_outline_rounded,
            activeIcon: Icons.person_rounded,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class _PageContent extends StatelessWidget {
  const _PageContent({
    required this.title,
    required this.icon,
    required this.color,
  });

  final String title;
  final IconData icon;
  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      key: ValueKey(title),
      decoration: BoxDecoration(
        gradient: RadialGradient(
          center: const Alignment(0, -0.3),
          radius: 1.1,
          colors: [
            color.withOpacity(0.25),
            Colors.black,
          ],
        ),
      ),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(icon, size: 72, color: color),
            const SizedBox(height: 16),
            Text(
              title,
              style: TextStyle(
                color: color,
                fontSize: 32,
                fontWeight: FontWeight.w700,
                letterSpacing: -0.5,
              ),
            ),
            const SizedBox(height: 8),
            Text(
              'Liquid Glass Navigation',
              style: TextStyle(
                color: Colors.white.withOpacity(0.4),
                fontSize: 14,
              ),
            ),
          ],
        ),
      ),
    );
  }
}