add floating and rounded navbar

This commit is contained in:
Yannick
2025-11-08 16:14:52 +01:00
parent d5315a8f00
commit 5bbb5c1888

View File

@@ -52,15 +52,18 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
), ),
backgroundColor: CustomTheme.backgroundColor, backgroundColor: CustomTheme.backgroundColor,
body: tabs[currentIndex], body: tabs[currentIndex],
extendBody: true, extendBody: true, // Enables floating effect
bottomNavigationBar: BottomAppBar( bottomNavigationBar: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10), padding: const EdgeInsets.only(left: 12.0, right: 12.0, bottom: 8.0),
child: Material(
elevation: 10, elevation: 10,
height: 60, borderRadius: BorderRadius.circular(24),
color: CustomTheme.primaryColor, color: CustomTheme.primaryColor,
shape: null, child: ClipRRect(
borderRadius: BorderRadius.circular(24),
child: SizedBox(
height: 60,
child: Row( child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround, mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[ children: <Widget>[
_buildNavItem(Icons.home, 'Home', 0), _buildNavItem(Icons.home, 'Home', 0),
@@ -70,6 +73,9 @@ class _CustomNavigationBarState extends State<CustomNavigationBar>
], ],
), ),
), ),
),
),
),
); );
} }