liquid_orb_navbar 0.1.1

liquid_orb_navbar: ^0.1.1 copied to clipboard

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: const ExampleScreen(),
    );
  }
}

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

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  int _index = 0;

  static const List<({IconData icon, String title, Color color})> _pages =
      <({IconData icon, String title, Color color})>[
    (icon: Icons.explore_rounded, title: 'Discover', color: Color(0xFFF6EFE8)),
    (icon: Icons.map_rounded, title: 'Map', color: Color(0xFFEFF2F8)),
    (
      icon: Icons.calendar_month_rounded,
      title: 'Calendar',
      color: Color(0xFFF4F8ED)
    ),
    (icon: Icons.person_rounded, title: 'Profile', color: Color(0xFFF8EEF2)),
  ];

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.sizeOf(context).width;
    final double clampedWidth = screenWidth.clamp(320.0, 700.0);
    final double scale = (clampedWidth / 390.0).clamp(0.85, 1.25);

    return Scaffold(
      backgroundColor: _pages[_index].color,
      body: Stack(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(
              24 * scale,
              24 * scale,
              24 * scale,
              132 * scale,
            ),
            child: Center(
              child: AnimatedSwitcher(
                duration: const Duration(milliseconds: 220),
                child: Column(
                  key: ValueKey<int>(_index),
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Icon(
                      _pages[_index].icon,
                      size: 52 * scale,
                      color: const Color(0xFF000000).withValues(alpha: 0.18),
                    ),
                    SizedBox(height: 14 * scale),
                    Text(
                      _pages[_index].title,
                      style: TextStyle(
                        fontSize: 30 * scale,
                        fontWeight: FontWeight.w800,
                        letterSpacing: 0.1,
                        color: const Color(0x99000000),
                      ),
                    ),
                    SizedBox(height: 6 * scale),
                    Text(
                      'Explore ${_pages[_index].title.toLowerCase()} section',
                      style: TextStyle(
                        fontSize: 13 * scale,
                        fontWeight: FontWeight.w600,
                        color: const Color(0x73000000),
                        letterSpacing: 0.25,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: OrbBottomNavBar(
              currentIndex: _index,
              onItemTap: (int i) => setState(() => _index = i),
              onCenterTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Center action pressed')),
                );
              },
              items: const <OrbNavItem>[
                OrbNavItem(icon: Icons.explore_rounded, label: 'Discover'),
                OrbNavItem(icon: Icons.map_rounded, label: 'Map'),
                OrbNavItem(
                    icon: Icons.calendar_month_rounded, label: 'Calendar'),
                OrbNavItem(icon: Icons.person_rounded, label: 'Profile'),
              ],
            ),
          ),
        ],
      ),
    );
  }
}