diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index c18d876..20ced7a 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -5,6 +5,7 @@ import 'package:game_tracker/presentation/views/main_menu/groups_view.dart'; import 'package:game_tracker/presentation/views/main_menu/home_view.dart'; import 'package:game_tracker/presentation/views/main_menu/settings_view.dart'; import 'package:game_tracker/presentation/views/main_menu/statistics_view.dart'; +import 'package:game_tracker/presentation/widgets/navbar_item.dart'; class CustomNavigationBar extends StatefulWidget { const CustomNavigationBar({super.key}); @@ -53,54 +54,51 @@ class _CustomNavigationBarState extends State backgroundColor: CustomTheme.backgroundColor, body: tabs[currentIndex], extendBody: true, - floatingActionButton: FloatingActionButton( - shape: const CircleBorder(), - backgroundColor: CustomTheme.primaryColor, - onPressed: () {}, - child: const Icon(Icons.add), - ), - floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, - bottomNavigationBar: BottomAppBar( - padding: const EdgeInsets.symmetric(horizontal: 10), - elevation: 10, - height: 60, - color: CustomTheme.primaryColor, - shape: const CircularNotchedRectangle(), - notchMargin: 5, - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - IconButton( - icon: Icon( - Icons.home, - color: currentIndex == 0 ? Colors.white : Colors.black, + bottomNavigationBar: Padding( + padding: const EdgeInsets.only(left: 12.0, right: 12.0, bottom: 8.0), + child: Material( + elevation: 10, + borderRadius: BorderRadius.circular(24), + color: CustomTheme.primaryColor, + child: ClipRRect( + borderRadius: BorderRadius.circular(24), + child: SizedBox( + height: 60, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceAround, + children: [ + NavbarItem( + index: 0, + isSelected: currentIndex == 0, + icon: Icons.home_rounded, + label: 'Home', + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 1, + isSelected: currentIndex == 1, + icon: Icons.gamepad_rounded, + label: 'Games', + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 2, + isSelected: currentIndex == 2, + icon: Icons.group_rounded, + label: 'Groups', + onTabTapped: onTabTapped, + ), + NavbarItem( + index: 3, + isSelected: currentIndex == 3, + icon: Icons.bar_chart_rounded, + label: 'Stats', + onTabTapped: onTabTapped, + ), + ], ), - onPressed: () => onTabTapped(0), ), - IconButton( - icon: Icon( - Icons.history, - color: currentIndex == 1 ? Colors.white : Colors.black, - ), - onPressed: () => onTabTapped(1), - ), - const SizedBox(width: 40), - IconButton( - icon: Icon( - Icons.groups, - color: currentIndex == 2 ? Colors.white : Colors.black, - ), - onPressed: () => onTabTapped(2), - ), - IconButton( - icon: Icon( - Icons.bar_chart, - color: currentIndex == 3 ? Colors.white : Colors.black, - ), - onPressed: () => onTabTapped(3), - ), - ], + ), ), ), ); diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart new file mode 100644 index 0000000..b249571 --- /dev/null +++ b/lib/presentation/widgets/navbar_item.dart @@ -0,0 +1,57 @@ +import 'package:flutter/material.dart'; + +class NavbarItem extends StatefulWidget { + final int index; + final bool isSelected; + final IconData icon; + final String label; + final Function(int) onTabTapped; + + const NavbarItem({ + super.key, + required this.index, + required this.isSelected, + required this.icon, + required this.label, + required this.onTabTapped, + }); + + @override + State createState() => _NavbarItemState(); +} + +class _NavbarItemState extends State { + @override + Widget build(BuildContext context) { + return Expanded( + child: GestureDetector( + onTap: () => widget.onTabTapped(widget.index), + behavior: HitTestBehavior.opaque, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 5.0), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + widget.icon, + color: widget.isSelected ? Colors.white : Colors.black, + ), + const SizedBox(height: 4), + Text( + widget.label, + style: TextStyle( + color: widget.isSelected ? Colors.white : Colors.black, + fontSize: 12, + fontWeight: widget.isSelected + ? FontWeight.bold + : FontWeight.normal, + ), + ), + ], + ), + ), + ), + ); + } +}