easy_bottom_nav 0.1.0 copy "easy_bottom_nav: ^0.1.0" to clipboard
easy_bottom_nav: ^0.1.0 copied to clipboard

A customizable and responsive bottom navigation bar for Flutter applications.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'easy_bottom_nav Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const ExampleHomePage(),
    );
  }
}

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

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage> {
  int _currentIndex = 0;

  static const _tabs = [
    _TabContent(
      title: 'Home',
      subtitle: 'Welcome to easy_bottom_nav',
      icon: Icons.home_rounded,
    ),
    _TabContent(
      title: 'Search',
      subtitle: 'Find things quickly',
      icon: Icons.search_rounded,
    ),
    _TabContent(
      title: 'Profile',
      subtitle: 'Manage your account',
      icon: Icons.person_rounded,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final tab = _tabs[_currentIndex];

    return Scaffold(
      appBar: AppBar(title: const Text('easy_bottom_nav Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(tab.icon, size: 64),
            const SizedBox(height: 16),
            Text(tab.title, style: Theme.of(context).textTheme.headlineMedium),
            const SizedBox(height: 8),
            Text(tab.subtitle),
          ],
        ),
      ),
      bottomNavigationBar: EasyBottomNav(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        items: const [
          EasyBottomNavItem(
            icon: Icon(Icons.home_outlined),
            activeIcon: Icon(Icons.home_rounded),
            label: 'Home',
          ),
          EasyBottomNavItem(
            icon: Icon(Icons.search_outlined),
            activeIcon: Icon(Icons.search_rounded),
            label: 'Search',
          ),
          EasyBottomNavItem(
            icon: Icon(Icons.person_outline_rounded),
            activeIcon: Icon(Icons.person_rounded),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class _TabContent {
  const _TabContent({
    required this.title,
    required this.subtitle,
    required this.icon,
  });

  final String title;
  final String subtitle;
  final IconData icon;
}
0
likes
160
points
202
downloads

Documentation

API reference

Publisher

verified publisheralfuad.me

Weekly Downloads

A customizable and responsive bottom navigation bar for Flutter applications.

Repository (GitHub)
View/report issues

Topics

#bottom-nav #bottom-navigation #navigation #nav #navbar

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on easy_bottom_nav