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

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

@@ -137,54 +137,80 @@ 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(
clipBehavior: Clip.none, mainAxisSize: MainAxisSize.min,
children: [ children: [
SvgPicture.asset( Stack(
svgPath, clipBehavior: Clip.none,
width: 24, children: [
height: 24, Container(
colorFilter: isSelected width: 40,
? const ColorFilter.mode( height: 32,
AppColors.primaryDark, BlendMode.srcIn) decoration: isSelected
: const ColorFilter.mode( ? BoxDecoration(
AppColors.accentOrange, BlendMode.srcIn), color: AppColors.accentOrange.withValues(alpha: 0.15),
placeholderBuilder: (_) => Icon( borderRadius: BorderRadius.circular(16),
fallbackIcon, )
size: 24, : null,
color: child: Center(
isSelected ? AppColors.primaryDark : AppColors.accentOrange, child: SvgPicture.asset(
), svgPath,
), width: 22,
if (badgeCount > 0) height: 22,
Positioned( colorFilter:
top: -6, ColorFilter.mode(iconColor, BlendMode.srcIn),
right: -8, placeholderBuilder: (_) => Icon(
child: Container( fallbackIcon,
padding: size: 22,
const EdgeInsets.symmetric(horizontal: 4, vertical: 1), color: iconColor,
constraints: const BoxConstraints(minWidth: 16), ),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(8),
),
child: Text(
badgeCount > 99 ? '99+' : '$badgeCount',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
), ),
), ),
), ),
if (badgeCount > 0)
Positioned(
top: -4,
right: -2,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 4, vertical: 1),
constraints: const BoxConstraints(minWidth: 16),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(8),
),
child: Text(
badgeCount > 99 ? '99+' : '$badgeCount',
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
),
],
),
const SizedBox(height: 2),
// Active indicator dot
Container(
width: 5,
height: 5,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isSelected ? AppColors.accentOrange : Colors.transparent,
), ),
),
], ],
), ),
), ),