A bottom navigation bar that you can customize with the options you need

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

DraggableCustomizedBtnNavyBar

Attribute Description
items List of items to be displayed in the navigation bar
hiddenItems List of items that will be hidden
maximumNumberOfDisplayItems max number of displayed items – default:5
onDisplayedStackOverflows function to be done if the user want to add item to the displayed items and he reaches to the max diplayed number of items – default : showSnackBar. onDisplayedStackOverflows: () { /* Your action */ }
minimumNumberOfDisplayedItems min number of displayed items – default:1
onDisplayedStackIsEmpty function to be done if the user want to remove item from the displayed items and he reaches to the min diplayed number of items – default : showSnackBar . onDisplayedStackIsEmpty: () { /* Your action */ }
keyItemSelected Item key that is selected
width Navigation bar width
height Navigation bar height
borderRadius Navigation bar radius
selectedColorIcon Selected Icon color
unSelectedColorIcon Unselected Icon color
navigatorBackground Navigator Container Background color
settingBackground Setting Container Background color (Hidden items)
iconSetting Settings button icon
iconSettingColor Settings button icon color
settingTitleText Setting Title Text
settingTitleColor Setting Title color
settingSubTitleText Setting Sub-Title Text
settingSubTitleColor Setting Sub-Title color
doneText Done button Text
textDoneColor Text Done Color
buttonDoneColor Button done color
hiddenItemBackground Background of hidden item
iconHiddenColor Icon Hidden Color
textHiddenColor Text Hidden Color
dotColor Selection Indicator Color (Dot
boxShadow Shadow of container
onOrderHideItems Event when you sort the hidden options, this has as parameter the list of hidden options with the new order. onOrderHideItems: (List<BottomPersonalizedDotBarItem> hiddenItems) { /* Your action */ }
onOrderItems Event when ordering browser options, this has as parameter the list of options with the new order onOrderItems: (List<BottomPersonalizedDotBarItem> items) { /* Your action */ }
onAddItem Event when you add a new option to the navigation bar, this has as parameters the item you add and the list of options. onAddItem: (BottomPersonalizedDotBarItem itemAdd, List<BottomPersonalizedDotBarItem> items) { /* Your action */ }
onRemoveItem Event when you delete an option from the navigation bar, this has as parameters the element to delete and the list of hidden options. onRemoveItem: (BottomPersonalizedDotBarItem itemRemove, List<BottomPersonalizedDotBarItem> hiddenItems) { /* Your action */ }

DraggableCustomizedDotBarItem

Attribute Description
keyItem Unique key
icon Item icon
name Item name
onTap Event with you press the item. onTap: (String keyItem) { /* Your action */ }

License & Accesability

  • This is the first version of my package so if you see any problems you’re free to open an issue.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

GitHub

View Github