glass_liquid_navbar 0.2.0

A stunning iOS 26-inspired liquid glass bottom navigation bar with buttery-smooth animations and frosted glass morphism for Flutter.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:glass_liquid_navbar/glass_liquid_navbar.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,
      themeMode: ThemeMode.system,
      theme: ThemeData(
        brightness: Brightness.light,
        useMaterial3: true,
        scaffoldBackgroundColor: const Color(0xFFF2F2F7),
        colorSchemeSeed: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.black,
        colorSchemeSeed: Colors.blue,
      ),
      home: const _DemoPage(),
    );
  }
}

class _DemoPage extends StatefulWidget {
  const _DemoPage();

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: _ModernPageContent(index: _currentIndex),
      bottomNavigationBar: LiquidGlassNavbar(
        currentIndex: _currentIndex,
        onTap: (i) => setState(() => _currentIndex = i),
        isFullWidth: false,
        showLabels: true,
        items: const [
          LiquidNavItem(icon: Icons.home_rounded, label: 'Home'),
          LiquidNavItem(icon: Icons.search_rounded, label: 'Search'),
          LiquidNavItem(icon: Icons.explore_rounded, label: 'Explore'),
          LiquidNavItem(icon: Icons.notifications_rounded, label: 'Alerts'),
          LiquidNavItem(icon: Icons.person_rounded, label: 'Profile'),
        ],
      ),
    );
  }
}

class _ModernPageContent extends StatelessWidget {
  const _ModernPageContent({required this.index});
  final int index;

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    
    final List<Map<String, dynamic>> categories = [
      {'icon': Icons.music_note_rounded, 'label': 'Music', 'color': Colors.blue},
      {'icon': Icons.movie_rounded, 'label': 'Movies', 'color': Colors.orange},
      {'icon': Icons.gamepad_rounded, 'label': 'Games', 'color': Colors.green},
      {'icon': Icons.brush_rounded, 'label': 'Art', 'color': Colors.pink},
      {'icon': Icons.fitness_center_rounded, 'label': 'Sport', 'color': Colors.purple},
    ];

    return CustomScrollView(
      slivers: [
        SliverAppBar(
          expandedHeight: 120.0,
          floating: true,
          pinned: true,
          elevation: 0,
          backgroundColor: isDark ? Colors.black.withValues(alpha: 0.8) : Colors.white.withValues(alpha: 0.8),
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Discover', 
              style: TextStyle(
                color: isDark ? Colors.white : Colors.black,
                fontWeight: FontWeight.bold,
              )),
            centerTitle: false,
            titlePadding: const EdgeInsets.only(left: 20, bottom: 16),
          ),
          actions: [
            IconButton(
              icon: CircleAvatar(
                radius: 16,
                backgroundColor: Colors.blue.withValues(alpha: 0.1),
                child: const Icon(Icons.person_rounded, size: 20, color: Colors.blue),
              ),
              onPressed: () {},
            ),
            const SizedBox(width: 8),
          ],
        ),
        
        // Horizontal Categories
        SliverToBoxAdapter(
          child: SizedBox(
            height: 100,
            child: ListView.builder(
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              scrollDirection: Axis.horizontal,
              itemCount: categories.length,
              itemBuilder: (context, i) {
                return Padding(
                  padding: const EdgeInsets.only(right: 12),
                  child: Column(
                    children: [
                      Container(
                        padding: const EdgeInsets.all(12),
                        decoration: BoxDecoration(
                          color: (categories[i]['color'] as Color).withValues(alpha: 0.1),
                          shape: BoxShape.circle,
                        ),
                        child: Icon(categories[i]['icon'], color: categories[i]['color'], size: 24),
                      ),
                      const SizedBox(height: 6),
                      Text(categories[i]['label'], style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w500)),
                    ],
                  ),
                );
              },
            ),
          ),
        ),

        // Main Content List
        SliverPadding(
          padding: const EdgeInsets.fromLTRB(16, 0, 16, 120),
          sliver: SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, i) {
                final color = categories[i % categories.length]['color'] as Color;
                return Container(
                  margin: const EdgeInsets.only(bottom: 16),
                  decoration: BoxDecoration(
                    color: isDark ? Colors.white.withValues(alpha: 0.05) : Colors.white,
                    borderRadius: BorderRadius.circular(24),
                    border: Border.all(
                      color: isDark ? Colors.white.withValues(alpha: 0.05) : Colors.black.withValues(alpha: 0.03),
                    ),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(24),
                    child: Column(
                      children: [
                        Container(
                          height: 140,
                          width: double.infinity,
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [color.withValues(alpha: 0.6), color.withValues(alpha: 0.2)],
                              begin: Alignment.topLeft,
                              end: Alignment.bottomRight,
                            ),
                          ),
                          child: Center(
                            child: Icon(categories[i % categories.length]['icon'], 
                              size: 48, color: Colors.white.withValues(alpha: 0.5)),
                          ),
                        ),
                        ListTile(
                          contentPadding: const EdgeInsets.all(16),
                          title: Text('Premium Content #$i', 
                            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                          subtitle: const Text('Tap to explore more detailed views and animations.'),
                          trailing: IconButton(
                            icon: const Icon(Icons.arrow_forward_ios_rounded, size: 16),
                            onPressed: () {},
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
              childCount: 10,
            ),
          ),
        ),
      ],
    );
  }
}