Last updated:
0 purchases
own navbar
responsive_navbar #
This will help us to create responsive navigation bar.
Installing is so simply and it will work stable for any mobile platform.
own_navbar: any
Getting Started #
The minimalist code is here:
BottomNavbar(
navItems: navItems,
height: MediaQuery.of(context).size.height / 18,
itemClicked: (int index, String navId) {
print('Clicked index is $index \nClicked NavId is $navId');
},
)
copied to clipboard
Attribute's description:
navItems- List of NavBarItem (List<NavBarItem>) that helps to create 3 different type of navigation bar (text+icon, icon and only text).
Example :
NavBarItem(
elementIcon: Icons.home,
elementName: "Home Page",
navigationId: 'home',
),
NavBarItem(
elementIcon: Icons.add_alert,
elementName: "Alerts",
navigationId: 'alert',
),
NavBarItem(
elementIcon: Icons.add,
elementName: "Add Feed",
navigationId: 'feed',
),
NavBarItem(
elementIcon: Icons.call,
elementName: "Contact",
navigationId: 'contact',
),
NavBarItem(
elementIcon: Icons.person,
elementName: "Profile",
navigationId: 'profile',
),
];
copied to clipboard
height- the height of bottom navigation bar. For better user experience just height is enough and library will automatically change icon size and font size due to this property.
Responsive height can be defined as MediaQuery.of(context).size.height / 18.
itemClicked- this function will called when one of navigation item clicked and it will return index of last clicked item with its navigationId.
When user click one item more time frequently the state of navigation bar will not affected and the callback will not fired.
There are other plenty of properties of thees Widget. To discover the properties open pubspec.yaml file and add own_navbar: any
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.