88 lines
2.3 KiB
Dart
88 lines
2.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class BottomNav extends StatelessWidget {
|
|
final int currentIndex;
|
|
final Function(int) onTap;
|
|
|
|
const BottomNav({Key? key, required this.currentIndex, required this.onTap})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Stack(
|
|
clipBehavior: Clip.none,
|
|
children: [
|
|
// Background Bottom Nav dengan efek melengkung
|
|
Container(
|
|
height: 70,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
|
|
boxShadow: [
|
|
BoxShadow(color: Colors.black12, blurRadius: 10, spreadRadius: 2),
|
|
],
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
children: [
|
|
_buildNavItem(Icons.home, "Beranda", 0),
|
|
_buildNavItem(Icons.description, "Pengajuan", 1),
|
|
_buildNavItem(Icons.settings, "Pengaturan", 2),
|
|
],
|
|
),
|
|
),
|
|
|
|
Positioned(
|
|
bottom: 30, // Naik ke atas
|
|
left: MediaQuery.of(context).size.width / 3 * currentIndex + 20,
|
|
child: AnimatedContainer(
|
|
duration: Duration(milliseconds: 300),
|
|
width: 60,
|
|
height: 60,
|
|
decoration: BoxDecoration(
|
|
color: Colors.blue.shade900,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(_getIcon(currentIndex), color: Colors.white, size: 30),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildNavItem(IconData icon, String label, int index) {
|
|
return GestureDetector(
|
|
onTap: () => onTap(index),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
icon,
|
|
color: index == currentIndex ? Colors.transparent : Colors.grey,
|
|
),
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: index == currentIndex ? Colors.transparent : Colors.grey,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
IconData _getIcon(int index) {
|
|
switch (index) {
|
|
case 0:
|
|
return Icons.home;
|
|
case 1:
|
|
return Icons.description;
|
|
case 2:
|
|
return Icons.settings;
|
|
default:
|
|
return Icons.home;
|
|
}
|
|
}
|
|
}
|