dot_navbar 0.0.1

A Flutter package for a customizable navigation bar with dot indicators.

Dot Navigation Bar

Screen Shot

https://github.com/alibirkanbayram/dot_navbar/tree/main/dot_navbar/assets/ss.jpg

Video

https://github.com/alibirkanbayram/dot_navbar/tree/main/dot_navbar/assets/video.mp4

Introduction

The dot_navbar package provides a customizable and visually appealing dotted bottom/top navigation bar for Flutter developers. This package allows you to easily integrate a bottom navigation bar into your Flutter application with smooth navigation between screens.

Features

Customizable Icons: Easily customize icons for both active and inactive states, with support for different icons per state.
Flexible Styling: Adjust font size for selected and unselected items, and set a custom background color for the navigation bar.
Seamless Integration: Simple integration into Flutter applications, compatible with various screen sizes and resolutions.
Responsive Design: Automatically adjusts to screen dimensions, ensuring a responsive design.
Intuitive Interaction:Responsive tap handling with the onTap callback for capturing user interactions.

Installation

To use dot_navbar, add the following to your pubspec.yaml file:

dependencies:
  dot_navbar: ^0.0.1

Then, run:

flutter pub get

Then import the package in your dart code:

import 'package:dot_novbar/dot_navbar.dart';

Usage

Dot NavigationBar

A customizable navigation bar .

Selected Icon color :selectedItemColor.

Unselected Icon color :unselectedItemColor.

IsBottom value : bottom or top.

DotNavBar(
        dotMenuItems: SharedList.itemList,
        navbarBackgroundColor: Colors.white,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        isBottom: true,
        isTitleVisible: true,
        dotMenuItems:[
            DotMenuItemModel(
                keyValue: 'home',
                page: Container(
                    color: Colors.red,
                ),
                icon: Icons.home,
            ),
            DotMenuItemModel(
                keyValue: 'search',
                page: Container(
                    color: Colors.blue,
                ),
                icon: Icons.search,
            ),
            DotMenuItemModel(
                keyValue: 'add',
                page: Container(
                    color: Colors.green,
                ),
                icon: Icons.add,
            ),
            DotMenuItemModel(
                keyValue: 'notifications',
                page: Container(
                    color: Colors.yellow,
                ),
                icon: Icons.notifications,
            ),
            DotMenuItemModel(
                keyValue: 'profile',
                page: Container(
                    color: Colors.purple,
                ),
                icon: Icons.person,
            ),
        ]
    ),

Dot Menu Item Model

A data class representing an item in the navigation bar.

DotMenuItemModel(
    keyValue: "Object Key Value",
    page: widgets(),
    icon: Icons.home,
)

Complete Implementation

Issues

If you encounter any issues or have suggestions for improvement, please visit the GitHub repository and submit an issue or pull request.

Developed By

Ali Birkan BAYRAM - Linkedin