Flutter Widget Deep Dive: Custom Bottom Navigation

Hey Devs! Today I worked on enhancing the bottom navigation bar in my Flutter app.

Replaced the default Navigation Bar with a custom Container for a premium look.

Added animated glow effects on selected tabs for a casino-style interface 🎰.

Used IndexedStack for smooth tab switching without rebuilding screens.

Implemented AnimatedContainer + AnimatedDefaultTextStyle for smooth transitions.

Cleaned up Icon + Label logic for selected/unselected state management.

AnimatedContainer(
duration: Duration(milliseconds: 300),
decoration: BoxDecoration(
color: isSelected ? Colors.amber.withOpacity(0.15) : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected ? [BoxShadow(color: Colors.amber.withOpacity(0.6), blurRadius: 15)] : [],
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: isSelected ? Colors.amber : Colors.grey),
SizedBox(height: 4),
AnimatedDefaultTextStyle(
duration: Duration(milliseconds: 300),
style: TextStyle(color: isSelected ? Colors.amber : Colors.grey, fontWeight: isSelected ? FontWeight.bold : FontWeight.normal),
child: Text(label),
),
],
),
)


🎯 Result:
A smooth, modern, and interactive navigation bar that feels premium and responsive.

💬 Takeaway:
Custom widgets + Flutter’s animation capabilities let you build high-quality, professional UI without relying on 3rd-party packages.