notch_bottom_navigation 0.0.2 copy "notch_bottom_navigation: ^0.0.2" to clipboard
notch_bottom_navigation: ^0.0.2 copied to clipboard

A customizable bottom navigation bar with an inward notch and center FAB for Flutter. Configurable icons, colors, and pages.

Notch Bottom Navigation Bar #

A customizable bottom navigation bar with an elegant inward notch and a floating action button (FAB) for Flutter.


✨ Features #

  • πŸ•³οΈ Modern inward-notch design with smooth curves
  • βž• Center Floating Action Button (FAB) with customizable color and icon
  • πŸ“± Supports multiple pages and icons
  • πŸ”΅ Active tab indicator dot
  • 🎨 Configurable selected and unselected colors
  • πŸ”§ Easy to integrate with any app

πŸš€ Getting Started #

Add the package to your pubspec.yaml:

dependencies:
  notch_bottom_navigation: ^0.0.1

Then, run the following command in your terminal:

flutter pub get

Or directly add the package using:

flutter pub add notch_bottom_navigation

πŸ“¦ Usage #


Import the package and use CustomNotchBottomNavigation in your app:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notch Bottom Navigation Demo',
      home: CustomNotchBottomNavigation(
        pages: const [
          Scaffold(body: Center(child: Text('Home'))),
          Scaffold(body: Center(child: Text('Search'))),
          Scaffold(body: Center(child: Text('Notifications'))),
          Scaffold(body: Center(child: Text('Settings'))),
        ],
        icons: const [
          Icons.home,
          Icons.search,
          Icons.notifications,
          Icons.settings,
        ],
        fabIcon: Icons.add,
        fabColor: Colors.deepPurple,
        selectedColor: Colors.deepPurple,
        unselectedColor: Colors.grey,
        onFabTap: () => debugPrint('FAB tapped'),
      ),
    );
  }
}

βš™οΈ Customization Options #

Parameter Description
pages List of widgets for each tab
icons List of icons for each tab
fabIcon Icon for the floating action button
fabColor Color of the FAB
selectedColor Color of the selected tab icon
unselectedColor Color of the unselected tab icons
onFabTap Callback when FAB is tapped

πŸ“¬ Additional Information

❗ Found a bug? Please open an issue on GitHub Issues

🀝 Want to contribute? Pull requests are welcome!


πŸ“„ License #

This project is licensed under the MIT License.


πŸ§‘β€πŸ’» Author #

Made with ❀️ by [YourName]
GitHub: github.com/yourusername

4
likes
140
points
26
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable bottom navigation bar with an inward notch and center FAB for Flutter. Configurable icons, colors, and pages.

Repository (GitHub)
View/report issues

Topics

#navigation #bottom-navigation #custom #widget #design

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on notch_bottom_navigation