apptomate_custom_nav_bar 0.0.1

An enhanced and fully customizable bottom navigation bar for Flutter applications.

example/lib/main.dart

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const CustomBottomNavigationBarWidget(),
    );
  }
}

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

  @override
  State<CustomBottomNavigationBarWidget> createState() =>
      _CustomBottomNavigationBarWidgetState();
}

class _CustomBottomNavigationBarWidgetState
    extends State<CustomBottomNavigationBarWidget> {
  int _selectedIndex = 0;

  final List<Widget> _pages = const [
    _PageContent(icon: Icons.home, title: 'Home Page'),
    _PageContent(icon: Icons.search, title: 'Search Page'),
    _PageContent(icon: Icons.person, title: 'Profile Page'),
    _PageContent(icon: Icons.settings, title: 'Settings Page'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Custom Bottom Navigation Bar'),
        centerTitle: true,
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: CustomBottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavItem(
            icon: Icons.home_outlined,
            activeIcon: Icon(Icons.home_filled),
            label: 'Home',
            tooltip: 'Home Page',
          ),
          BottomNavItem(
            icon: Icons.search_outlined,
            activeIcon: Icon(Icons.search),
            label: 'Search',
            tooltip: 'Search Page',
          ),
          BottomNavItem(
            icon: Icons.person_outline,
            activeIcon: Icon(Icons.person),
            label: 'Profile',
            tooltip: 'Profile Page',
          ),
          BottomNavItem(
            icon: Icons.settings_outlined,
            activeIcon: Icon(Icons.settings),
            label: 'Settings',
            tooltip: 'Settings Page',
          ),
        ],
        backgroundColor: Colors.white,
        selectedItemColor: Colors.blue.shade800,
        unselectedItemColor: Colors.grey.shade600,
        elevation: 12.0,
        iconSize: 28.0,
        selectedFontSize: 14.0,
        unselectedFontSize: 12.0,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }
}

class _PageContent extends StatelessWidget {
  final IconData icon;
  final String title;

  const _PageContent({
    required this.icon,
    required this.title,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(icon, size: 64, color: Colors.blue.shade800),
          const SizedBox(height: 16),
          Text(
            title,
            style: Theme.of(context).textTheme.headlineSmall?.copyWith(
              color: Colors.blue.shade800,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}