ultimate_bottom_navbar

Description:

ultimate bottom navbar

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
copied to clipboard
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;
});
}
copied to clipboard
RTL Support #
Works For Both RTL and LTR and can be configured with Directionality:
Directionality(
textDirection: TextDirection.rtl,
child: Scaffold(bottomNavigationBar:UltimateBottomNavBar()),
)
copied to clipboard
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.