pahmiudahgede
/
MIF_E31222379_MOBILE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: fixing navaigation bar

This commit is contained in:
pahmiudahgede 2025-06-15 12:01:00 +07:00
parent 5eed472971
commit b749ebcc4e
2 changed files with 380 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/core/router.dart
View File

@ -80,6 +80,10 @@ final router = GoRouter(
// Rute untuk halaman-halaman utama
GoRoute(path: '/home', builder: (context, state) => HomeScreen()),
GoRoute(
path: '/notifikasi',
builder: (context, state) => NotificationScreen(),
),
GoRoute(path: '/chatlist', builder: (context, state) => ChatListScreen()),
// Router config
GoRoute(

481
lib/core/utils/navigation.dart
View File

@ -3,7 +3,6 @@ import 'package:iconsax_flutter/iconsax_flutter.dart';
import 'package:rijig_mobile/core/utils/guide.dart';
import 'package:rijig_mobile/core/router.dart';
import 'package:rijig_mobile/features/activity/presentation/screen/activity_screen.dart';
// import 'package:rijig_mobile/features/cart/presentation/screens/cart_screen.dart';
import 'package:rijig_mobile/features/cart/presentation/screens/cart_test_screen.dart';
import 'package:rijig_mobile/features/home/presentation/screen/home_screen.dart';
import 'package:rijig_mobile/features/profil/presentation/screen/profil_screen.dart';
@ -60,15 +59,21 @@ class _NavigationPageState extends State<NavigationPage>
void _onItemTapped(int index) {
if (index == 2) {
router.push("/requestpickup");
router.push("/trashview");
} else {
setState(() => _selectedIndex = index);
_saveSelectedIndex(index);
}
}
void _onCenterButtonTapped() {
router.push("/trashview");
}
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: SlideTransition(
@ -77,116 +82,382 @@ class _NavigationPageState extends State<NavigationPage>
resizeToAvoidBottomInset: false,
extendBody: true,
backgroundColor: whiteColor,
body: IndexedStack(
index: _selectedIndex,
children: const [
HomeScreen(),
ActivityScreen(),
Text(""),
// CartScreen(),
OrderSummaryScreen(),
ProfilScreen(),
body: Stack(
children: [
IndexedStack(
index: _selectedIndex,
children: const [
HomeScreen(),
ActivityScreen(),
Text(""),
OrderSummaryScreen(),
ProfilScreen(),
],
),
Positioned(
bottom: 0,
left: 0,
child: SizedBox(
width: size.width,
height: 65,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(size.width, 65),
painter: CustomBottomNavPainter(
backgroundColor: primaryColor,
),
),
Center(
heightFactor: 0.5,
child: GestureDetector(
onTap: _onCenterButtonTapped,
child: Container(
width: 65,
height: 65,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [secondaryColor, primaryColor],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Iconsax.archive_2,
color: whiteColor,
size: 26,
),
const SizedBox(height: 2),
Text(
"Mulai",
style: TextStyle(
color: whiteColor,
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
),
SizedBox(
width: size.width,
height: 65,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildNavItem(
icon: Iconsax.home_2,
label: 'Beranda',
index: 0,
),
_buildNavItem(
icon: Iconsax.note_favorite,
label: 'Aktivitas',
index: 1,
),
SizedBox(width: size.width * 0.20),
_buildNavItem(
icon: Iconsax.shopping_cart,
label: 'Keranjang',
index: 3,
),
_buildNavItem(
icon: Iconsax.user,
label: 'Profil',
index: 4,
),
],
),
),
],
),
),
),
],
),
bottomNavigationBar: Visibility(
visible: _selectedIndex != 2,
child: BottomAppBar(
shape: const CircularNotchedRectangle(),
padding: PaddingCustom().paddingHorizontal(2),
elevation: 0,
height: 67,
color: primaryColor,
clipBehavior: Clip.antiAlias,
notchMargin: 3.0,
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.transparent,
elevation: 0,
showSelectedLabels: true,
showUnselectedLabels: true,
selectedItemColor: secondaryColor,
unselectedItemColor: whiteColor,
currentIndex: _selectedIndex,
onTap: _onItemTapped,
items: [
BottomNavigationBarItem(
icon: Icon(Iconsax.home_2),
activeIcon: Icon(Iconsax.home_2, size: 26),
label: 'Beranda',
),
BottomNavigationBarItem(
icon: Icon(Iconsax.note_favorite),
activeIcon: Icon(Iconsax.note_favorite, size: 26),
label: 'Aktivitas',
),
const BottomNavigationBarItem(
icon: SizedBox.shrink(),
label: '',
),
BottomNavigationBarItem(
icon: Icon(Iconsax.shopping_cart),
activeIcon: Icon(Iconsax.shopping_cart, size: 26),
label: 'Keranjang',
),
BottomNavigationBarItem(
icon: Icon(Iconsax.user),
activeIcon: Icon(Iconsax.user, size: 26),
label: 'Profil',
),
],
selectedLabelStyle: Tulisan.customText(
color: secondaryColor,
fontsize: 14,
fontWeight: FontWeight.w600,
),
unselectedLabelStyle: Tulisan.customText(
color: whiteColor,
fontsize: 12,
fontWeight: FontWeight.w400,
),
),
);
}
Widget _buildNavItem({
required IconData icon,
required String label,
required int index,
}) {
final isSelected = _selectedIndex == index;
return Expanded(
child: GestureDetector(
onTap: () => _onItemTapped(index),
behavior: HitTestBehavior.opaque,
child: Container(
padding: const EdgeInsets.only(top: 8, bottom: 6),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: isSelected ? 26 : 24,
color: isSelected ? secondaryColor : whiteColor,
),
const SizedBox(height: 3),
Text(
label,
style: TextStyle(
color: isSelected ? secondaryColor : whiteColor,
fontSize: isSelected ? 14 : 12,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
),
),
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: Container(
width: 78,
height: 78,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [secondaryColor, primaryColor],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
border: Border.all(color: whiteColor, width: 4),
),
child: RawMaterialButton(
disabledElevation: 0,
autofocus: false,
focusElevation: 0,
onPressed: () => router.push("/trashview"),
// onPressed: () => router.push("/requestpickup"),
shape: const CircleBorder(),
elevation: 0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Iconsax.archive_2, color: whiteColor, size: 30),
Text(
"Mulai",
style: Tulisan.customText(
color: whiteColor,
fontsize: 14,
fontWeight: FontWeight.w600,
),
),
],
),
),
],
),
),
),
);
}
}
class CustomBottomNavPainter extends CustomPainter {
final Color backgroundColor;
CustomBottomNavPainter({required this.backgroundColor});
@override
void paint(Canvas canvas, Size size) {
Paint paint =
Paint()
..color = backgroundColor
..style = PaintingStyle.fill;
Path path = Path();
path.moveTo(0, 0);
path.lineTo(size.width * 0.35, 0);
path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 15);
path.arcToPoint(
Offset(size.width * 0.60, 15),
radius: const Radius.circular(17.0),
clockwise: false,
);
path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
path.lineTo(size.width, 0);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 0);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
class SimpleNavigationPage extends StatefulWidget {
final dynamic data;
const SimpleNavigationPage({super.key, this.data});
@override
State<SimpleNavigationPage> createState() => _SimpleNavigationPageState();
}
class _SimpleNavigationPageState extends State<SimpleNavigationPage> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
final Size size = MediaQuery.of(context).size;
return Scaffold(
extendBody: true,
backgroundColor: whiteColor,
body: Stack(
children: [
IndexedStack(
index: _selectedIndex,
children: const [
HomeScreen(),
ActivityScreen(),
OrderSummaryScreen(),
ProfilScreen(),
],
),
Positioned(
bottom: 0,
left: 0,
child: SizedBox(
width: size.width,
height: 60,
child: Stack(
clipBehavior: Clip.none,
children: [
CustomPaint(
size: Size(size.width, 60),
painter: PreciseBottomNavPainter(
backgroundColor: primaryColor,
),
),
Center(
heightFactor: 0.7,
child: GestureDetector(
onTap: () => router.push("/trashview"),
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [secondaryColor, primaryColor],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Iconsax.archive_2,
color: whiteColor,
size: 22,
),
Text(
"Mulai",
style: TextStyle(
color: whiteColor,
fontSize: 9,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
),
SizedBox(
width: size.width,
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_simpleNavItem(Iconsax.home_2, 'Beranda', 0),
_simpleNavItem(Iconsax.note_favorite, 'Aktivitas', 1),
SizedBox(width: size.width * 0.15),
_simpleNavItem(Iconsax.shopping_cart, 'Keranjang', 2),
_simpleNavItem(Iconsax.user, 'Profil', 3),
],
),
),
],
),
),
),
],
),
);
}
Widget _simpleNavItem(IconData icon, String label, int index) {
final isSelected = _selectedIndex == index;
return Expanded(
child: GestureDetector(
onTap: () => setState(() => _selectedIndex = index),
behavior: HitTestBehavior.opaque,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
icon,
size: isSelected ? 22 : 18,
color: isSelected ? secondaryColor : whiteColor,
),
const SizedBox(height: 2),
Text(
label,
style: TextStyle(
color: isSelected ? secondaryColor : whiteColor,
fontSize: 9,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w400,
),
),
],
),
),
);
}
}
class PreciseBottomNavPainter extends CustomPainter {
final Color backgroundColor;
PreciseBottomNavPainter({required this.backgroundColor});
@override
void paint(Canvas canvas, Size size) {
Paint paint =
Paint()
..color = backgroundColor
..style = PaintingStyle.fill;
Path path = Path();
final double centerX = size.width * 0.5;
final double notchRadius = 30.0;
final double notchMargin = 4.0;
path.moveTo(0, 15);
path.quadraticBezierTo(size.width * 0.15, 0, size.width * 0.35, 0);
path.quadraticBezierTo(
centerX - notchRadius - notchMargin,
0,
centerX - notchRadius - notchMargin,
12,
);
path.arcToPoint(
Offset(centerX + notchRadius + notchMargin, 12),
radius: Radius.circular(notchRadius + notchMargin),
clockwise: false,
);
path.quadraticBezierTo(
centerX + notchRadius + notchMargin,
0,
size.width * 0.65,
0,
);
path.quadraticBezierTo(size.width * 0.85, 0, size.width, 15);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 15);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}