draggable_customized_btn_navy_bar 1.1.0

draggable_customized_btn_navy_bar, Drag and drop all your items, customize your bottom navigation in the best way.

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

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
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.