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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final iconColor =
isSelected ? AppColors.primaryDark : AppColors.accentOrange;
return GestureDetector( return GestureDetector(
onTap: onTap, onTap: onTap,
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: Stack( child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
children: [ 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, svgPath,
width: 24, width: 22,
height: 24, height: 22,
colorFilter: isSelected colorFilter:
? const ColorFilter.mode( ColorFilter.mode(iconColor, BlendMode.srcIn),
AppColors.primaryDark, BlendMode.srcIn)
: const ColorFilter.mode(
AppColors.accentOrange, BlendMode.srcIn),
placeholderBuilder: (_) => Icon( placeholderBuilder: (_) => Icon(
fallbackIcon, fallbackIcon,
size: 24, size: 22,
color: color: iconColor,
isSelected ? AppColors.primaryDark : AppColors.accentOrange, ),
),
), ),
), ),
if (badgeCount > 0) if (badgeCount > 0)
Positioned( Positioned(
top: -6, top: -4,
right: -8, right: -2,
child: Container( child: Container(
padding: padding: const EdgeInsets.symmetric(
const EdgeInsets.symmetric(horizontal: 4, vertical: 1), horizontal: 4, vertical: 1),
constraints: const BoxConstraints(minWidth: 16), constraints: const BoxConstraints(minWidth: 16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.red, 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,
),
),
],
),
), ),
); );
} }