Re-Quest/mobile-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Redesign bottom navigation bar item to include an active indicator dot, a background highlight for selected icons, and adjusted padding.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-27 09:15:19 +05:30
parent 4f9dc10633
commit ca4315b09d
1 changed files with 65 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
lib/core/widgets/app_bottom_nav_bar.dart
View File

@@ -137,37 +137,51 @@ class _NavItem extends StatelessWidget {
@override
Widget build(BuildContext context) {
final iconColor =
isSelected ? AppColors.primaryDark : AppColors.accentOrange;
return GestureDetector(
onTap: onTap,
behavior: HitTestBehavior.opaque,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Stack(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
clipBehavior: Clip.none,
children: [
SvgPicture.asset(
Container(
width: 40,
height: 32,
decoration: isSelected
? BoxDecoration(
color: AppColors.accentOrange.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(16),
)
: null,
child: Center(
child: SvgPicture.asset(
svgPath,
width: 24,
height: 24,
colorFilter: isSelected
? const ColorFilter.mode(
AppColors.primaryDark, BlendMode.srcIn)
: const ColorFilter.mode(
AppColors.accentOrange, BlendMode.srcIn),
width: 22,
height: 22,
colorFilter:
ColorFilter.mode(iconColor, BlendMode.srcIn),
placeholderBuilder: (_) => Icon(
fallbackIcon,
size: 24,
color:
isSelected ? AppColors.primaryDark : AppColors.accentOrange,
size: 22,
color: iconColor,
),
),
),
),
if (badgeCount > 0)
Positioned(
top: -6,
right: -8,
top: -4,
right: -2,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 4, vertical: 1),
padding: const EdgeInsets.symmetric(
horizontal: 4, vertical: 1),
constraints: const BoxConstraints(minWidth: 16),
decoration: BoxDecoration(
color: Colors.red,
@@ -187,6 +201,18 @@ class _NavItem extends StatelessWidget {
),
],
),
const SizedBox(height: 2),
// Active indicator dot
Container(
width: 5,
height: 5,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isSelected ? AppColors.accentOrange : Colors.transparent,
),
),
],
),
),
);
}