draggable_customized_btn_navy_bar

A bottom navigation bar that you can customize with the options you need, without any limits. You can also customize the appearance of the navigation bar.

The package is solving a problem with package bottom_personalized_dot_bar as it solves i’s issues and issues can be summarized in the following points:

it’s old and the owner didn’t update it since 3 years.
Some exception was caught by gestures.
no clear definition for the max number and min number of displayed items.
forget changes that take places in the displayed and hidden items in eah run, so the user setup will be forgetten once the app is closed.
not cross platform.

The Btn Nav bat is very beautiful and many people likes it so much. For these reasons I build this package for public to help them to add this beautful btn nav bar to their projets. I wish this will help you.

Live Preview

Supported platforms

Flutter Android
Flutter iOS
Flutter web
Flutter desktop

Package Structure

Null Safe!!

Hint: The package is supporting null safety

Package overview

Drag and Drop your options!
Change icon , background , text , item , item background ….. colors
Control the max number and minimum number od displayed items
Listen to events ‘Sort, Insert and Delete’
Dynamically change the selected option
Save the modified setup (changes in items and it’s indices) in shared preferences
Custom options
Unlimit options
supports all the platforms [android- iOS – web – linux – mac – windows]
And more …

Getting Started

First of all, Depend on the package.

dependencies:
  ...
  draggable_customized_btn_navy_bar: ^0.0.1 #Add the latest version

Then import the package in your dart file

import 'package:draggable_customized_btn_navy_bar/draggable_customized_btn_navy_bar.dart';

Basic Setup

String _itemSelected = 'item-1';
...
..
.
Scaffold(
  body: Stack(
    children: <Widget>[
      .... // Your App Home
      DraggableCustomizedBtnNavyBar(
          keyItemSelected: _itemSelected,
          hiddenItems: <DraggableCustomizedDotBarItem>[
              DraggableCustomizedDotBarItem('item-4', icon: Icons.cloud, name: 'Nube', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-5', icon: Icons.access_alarm, name: 'Alarma', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-6', icon: Icons.message, name: 'Mensaje', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-7', icon: Icons.notifications, name: 'Alerta', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-8', icon: Icons.security, name: 'Seguridad', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-9', icon: Icons.help, name: 'Ayuda', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-10', icon: Icons.settings, name: 'Config.', onTap: (itemSelected) { /* event selected */ }),
          ],
          items: <DraggableCustomizedDotBarItem>[
              DraggableCustomizedDotBarItem('item-1', icon: Icons.sentiment_very_satisfied, name: 'Flutter', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-2', icon: Icons.favorite_border, name: 'Favorito', onTap: (itemSelected) { /* event selected */ }),
              DraggableCustomizedDotBarItem('item-3', icon: Icons.face, name: 'Perfil', onTap: (itemSelected) { /* event selected */ }),
          ],
      ),
    ],
  ),
);

Customization