Ultimate Bottom Navigation Bar
Ultimate Bottom Navigation Bar is a customizable bottom navigation bar for your Flutter applications. It allows you to easily create a navigation bar with icons and titles, and customize various aspects of its appearance and behaviors.
Under Curve
Upper Curve
No Curve
Static Curve
Dynamic Curve
Other Customiztions
How To Use
Ultimate Bottom Navigation Bar can be used with Scaffold by setting up at bottomNavigationBar property.
Add this to your package's pubspec.yaml file, use the latest version
dependencies:
ultimate_bottom_navbar: ^latest_version
import 'package:ultimate_bottom_navbar/ultimate_bottom_navbar.dart';
int currentIndex = 0;
final List<String> title = [
"Favourite",
"Wallet",
"Home",
"Freeze",
"Alarm"
];
final List<IconData> icons = [
Icons.favorite,
Icons.wallet_giftcard_sharp,
Icons.home,
Icons.ac_unit_outlined,
Icons.access_alarm_rounded,
];
final List pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
const Page5(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentIndex],
bottomNavigationBar: UltimateBottomNavBar(
icons : icons,
titles : title,
currentIndex : currentIndex,
onTap : (index) async => onItemTapped(index),
),
);
}
void onItemTapped(int index) async{
setState(() {
currentIndex = index;
});
}
RTL Support
Works For Both RTL and LTR and can be configured with Directionality:
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(bottomNavigationBar:UltimateBottomNavBar()),
)
Controls For Upper And Under Curve And Stroke Borders
-
Upper Curves:
-
Control the width and shape of the upper curves using various X and Y control points.
-
Adjust stroke properties for the upper curves, such as width and control points.
-
Under Curves:
-
Manage the width and shape of the under curves with specific X and Y control points.
-
Modify stroke properties for the under curves, including width and control points.
These properties collectively allow users to finely control the appearance of upper and under curves, as well as stroke borders, providing flexibility in customizing the graphical elements of the interface.
Properties
| Property | Description |
|---|---|
| icons | Required Icons |
| titles | Required Titles Use Empty Text For No Title |
| currentIndex | Required Current Selected Index |
| backgroundColor | Solid Background Color |
| foregroundColor | Solid Foreground Color |
| foregroundStrokeBorderColor | Foreground Stroke Solid Border Color |
| backgroundStrokeBorderColor | Background Stroke Solid Border Color |
| backgroundStrokeBorderWidth | Background Stroke Border Thickness |
| foregroundStrokeBorderWidth | Foreground Stroke Border Thickness |
| backgroundGradient | Background Gradient Color |
| foreGroundGradientShader | Foreground Gradient Shader Color |
| foregroundStrokeGradientShader | Foreground Stroke Border Gradient Shader Color |
| backgroundStrokeGradientShader | Background Stroke Border Gradient Shader Color |
| navMargin | Bottom Navigation Margin |
| backgroundBorderRadius | Background Border Radius |
| selectedIconColor | Selected Icon Color |
| selectedIconSize | Selected Icon Size |
| selectedTextSize | Selected Text Size |
| selectedTextColor | Selected Text Color |
| unselectedIconColor | Unselected Icon Color |
| unselectedIconSize | Unselected Icon Size |
| unselectedTextSize | Unselected Text Size |
| unselectedTextColor | Unselected Text Color |
| showForeGroundStrokeAllSide | Show Foreground Stroke Border All Sides |
| showBackGroundStrokeAllSide | Show Background Stroke Border All Sides |
| useForeGroundGradient | Use Foreground Gradient Color |
| showForeGround | Show Hide Foreground |
| useForegroundShaderStroke | Use Foreground Shader Border Stroke Color |
| useBackgroundShaderStroke | Use Background Shader Border Stroke Color |
| underCurve | Under Curve Or Upper Curve |
| staticCurve | Static Curve Or Dynamic Curve |
| showCircleStaticMidItemStatic | Show Circle Decoration For Static Curve |
| midItemCircleColorStatic | Mid Item Circle Color For Static Curve |
| midItemCircleBorderColorStatic | Mid Item Circle Border Color For Static Curve |
| showMidCircleStatic | Show Mid Circle Or Hide For Static Curve |
| midCircleRadiusStatic | Mid Circle Radius For Static Curve |
| midCircleBorderRadiusStatic | Mid Circle Border Radius For Static Curve |
| customSelectedItemDecor | Custom Selected Item Decoration |
| customUnSelectedItemDecor | Custom Unselected Item Decoration |
| badgeData | Badge Data For Individual Item |
| badgeColor | Badge Background Color |
| badgeTextStyle | Badge Text Style |
| badgeCircleRadius | Badge Circle Radius |
| badgeTopPosition | Badge Top Position |
| badgeBottomPosition | Badge Bottom Position |
| badgeLeftPosition | Badge Left Position |
| badgeRightPosition | Badge Right Position |
| backgroundHeight | Height for Background Container |
| foregroundHeight | Height for Foreground Container |
| animationType | Animation Type |
| animationDuration | Animation Duration |
| onTap | Item Tap Function |
| upperCurveWidthCtrl | Controls the width of the upper curve. |
| leftX1UpperCurveCtrl | Controls the x-coordinate of the left control point 1. |
| leftY1UpperCurveCtrl | Controls the y-coordinate of the left control point 1. |
| leftX2UpperCurveCtrl | Controls the x-coordinate of the left control point 2. |
| leftY2UpperCurveCtrl | Controls the y-coordinate of the left control point 2. |
| leftX3UpperCurveCtrl | Controls the x-coordinate of the left control point 3. |
| leftY3UpperCurveCtrl | Controls the y-coordinate of the left control point 3. |
| rightX1UpperCurveCtrl | Controls the x-coordinate of the right control point 1. |
| rightY1UpperCurveCtrl | Controls the y-coordinate of the right control point 1. |
| rightX2UpperCurveCtrl | Controls the x-coordinate of the right control point 2. |
| rightY2UpperCurveCtrl | Controls the y-coordinate of the right control point 2. |
| rightX3UpperCurveCtrl | Controls the x-coordinate of the right control point 3. |
| rightY3UpperCurveCtrl | Controls the y-coordinate of the right control point 3. |
| upperStrokeCurveWidthCtrl | Controls the width of the upper stroke curve. |
| leftStrokeX1UpperCurveCtrl | Controls the x-coordinate of the left control point 1 for the upper stroke. |
| leftStrokeY1UpperCurveCtrl | Controls the y-coordinate of the left control point 1 for the upper stroke. |
| leftStrokeX2UpperCurveCtrl | Controls the x-coordinate of the left control point 2 for the upper stroke. |
| leftStrokeY2UpperCurveCtrl | Controls the y-coordinate of the left control point 2 for the upper stroke. |
| leftStrokeX3UpperCurveCtrl | Controls the x-coordinate of the left control point 3 for the upper stroke. |
| leftStrokeY3UpperCurveCtrl | Controls the y-coordinate of the left control point 3 for the upper stroke. |
| rightStrokeX1UpperCurveCtrl | Controls the x-coordinate of the right control point 1 for the upper stroke. |
| rightStrokeY1UpperCurveCtrl | Controls the y-coordinate of the right control point 1 for the upper stroke. |
| rightStrokeX2UpperCurveCtrl | Controls the x-coordinate of the right control point 2 for the upper stroke. |
| rightStrokeY2UpperCurveCtrl | Controls the y-coordinate of the right control point 2 for the upper stroke. |
| rightStrokeX3UpperCurveCtrl | Controls the x-coordinate of the right control point 3 for the upper stroke. |
| rightStrokeY3UpperCurveCtrl | Controls the y-coordinate of the right control point 3 for the upper stroke. |
| underCurveWidthCtrl | Controls the width of the under curve. |
| leftX1UnderCurveCtrl | Controls the x-coordinate of the left control point 1 for the under curve. |
| leftY1UnderCurveCtrl | Controls the y-coordinate of the left control point 1 for the under curve. |
| leftX2UnderCurveCtrl | Controls the x-coordinate of the left control point 2 for the under curve. |
| leftY2UnderCurveCtrl | Controls the y-coordinate of the left control point 2 for the under curve. |
| leftX3UnderCurveCtrl | Controls the x-coordinate of the left control point 3 for the under curve. |
| leftY3UnderCurveCtrl | Controls the y-coordinate of the left control point 3 for the under curve. |
| rightX1UnderCurveCtrl | Controls the x-coordinate of the right control point 1 for the under curve. |
| rightY1UnderCurveCtrl | Controls the y-coordinate of the right control point 1 for the under curve. |
| rightX2UnderCurveCtrl | Controls the x-coordinate of the right control point 2 for the under curve. |
| rightY2UnderCurveCtrl | Controls the y-coordinate of the right control point 2 for the under curve. |
| rightX3UnderCurveCtrl | Controls the x-coordinate of the right control point 3 for the under curve. |
| rightY3UnderCurveCtrl | Controls the y-coordinate of the right control point 3 for the under curve. |
| underStrokeCurveWidthCtrl | Controls the width of the under stroke curve. |
| leftStrokeX1UnderCurveCtrl | Controls the x-coordinate of the left control point 1 for the under stroke. |
| leftStrokeY1UnderCurveCtrl | Controls the y-coordinate of the left control point 1 for the under stroke. |
| leftStrokeX2UnderCurveCtrl | Controls the x-coordinate of the left control point 2 for the under stroke. |
| leftStrokeY2UnderCurveCtrl | Controls the y-coordinate of the left control point 2 for the under stroke. |
| leftStrokeX3UnderCurveCtrl | Controls the x-coordinate of the left control point 3 for the under stroke. |
| leftStrokeY3UnderCurveCtrl | Controls the y-coordinate of the left control point 3 for the under stroke. |
| rightStrokeX1UnderCurveCtrl | Controls the x-coordinate of the right control point 1 for the under stroke. |
| rightStrokeY1UnderCurveCtrl | Controls the y-coordinate of the right control point 1 for the under stroke. |
| rightStrokeX2UnderCurveCtrl | Controls the x-coordinate of the right control point 2 for the under stroke. |
| rightStrokeY2UnderCurveCtrl | Controls the y-coordinate of the right control point 2 for the under stroke. |
| rightStrokeX3UnderCurveCtrl | Controls the x-coordinate of the right control point 3 for the under stroke. |
| rightStrokeY3UnderCurveCtrl | Controls the y-coordinate of the right control point 3 for the under stroke. |
Check Out example project @ example
FAQ
Create a feature requests or bugs @ Feature Request / issue tracker.