From 9db8c80d63a04fa4a06e8b4c3a027927b53b4f9e Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 15:29:39 +0100 Subject: [PATCH 01/10] removed floating button --- .../views/main_menu/custom_navigation_bar.dart | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index c18d876..a78a9f9 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -53,20 +53,12 @@ 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, + shape: null, child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, @@ -85,7 +77,6 @@ class _CustomNavigationBarState extends State ), onPressed: () => onTabTapped(1), ), - const SizedBox(width: 40), IconButton( icon: Icon( Icons.groups, From 0895f6df0a7be52e844a9169f53776ddd2fa8a4c Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 15:41:20 +0100 Subject: [PATCH 02/10] add text and change icons --- .../main_menu/custom_navigation_bar.dart | 61 ++++++++++--------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index a78a9f9..95dd408 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -63,40 +63,45 @@ class _CustomNavigationBarState extends State mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - IconButton( - icon: Icon( - Icons.home, - color: currentIndex == 0 ? Colors.white : Colors.black, - ), - onPressed: () => onTabTapped(0), - ), - IconButton( - icon: Icon( - Icons.history, - color: currentIndex == 1 ? Colors.white : Colors.black, - ), - onPressed: () => onTabTapped(1), - ), - 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), - ), + const SizedBox(width: 0), + _buildNavItem(Icons.home, 'Home', 0), + _buildNavItem(Icons.history, 'History', 1), + _buildNavItem(Icons.groups, 'Groups', 2), + _buildNavItem(Icons.bar_chart, 'Stats', 3), + const SizedBox(width: 0), ], ), ), ); } + Widget _buildNavItem(IconData icon, String label, int index) { + final isSelected = currentIndex == index; + + return GestureDetector( + onTap: () => onTabTapped(index), + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + icon, + color: isSelected ? Colors.white : Colors.black, + ), + const SizedBox(height: 4), + Text( + label, + style: TextStyle( + color: isSelected ? Colors.white : Colors.black, + fontSize: 12, + fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + ), + ), + ], + ), + ); + } + void onTabTapped(int index) { setState(() { currentIndex = index; From 5baeda8b32fa4b0763a972e3123554f41c84d23e Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 15:41:56 +0100 Subject: [PATCH 03/10] change history text to games --- lib/presentation/views/main_menu/custom_navigation_bar.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 95dd408..bd85c63 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -65,7 +65,7 @@ class _CustomNavigationBarState extends State children: [ const SizedBox(width: 0), _buildNavItem(Icons.home, 'Home', 0), - _buildNavItem(Icons.history, 'History', 1), + _buildNavItem(Icons.history, 'Games', 1), _buildNavItem(Icons.groups, 'Groups', 2), _buildNavItem(Icons.bar_chart, 'Stats', 3), const SizedBox(width: 0), From d5315a8f00fbf39737161733aa57200dc62d7bd7 Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 15:53:28 +0100 Subject: [PATCH 04/10] change spacing of icons --- lib/presentation/views/main_menu/custom_navigation_bar.dart | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index bd85c63..184b9bd 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -61,14 +61,12 @@ class _CustomNavigationBarState extends State shape: null, child: Row( mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ - const SizedBox(width: 0), _buildNavItem(Icons.home, 'Home', 0), _buildNavItem(Icons.history, 'Games', 1), _buildNavItem(Icons.groups, 'Groups', 2), _buildNavItem(Icons.bar_chart, 'Stats', 3), - const SizedBox(width: 0), ], ), ), From 5bbb5c18882bcacfba0661ee4ce5577152c6507d Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 16:14:52 +0100 Subject: [PATCH 05/10] add floating and rounded navbar --- .../main_menu/custom_navigation_bar.dart | 38 +++++++++++-------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 184b9bd..d1732a8 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -52,22 +52,28 @@ class _CustomNavigationBarState extends State ), backgroundColor: CustomTheme.backgroundColor, body: tabs[currentIndex], - extendBody: true, - bottomNavigationBar: BottomAppBar( - padding: const EdgeInsets.symmetric(horizontal: 10), - elevation: 10, - height: 60, - color: CustomTheme.primaryColor, - shape: null, - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceAround, - children: [ - _buildNavItem(Icons.home, 'Home', 0), - _buildNavItem(Icons.history, 'Games', 1), - _buildNavItem(Icons.groups, 'Groups', 2), - _buildNavItem(Icons.bar_chart, 'Stats', 3), - ], + extendBody: true, // Enables floating effect + 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: [ + _buildNavItem(Icons.home, 'Home', 0), + _buildNavItem(Icons.history, 'Games', 1), + _buildNavItem(Icons.groups, 'Groups', 2), + _buildNavItem(Icons.bar_chart, 'Stats', 3), + ], + ), + ), + ), ), ), ); From 17d304eb5dc8a959215f4f66cfda7ce1423ef53d Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 17:19:00 +0100 Subject: [PATCH 06/10] add bigger hitboxes --- .../main_menu/custom_navigation_bar.dart | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index d1732a8..680a4dd 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -80,31 +80,37 @@ class _CustomNavigationBarState extends State } Widget _buildNavItem(IconData icon, String label, int index) { - final isSelected = currentIndex == index; + final isSelected = currentIndex == index; - return GestureDetector( + return Expanded( // makes each nav item occupy equal width = large horizontal hitbox + child: GestureDetector( onTap: () => onTabTapped(index), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - icon, - color: isSelected ? Colors.white : Colors.black, - ), - const SizedBox(height: 4), - Text( - label, - style: TextStyle( + behavior: HitTestBehavior.opaque, // ensures the entire area is tappable + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 5.0), // adds comfortable tap height + child: Column( + mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + icon, color: isSelected ? Colors.white : Colors.black, - fontSize: 12, - fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, ), - ), - ], + const SizedBox(height: 4), + Text( + label, + style: TextStyle( + color: isSelected ? Colors.white : Colors.black, + fontSize: 12, + fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + ), + ), + ], + ), ), - ); - } + ), + ); +} void onTabTapped(int index) { setState(() { From 1698f61c2b0c583cc7a6d670f67afa3c007f103a Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 17:45:04 +0100 Subject: [PATCH 07/10] remove useless comments --- .../views/main_menu/custom_navigation_bar.dart | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 680a4dd..bf7d90b 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -52,7 +52,7 @@ class _CustomNavigationBarState extends State ), backgroundColor: CustomTheme.backgroundColor, body: tabs[currentIndex], - extendBody: true, // Enables floating effect + extendBody: true, bottomNavigationBar: Padding( padding: const EdgeInsets.only(left: 12.0, right: 12.0, bottom: 8.0), child: Material( @@ -82,12 +82,12 @@ class _CustomNavigationBarState extends State Widget _buildNavItem(IconData icon, String label, int index) { final isSelected = currentIndex == index; - return Expanded( // makes each nav item occupy equal width = large horizontal hitbox + return Expanded( child: GestureDetector( onTap: () => onTabTapped(index), - behavior: HitTestBehavior.opaque, // ensures the entire area is tappable + behavior: HitTestBehavior.opaque, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 5.0), // adds comfortable tap height + padding: const EdgeInsets.symmetric(vertical: 5.0), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, From 34df9f007b0b710662887037723cbec06479162e Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 17:49:02 +0100 Subject: [PATCH 08/10] add navbar_item.dart --- lib/presentation/widgets/navbar_item.dart | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 lib/presentation/widgets/navbar_item.dart diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart new file mode 100644 index 0000000..dd938b2 --- /dev/null +++ b/lib/presentation/widgets/navbar_item.dart @@ -0,0 +1,15 @@ +import 'package:flutter/cupertino.dart'; + +class NavbarItem extends StatefulWidget { + const NavbarItem({super.key}); + + @override + State createState() => _NavbarItemState(); +} + +class _NavbarItemState extends State { + @override + Widget build(BuildContext context) { + return const Placeholder(); + } +} From 92817bc4dbdc0b54a0b8a03d5a7b341241f2409b Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sat, 8 Nov 2025 18:05:19 +0100 Subject: [PATCH 09/10] move navbar widget to its own file --- .../main_menu/custom_navigation_bar.dart | 42 ++--------------- lib/presentation/widgets/navbar_item.dart | 47 +++++++++++++++++-- 2 files changed, 49 insertions(+), 40 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index bf7d90b..10ee10f 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}); @@ -66,10 +67,10 @@ class _CustomNavigationBarState extends State child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ - _buildNavItem(Icons.home, 'Home', 0), - _buildNavItem(Icons.history, 'Games', 1), - _buildNavItem(Icons.groups, 'Groups', 2), - _buildNavItem(Icons.bar_chart, 'Stats', 3), + NavbarItem(currentIndex: currentIndex, index: 0, icon: Icons.home_rounded, label: 'Home', onTabTapped: onTabTapped), + NavbarItem(currentIndex: currentIndex, index: 1, icon: Icons.gamepad_rounded, label: 'Games', onTabTapped: onTabTapped), + NavbarItem(currentIndex: currentIndex, index: 2, icon: Icons.group_rounded, label: 'Groups', onTabTapped: onTabTapped), + NavbarItem(currentIndex: currentIndex, index: 3, icon: Icons.bar_chart_rounded, label: 'Stats', onTabTapped: onTabTapped), ], ), ), @@ -79,39 +80,6 @@ class _CustomNavigationBarState extends State ); } - Widget _buildNavItem(IconData icon, String label, int index) { - final isSelected = currentIndex == index; - - return Expanded( - child: GestureDetector( - onTap: () => onTabTapped(index), - behavior: HitTestBehavior.opaque, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 5.0), - child: Column( - mainAxisSize: MainAxisSize.min, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon( - icon, - color: isSelected ? Colors.white : Colors.black, - ), - const SizedBox(height: 4), - Text( - label, - style: TextStyle( - color: isSelected ? Colors.white : Colors.black, - fontSize: 12, - fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, - ), - ), - ], - ), - ), - ), - ); -} - void onTabTapped(int index) { setState(() { currentIndex = index; diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart index dd938b2..f178ccf 100644 --- a/lib/presentation/widgets/navbar_item.dart +++ b/lib/presentation/widgets/navbar_item.dart @@ -1,7 +1,18 @@ -import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; class NavbarItem extends StatefulWidget { - const NavbarItem({super.key}); + + final int currentIndex; + final int index; + final IconData icon; + final String label; + final Function(int) onTabTapped; + + const NavbarItem( + {super.key, required this.currentIndex, required this.index, + required this.icon, required this.label, required this.onTabTapped + } + ); @override State createState() => _NavbarItemState(); @@ -10,6 +21,36 @@ class NavbarItem extends StatefulWidget { class _NavbarItemState extends State { @override Widget build(BuildContext context) { - return const Placeholder(); + + bool isSelected = widget.currentIndex == widget.index; + + 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: isSelected ? Colors.white : Colors.black, + ), + const SizedBox(height: 4), + Text( + widget.label, + style: TextStyle( + color: isSelected ? Colors.white : Colors.black, + fontSize: 12, + fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + ), + ), + ], + ), + ), + ), + ); } } From 1b090a43a0648db180f01ebc55debd606bc808f2 Mon Sep 17 00:00:00 2001 From: Yannick <69087944+GelbEinhalb@users.noreply.github.com> Date: Sun, 9 Nov 2025 20:49:14 +0100 Subject: [PATCH 10/10] a bit cleaner solution --- .../main_menu/custom_navigation_bar.dart | 32 ++++++++++++++++--- lib/presentation/widgets/navbar_item.dart | 27 ++++++++-------- 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/lib/presentation/views/main_menu/custom_navigation_bar.dart b/lib/presentation/views/main_menu/custom_navigation_bar.dart index 10ee10f..20ced7a 100644 --- a/lib/presentation/views/main_menu/custom_navigation_bar.dart +++ b/lib/presentation/views/main_menu/custom_navigation_bar.dart @@ -67,10 +67,34 @@ class _CustomNavigationBarState extends State child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ - NavbarItem(currentIndex: currentIndex, index: 0, icon: Icons.home_rounded, label: 'Home', onTabTapped: onTabTapped), - NavbarItem(currentIndex: currentIndex, index: 1, icon: Icons.gamepad_rounded, label: 'Games', onTabTapped: onTabTapped), - NavbarItem(currentIndex: currentIndex, index: 2, icon: Icons.group_rounded, label: 'Groups', onTabTapped: onTabTapped), - NavbarItem(currentIndex: currentIndex, index: 3, icon: Icons.bar_chart_rounded, label: 'Stats', onTabTapped: onTabTapped), + 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, + ), ], ), ), diff --git a/lib/presentation/widgets/navbar_item.dart b/lib/presentation/widgets/navbar_item.dart index f178ccf..b249571 100644 --- a/lib/presentation/widgets/navbar_item.dart +++ b/lib/presentation/widgets/navbar_item.dart @@ -1,18 +1,20 @@ import 'package:flutter/material.dart'; class NavbarItem extends StatefulWidget { - - final int currentIndex; final int index; + final bool isSelected; final IconData icon; final String label; final Function(int) onTabTapped; - const NavbarItem( - {super.key, required this.currentIndex, required this.index, - required this.icon, required this.label, required this.onTabTapped - } - ); + const NavbarItem({ + super.key, + required this.index, + required this.isSelected, + required this.icon, + required this.label, + required this.onTabTapped, + }); @override State createState() => _NavbarItemState(); @@ -21,9 +23,6 @@ class NavbarItem extends StatefulWidget { class _NavbarItemState extends State { @override Widget build(BuildContext context) { - - bool isSelected = widget.currentIndex == widget.index; - return Expanded( child: GestureDetector( onTap: () => widget.onTabTapped(widget.index), @@ -36,15 +35,17 @@ class _NavbarItemState extends State { children: [ Icon( widget.icon, - color: isSelected ? Colors.white : Colors.black, + color: widget.isSelected ? Colors.white : Colors.black, ), const SizedBox(height: 4), Text( widget.label, style: TextStyle( - color: isSelected ? Colors.white : Colors.black, + color: widget.isSelected ? Colors.white : Colors.black, fontSize: 12, - fontWeight: isSelected ? FontWeight.bold : FontWeight.normal, + fontWeight: widget.isSelected + ? FontWeight.bold + : FontWeight.normal, ), ), ],