diff --git a/lib/screens/holiday_screen.dart b/lib/screens/holiday_screen.dart index 76619d1..7b0dd2b 100644 --- a/lib/screens/holiday_screen.dart +++ b/lib/screens/holiday_screen.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; import 'package:flutter_svg/flutter_svg.dart'; + import '../screens/request_leave_screen.dart'; import '../screens/request_advance_scrren.dart'; import '../models/leave_request.dart'; @@ -15,29 +17,49 @@ class HolidayScreen extends StatefulWidget { class _HolidayScreenState extends State { int activeTab = 0; // 0 = السلف | 1 = الأجازات - // Use the singleton instance + final RequestService _requestService = RequestService(); late List _leaveRequests; late List _advanceRequests; + /// ⭐ Telegram-style FAB animation + final ScrollController _scrollController = ScrollController(); + bool _showActions = true; + @override void initState() { super.initState(); _initializeData(); + + // ⭐ Listen to scroll and animate the floating buttons (Telegram style) + _scrollController.addListener(() { + final direction = _scrollController.position.userScrollDirection; + + if (direction == ScrollDirection.reverse) { + // scrolling DOWN → hide buttons + if (_showActions) setState(() => _showActions = false); + } else if (direction == ScrollDirection.forward) { + // scrolling UP → show buttons + if (!_showActions) setState(() => _showActions = true); + } + + // If user reaches top → force visible + if (_scrollController.position.pixels <= 10) { + if (!_showActions) setState(() => _showActions = true); + } + }); } void _initializeData() async { - // Get initial data _leaveRequests = await _requestService.getLeaveRequests(); _advanceRequests = await _requestService.getAdvanceRequests(); - - // Listen for updates + _requestService.leaveRequestsStream.listen((requests) { setState(() { _leaveRequests = requests; }); }); - + _requestService.advanceRequestsStream.listen((requests) { setState(() { _advanceRequests = requests; @@ -55,59 +77,54 @@ class _HolidayScreenState extends State { return Column( children: [ Container( - width: 36, // Smaller circle + width: 36, height: 36, decoration: BoxDecoration( shape: BoxShape.circle, color: active ? activeColor : const Color(0xFFD6D6D6), - boxShadow: - active - ? [ - BoxShadow( - color: glowColor.withOpacity(0.6), - blurRadius: 15, - spreadRadius: 2, - ), - ] - : [], - ), - child: - active && svgPath != null - ? Center( - child: SvgPicture.asset( - svgPath, - width: 18, // Smaller icon - height: 18, - color: Colors.white, + boxShadow: active + ? [ + BoxShadow( + color: glowColor.withOpacity(0.6), + blurRadius: 15, + spreadRadius: 2, ), - ) - : null, + ] + : [], + ), + child: active && svgPath != null + ? Center( + child: SvgPicture.asset( + svgPath, + width: 18, + height: 18, + color: const Color(0xFFFFFFFF), + ), + ) + : null, ), - - const SizedBox(height: 4), // Space between circles - - Text(label, style: const TextStyle(fontSize: 10)), // Smaller text + const SizedBox(height: 4), + Text(label, style: const TextStyle(fontSize: 10)), ], ); } - - @override Widget build(BuildContext context) { return Directionality( textDirection: TextDirection.rtl, child: Stack( children: [ - // Tabs + // -------------------- TABS -------------------- Positioned( - top: 5, + top: 0, left: 0, right: 0, + bottom: 5, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - // الأجازات TAB + // الأجازات GestureDetector( onTap: () => setState(() => activeTab = 1), child: Column( @@ -117,10 +134,9 @@ class _HolidayScreenState extends State { style: TextStyle( fontSize: 22, fontWeight: FontWeight.w600, - color: - activeTab == 1 - ? const Color(0xFF8EFDC2) - : const Color(0x9EFFFFFF), + color: activeTab == 1 + ? const Color(0xFF8EFDC2) + : const Color(0x9EFFFFFF), ), ), if (activeTab == 1) @@ -136,7 +152,7 @@ class _HolidayScreenState extends State { const SizedBox(width: 70), - // السلف TAB + // السلف GestureDetector( onTap: () => setState(() => activeTab = 0), child: Column( @@ -146,10 +162,9 @@ class _HolidayScreenState extends State { style: TextStyle( fontSize: 22, fontWeight: FontWeight.w600, - color: - activeTab == 0 - ? const Color(0xFF8EFDC2) - : const Color(0x9EFFFFFF), + color: activeTab == 0 + ? const Color(0xFF8EFDC2) + : const Color(0x9EFFFFFF), ), ), if (activeTab == 0) @@ -166,57 +181,70 @@ class _HolidayScreenState extends State { ), ), - // Content area for requests + // ------------- CONTENT AREA (LISTS) ------------- Positioned( - top: 30, // Position below the tabs + top: 30, left: 0, right: 0, - bottom: 0, // Leave space for action buttons - child: activeTab == 1 ? _buildLeaveRequestsTab() : _buildAdvanceRequestsTab(), + bottom: 0, + child: activeTab == 1 + ? _buildLeaveRequestsTab() + : _buildAdvanceRequestsTab(), ), - // Action buttons + // ------------------------------------------------------------- + // ⭐ TELEGRAM STYLE FLOATING ACTION BUTTONS (SLIDE + FADE) + // ------------------------------------------------------------- Positioned( bottom: 30, right: 20, - child: Column( - children: [ - // Money icon (custom size) - _HolidayActionButton( - label: "طلب سلفة", - svgPath: "assets/images/money2.svg", - iconWidth: 28, - iconHeight: 20, - onTap: () async { - // Navigate to RequestAdvanceScreen - await Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const RequestAdvanceScreen(), - ), - ); - // Data will be updated automatically through the stream - }, - ), - const SizedBox(height: 18), + child: AnimatedSlide( + offset: _showActions ? const Offset(0, 0) : const Offset(0, 1.4), + duration: const Duration(milliseconds: 350), + curve: Curves.easeOut, - // Plus icon (custom size) - _HolidayActionButton( - label: "طلب إجازة", - svgPath: "assets/images/plus.svg", - iconWidth: 28, - iconHeight: 20, - onTap: () async { - await Navigator.push( - context, - MaterialPageRoute( - builder: (context) => const RequestLeaveScreen(), - ), - ); - // Data will be updated automatically through the stream - }, + child: AnimatedOpacity( + duration: const Duration(milliseconds: 250), + opacity: _showActions ? 1 : 0, + + child: Column( + children: [ + _HolidayActionButton( + label: "طلب سلفة", + svgPath: "assets/images/money2.svg", + iconWidth: 28, + iconHeight: 20, + onTap: () async { + await Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + const RequestAdvanceScreen(), + ), + ); + }, + ), + + const SizedBox(height: 18), + + _HolidayActionButton( + label: "طلب إجازة", + svgPath: "assets/images/plus.svg", + iconWidth: 28, + iconHeight: 20, + onTap: () async { + await Navigator.push( + context, + MaterialPageRoute( + builder: (context) => + const RequestLeaveScreen(), + ), + ); + }, + ), + ], ), - ], + ), ), ), ], @@ -224,25 +252,24 @@ class _HolidayScreenState extends State { ); } + // -------------------- LIST BUILDERS -------------------- + Widget _buildLeaveRequestsTab() { if (_leaveRequests.isEmpty) { return const Center( child: Text( 'لا توجد طلبات أجازة', - style: TextStyle( - color: Colors.white, - fontSize: 18, - ), + style: TextStyle(color: Colors.white, fontSize: 18), ), ); } return ListView.builder( + controller: _scrollController, padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 20), itemCount: _leaveRequests.length, itemBuilder: (context, index) { - final request = _leaveRequests[index]; - return _buildLeaveRequestCard(request); + return _buildLeaveRequestCard(_leaveRequests[index]); }, ); } @@ -252,32 +279,27 @@ class _HolidayScreenState extends State { return const Center( child: Text( 'لا توجد طلبات سلف', - style: TextStyle( - color: Colors.white, - fontSize: 18, - ), + style: TextStyle(color: Colors.white, fontSize: 18), ), ); } return ListView.builder( + controller: _scrollController, padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 20), itemCount: _advanceRequests.length, itemBuilder: (context, index) { - final request = _advanceRequests[index]; - return _buildAdvanceRequestCard(request); + return _buildAdvanceRequestCard(_advanceRequests[index]); }, ); } - Widget _buildLeaveRequestCard(LeaveRequest request) { - // Base colors from the design - const bgColor = Color(0xFFEAF8F3); - // const activeColor = Color(0xFFFFC940); // yellow active state - // const inactiveColor = Color(0xFFD6D6D6); // grey inactive circles - const lineColor = Color(0xFF22A685); // green divider + // -------------------- LEAVE REQUEST CARD -------------------- + + Widget _buildLeaveRequestCard(LeaveRequest request) { + const bgColor = Color(0xFFEAF8F3); + const lineColor = Color(0xFF22A685); - // Status flags final bool isWaiting = request.status == "waiting"; final bool isApproved = request.status == "approved"; final bool isDenied = request.status == "denied"; @@ -288,9 +310,10 @@ class _HolidayScreenState extends State { return Directionality( textDirection: TextDirection.rtl, child: Container( - width: MediaQuery.of(context).size.width * 0.8, // 80% of screen width + width: MediaQuery.of(context).size.width * 0.8, margin: const EdgeInsets.only(bottom: 16), - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14), // Reduced padding + padding: + const EdgeInsets.symmetric(horizontal: 12, vertical: 14), decoration: BoxDecoration( color: bgColor, borderRadius: BorderRadius.circular(16), @@ -298,57 +321,55 @@ class _HolidayScreenState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ - // ───────────────── STATUS ROW (centered) ───────────────── + // Status circles Row( - mainAxisAlignment: MainAxisAlignment.center, // Center the status circles + mainAxisAlignment: MainAxisAlignment.center, children: [ buildStatusCircle( active: isWaiting, label: "قيد الانتظار", - svgPath: isWaiting ? "assets/images/waiting.svg" : null, + svgPath: + isWaiting ? "assets/images/waiting.svg" : null, activeColor: const Color(0xFFF9C8A01B), glowColor: const Color(0xB4FFDC69), ), - - const SizedBox(width: 12), // Space between circles - + const SizedBox(width: 12), buildStatusCircle( active: isApproved, label: "موافقة", - svgPath: isApproved ? "assets/images/yes.svg" : null, + svgPath: + isApproved ? "assets/images/yes.svg" : null, activeColor: const Color(0xFF0A8A60), glowColor: const Color(0xFF00D7A3), ), - - const SizedBox(width: 12), // Space between circles - + const SizedBox(width: 12), buildStatusCircle( active: isDenied, label: "تم الرفض", - svgPath: isDenied ? "assets/images/no.svg" : null, + svgPath: + isDenied ? "assets/images/no.svg" : null, activeColor: const Color(0xFFE63946), glowColor: const Color(0xFFE63946), ), ], ), - const SizedBox(height: 8), // Reduced height + const SizedBox(height: 8), - // ───────────── DATE (LEFT) + TYPE + TREE ICON (RIGHT) ───────────── + // Title + date row Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - // Right cluster: tree icon + leave type + // icon + leave type Row( children: [ - // Tree SVG in rounded square SizedBox( - width: 32, // Smaller icon + width: 32, height: 32, child: Center( child: SvgPicture.asset( "assets/images/holiday.svg", - width: 32, // Smaller icon + width: 32, height: 32, color: const Color(0xFF11663C), ), @@ -358,7 +379,7 @@ class _HolidayScreenState extends State { Text( request.leaveType, style: const TextStyle( - fontSize: 12, // Smaller text + fontSize: 12, color: Colors.black87, fontWeight: FontWeight.bold, ), @@ -366,11 +387,11 @@ class _HolidayScreenState extends State { ], ), - // Left: date + // date Text( dateText, style: const TextStyle( - fontSize: 14, // Smaller text + fontSize: 14, color: Colors.black87, fontWeight: FontWeight.w500, ), @@ -378,40 +399,35 @@ class _HolidayScreenState extends State { ], ), - const SizedBox(height: 10), // Reduced height + const SizedBox(height: 10), - // Divider line + // divider Container(width: double.infinity, height: 1.4, color: lineColor), - const SizedBox(height: 10), // Reduced height + const SizedBox(height: 10), - // Reason label - // ───────────── Reason Row (inline with label) ───────────── + // Reason row Padding( - padding: const EdgeInsets.only(top: 8), // Reduced padding + padding: const EdgeInsets.only(top: 8), child: Row( textDirection: TextDirection.ltr, children: [ - // Reason text (LEFT) Expanded( child: Text( request.reason, textAlign: TextAlign.right, style: const TextStyle( - fontSize: 13, // Smaller text + fontSize: 13, color: Colors.black87, ), ), ), - const SizedBox(width: 6), - - // Label (RIGHT) const Text( "السبب :", textAlign: TextAlign.right, style: TextStyle( - fontSize: 14, // Smaller text + fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold, ), @@ -425,27 +441,26 @@ class _HolidayScreenState extends State { ); } + // -------------------- ADVANCE REQUEST CARD -------------------- + Widget _buildAdvanceRequestCard(AdvanceRequest request) { - // Base colors const bgColor = Color(0xFFEAF8F3); const lineColor = Color(0xFF22A685); - // const inactiveColor = Color(0xFFD6D6D6); - // Status flags final bool isWaiting = request.status == "waiting"; final bool isApproved = request.status == "approved"; final bool isDenied = request.status == "denied"; - // You can format a date if needed final String dateText = "${DateTime.now().year}.${DateTime.now().month}.${DateTime.now().day}"; return Directionality( textDirection: TextDirection.rtl, child: Container( - width: MediaQuery.of(context).size.width * 0.8, // 80% of screen width + width: MediaQuery.of(context).size.width * 0.8, margin: const EdgeInsets.only(bottom: 16), - padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 14), // Reduced padding + padding: + const EdgeInsets.symmetric(horizontal: 10, vertical: 14), decoration: BoxDecoration( color: bgColor, borderRadius: BorderRadius.circular(16), @@ -453,56 +468,52 @@ class _HolidayScreenState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ - // ───────────────── STATUS ROW (centered) ───────────────── Row( - mainAxisAlignment: MainAxisAlignment.center, // Center the status circles + mainAxisAlignment: MainAxisAlignment.center, children: [ buildStatusCircle( active: isWaiting, label: "قيد الانتظار", - svgPath: isWaiting ? "assets/images/waiting.svg" : null, + svgPath: + isWaiting ? "assets/images/waiting.svg" : null, activeColor: const Color(0xFFF9C8A01B), glowColor: const Color(0xB4FFDC69), ), - - const SizedBox(width: 12), // Space between circles - + const SizedBox(width: 12), buildStatusCircle( active: isApproved, label: "موافقة", - svgPath: isApproved ? "assets/images/yes.svg" : null, + svgPath: + isApproved ? "assets/images/yes.svg" : null, activeColor: const Color(0xFF0A8A60), glowColor: const Color(0xFF00D7A3), ), - - const SizedBox(width: 12), // Space between circles - + const SizedBox(width: 12), buildStatusCircle( active: isDenied, label: "تم الرفض", - svgPath: isDenied ? "assets/images/no.svg" : null, + svgPath: + isDenied ? "assets/images/no.svg" : null, activeColor: const Color(0xFFE63946), glowColor: const Color(0xFFE63946), ), ], ), - const SizedBox(height: 8), // Reduced height + const SizedBox(height: 8), - // ───────────────── TYPE + ICON + AMOUNT (same layout as leave card) ───────────────── Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - // Right: money icon + amount label Row( children: [ SizedBox( - width: 32, // Smaller icon + width: 32, height: 32, child: Center( child: SvgPicture.asset( "assets/images/money.svg", - width: 32, // Smaller icon + width: 32, height: 32, color: const Color(0xFF11663C), ), @@ -512,19 +523,17 @@ class _HolidayScreenState extends State { Text( "سلفة: ${request.amount.toStringAsFixed(0)} دع", style: const TextStyle( - fontSize: 12, // Smaller text + fontSize: 12, color: Colors.black87, fontWeight: FontWeight.bold, ), ), ], ), - - // Left: dummy date (or request.requestDate) Text( dateText, style: const TextStyle( - fontSize: 14, // Smaller text + fontSize: 14, color: Colors.black87, fontWeight: FontWeight.w500, ), @@ -532,39 +541,33 @@ class _HolidayScreenState extends State { ], ), - const SizedBox(height: 10), // Reduced height + const SizedBox(height: 10), - // Divider line Container(width: double.infinity, height: 1, color: lineColor), - const SizedBox(height: 10), // Reduced height + const SizedBox(height: 10), - // ───────────────── REASON ROW (identical to leave card) ───────────────── Padding( - padding: const EdgeInsets.only(top: 8), // Reduced padding + padding: const EdgeInsets.only(top: 8), child: Row( textDirection: TextDirection.ltr, children: [ - // Reason text (LEFT) Expanded( child: Text( request.reason, textAlign: TextAlign.right, style: const TextStyle( - fontSize: 13, // Smaller text + fontSize: 13, color: Colors.black87, ), ), ), - const SizedBox(width: 6), - - // Label (RIGHT) const Text( "السبب :", textAlign: TextAlign.right, style: TextStyle( - fontSize: 14, // Smaller text + fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold, ), @@ -579,6 +582,8 @@ class _HolidayScreenState extends State { } } +// -------------------- FLOATING ACTION BUTTON -------------------- + class _HolidayActionButton extends StatelessWidget { final String label; final String svgPath; @@ -620,9 +625,7 @@ class _HolidayActionButton extends StatelessWidget { height: iconHeight, child: SvgPicture.asset(svgPath, fit: BoxFit.contain), ), - const SizedBox(height: 6), - Text( label, style: const TextStyle( @@ -636,4 +639,4 @@ class _HolidayActionButton extends StatelessWidget { ), ); } -} \ No newline at end of file +} diff --git a/lib/screens/user_settings_screen.dart b/lib/screens/user_settings_screen.dart new file mode 100644 index 0000000..d32fb2b --- /dev/null +++ b/lib/screens/user_settings_screen.dart @@ -0,0 +1,190 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class UserSettingsScreen extends StatelessWidget { + const UserSettingsScreen({super.key}); + + @override + Widget build(BuildContext context) { + return Directionality( + textDirection: TextDirection.rtl, + child: Stack( + children: [ + // ⭐ You already have your app background + settings bar outside this widget + + // -------------------- WHITE CARD -------------------- + Positioned( + top: 140, + left: 20, + right: 20, + child: Container( + padding: const EdgeInsets.only(top: 70, bottom: 25), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(16), + boxShadow: const [ + BoxShadow( + color: Color(0x33000000), + blurRadius: 12, + offset: Offset(0, 5), + ), + ], + ), + child: Column( + children: [ + // -------------------- EMPLOYEE NAME -------------------- + Text( + "اسم الموظف", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w700, + color: Colors.black, + fontFamily: "AbdEriady", + ), + ), + + const SizedBox(height: 6), + + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "تغيير كلمة المرور", + style: TextStyle( + fontSize: 12, + color: Colors.grey[700], + ), + ), + const SizedBox(width: 4), + SvgPicture.asset( + "assets/images/edit.svg", + width: 16, + height: 16, + ) + ], + ), + + const SizedBox(height: 25), + + // -------------------- NOTIFICATION TOGGLE -------------------- + Padding( + padding: const EdgeInsets.symmetric(horizontal: 18), + child: Row( + children: [ + Switch( + value: true, + activeColor: const Color(0xFF177046), + inactiveTrackColor: Colors.grey[400], + onChanged: (value) {}, + ), + const Spacer(), + Text( + "الإشعارات", + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + ), + ), + const SizedBox(width: 8), + SvgPicture.asset( + "assets/images/bell.svg", + width: 20, + height: 20, + ), + ], + ), + ), + + _divider(), + + // -------------------- ABOUT COMPANY -------------------- + _settingsTile( + label: "عن الشركة", + iconPath: "assets/images/info.svg", + ), + + _divider(), + + // -------------------- LOGOUT -------------------- + _settingsTile( + label: "تسجيل خروج", + iconPath: "assets/images/logout.svg", + ), + + _divider(), + + // -------------------- EMPLOYEE LEAVES -------------------- + _settingsTile( + label: "إجازات الموظفين", + iconPath: "assets/images/leaves.svg", + ), + ], + ), + ), + ), + + // -------------------- PROFILE IMAGE -------------------- + Positioned( + top: 90, + left: 0, + right: 0, + child: Center( + child: Container( + width: 120, + height: 120, + padding: const EdgeInsets.all(6), + decoration: BoxDecoration( + color: const Color(0xFF177046), + shape: BoxShape.circle, + ), + child: Container( + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Color(0xFFD9D9D9), // placeholder profile + ), + ), + ), + ), + ), + ], + ), + ); + } + + // Divider line styled like design + Widget _divider() { + return Container( + margin: const EdgeInsets.symmetric(vertical: 12), + height: 1, + width: double.infinity, + color: const Color(0xFFD1D1D1), + ); + } + + // Settings row tile + Widget _settingsTile({ + required String label, + required String iconPath, + }) { + return Padding( + padding: const EdgeInsets.symmetric(horizontal: 18), + child: Row( + children: [ + Text( + label, + style: const TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + ), + ), + const Spacer(), + SvgPicture.asset( + iconPath, + width: 20, + height: 20, + ), + ], + ), + ); + } +} diff --git a/lib/widgets/FloatingNavBar.dart b/lib/widgets/FloatingNavBar.dart index 73b1cdd..90f36f1 100644 --- a/lib/widgets/FloatingNavBar.dart +++ b/lib/widgets/FloatingNavBar.dart @@ -1,3 +1,4 @@ +import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; @@ -22,34 +23,48 @@ class Floatingnavbar extends StatelessWidget { @override Widget build(BuildContext context) { - // Get the bottom padding to account for system navigation bar final bottomPadding = MediaQuery.of(context).padding.bottom; - - return Container( - height: 70, - margin: EdgeInsets.only( - bottom: 10 + bottomPadding, // Add system padding to our margin - left: 28, - right: 28, - ), - decoration: BoxDecoration( - color: (const Color(0xFFE9E9E9)), - borderRadius: BorderRadius.circular(45), - - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: items.asMap().entries.map((entry) { - final index = entry.key; - final item = entry.value; - final isSelected = selectedIndex == index; - return _NavBarItemTile( - item: item, - isSelected: isSelected, - onTap: () => onTap(index), - ); - }).toList(), + return ClipRRect( + borderRadius: BorderRadius.circular(45), + + child: BackdropFilter( + + filter: ImageFilter.blur( + sigmaX: 100, + sigmaY: 35, + + ), + + child: Container( + height: 70, + margin: EdgeInsets.only( + bottom: 10 + bottomPadding, + left: 28, + right: 28, + ), + + /// ⭐ Restored white container (same as your original design) + decoration: BoxDecoration( + color: const Color(0xFFE9E9E9), // White navbar restored + borderRadius: BorderRadius.circular(45), + ), + + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: items.asMap().entries.map((entry) { + final index = entry.key; + final item = entry.value; + final isSelected = selectedIndex == index; + + return _NavBarItemTile( + item: item, + isSelected: isSelected, + onTap: () => onTap(index), + ); + }).toList(), + ), + ), ), ); } @@ -83,18 +98,20 @@ class _NavBarItemTile extends StatelessWidget { width: 30, height: 30, colorFilter: ColorFilter.mode( - isSelected ? const Color(0xFF177046) : Colors.black, + isSelected ? const Color(0xFF177046) : Colors.black, BlendMode.srcIn, ), ), + const SizedBox(height: 6), + Text( item.label, style: TextStyle( - color: isSelected ? const Color(0xFF177046) : Colors.black, + color: isSelected ? const Color(0xFF177046) : Colors.black, fontSize: 15, - fontFamily: 'AbdEriady', // Using the custom font family - fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, // Using specific weights + fontFamily: 'AbdEriady', + fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400, ), ), ], @@ -103,4 +120,4 @@ class _NavBarItemTile extends StatelessWidget { ), ); } -} \ No newline at end of file +}