I’m working on a bottom navigation bar in Flutter and trying to match the shadow from my Figma design but I can’t get it right.
The Figma design shows a glassmorphism style navigation with a specific shadow effect. Here’s what I have so far:
class CustomBottomNav extends StatelessWidget {
final int selectedIndex;
final Function(int) onTabChanged;
const CustomBottomNav({
Key? key,
required this.selectedIndex,
required this.onTabChanged
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 16),
child: ClipRRect(
child: Container(
height: 60,
width: 355,
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.08),
border: Border.all(
color: Colors.white.withOpacity(0.07),
width: 1
),
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Color(0xFF0C0038).withOpacity(0.48),
offset: Offset(4, 4),
blurRadius: 20,
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(5, (idx) =>
TabIcon(
iconName: _getIconName(idx),
active: selectedIndex == idx,
onPressed: () => onTabChanged(idx),
)
),
),
),
),
);
}
String _getIconName(int idx) {
List<String> icons = ['house', 'location', 'message', 'schedule', 'person'];
return 'assets/svg/${icons[idx]}.svg';
}
}
class TabIcon extends StatelessWidget {
final String iconName;
final bool active;
final VoidCallback onPressed;
const TabIcon({
Key? key,
required this.iconName,
required this.active,
required this.onPressed,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPressed,
child: Container(
width: 52,
height: 52,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: active ? LinearGradient(
colors: [Color(0xFF2E1EEA), Color(0xFF3A8FF2)],
stops: [0.0, 1.0],
) : null,
),
child: Center(
child: SvgPicture.asset(
iconName,
width: 24,
height: 24,
color: active ? Colors.white : Colors.grey.withOpacity(0.4),
),
),
),
);
}
}
The shadow doesn’t look right compared to the Figma version. What’s the correct way to implement this shadow effect in Flutter?