draggable_customized_btn_navy_bar

Description:

draggable customized btn navy bar

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 #


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
copied to clipboard
Then import the package in your dart file
import 'package:draggable_customized_btn_navy_bar/draggable_customized_btn_navy_bar.dart';
copied to clipboard
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 */ }),
],
),
],
),
);
copied to clipboard
Customization #
DraggableCustomizedBtnNavyBar #



Attribute
Description




key
unique key which allow multiple NavBar with different configuration


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.