Refactor TopBar: remove unused imports, simplify layout, and integrate employee info display

This commit is contained in:
Vaibhav Surve 2025-05-21 16:46:25 +05:30
parent c6f45b8852
commit 1f221194cf

View File

@ -1,6 +1,3 @@
import 'package:get/get.dart';
import 'package:marco/helpers/services/localizations/language.dart';
import 'package:marco/helpers/theme/app_notifier.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/theme/theme_customizer.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
@ -12,23 +9,36 @@ import 'package:marco/helpers/widgets/my_dashed_divider.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_text_style.dart';
import 'package:marco/images.dart';
import 'package:marco/widgets/custom_pop_menu.dart';
import 'package:flutter/material.dart';
import 'package:flutter_lucide/flutter_lucide.dart';
import 'package:provider/provider.dart';
import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/model/employee_info.dart';
import 'package:marco/helpers/widgets/avatar.dart';
class TopBar extends StatefulWidget {
const TopBar({
super.key, // this.onMenuIconTap,
});
const TopBar({super.key});
@override
_TopBarState createState() => _TopBarState();
}
class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UIMixin {
class _TopBarState extends State<TopBar>
with SingleTickerProviderStateMixin, UIMixin {
Function? languageHideFn;
EmployeeInfo? employeeInfo;
@override
void initState() {
super.initState();
_loadEmployeeInfo();
}
void _loadEmployeeInfo() {
setState(() {
employeeInfo = LocalStorage.getEmployeeInfo();
});
}
@override
Widget build(BuildContext context) {
@ -70,7 +80,11 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
LucideIcons.search,
size: 14,
)),
prefixIconConstraints: BoxConstraints(minWidth: 36, maxWidth: 36, minHeight: 32, maxHeight: 32),
prefixIconConstraints: BoxConstraints(
minWidth: 36,
maxWidth: 36,
minHeight: 32,
maxHeight: 32),
contentPadding: MySpacing.xy(16, 12),
isCollapsed: true,
floatingLabelBehavior: FloatingLabelBehavior.never),
@ -82,37 +96,6 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: () {
ThemeCustomizer.setTheme(ThemeCustomizer.instance.theme == ThemeMode.dark ? ThemeMode.light : ThemeMode.dark);
},
child: Icon(
ThemeCustomizer.instance.theme == ThemeMode.dark ? LucideIcons.sun : LucideIcons.moon,
size: 18,
color: topBarTheme.onBackground,
),
),
MySpacing.width(12),
CustomPopupMenu(
backdrop: true,
hideFn: (hide) => languageHideFn = hide,
onChange: (_) {},
offsetX: -36,
menu: Padding(
padding: MySpacing.xy(8, 8),
child: Center(
child: ClipRRect(
clipBehavior: Clip.antiAliasWithSaveLayer,
borderRadius: BorderRadius.circular(2),
child: Image.asset(
'assets/lang/${ThemeCustomizer.instance.currentLanguage.locale.languageCode}.jpg',
width: 24,
height: 18,
fit: BoxFit.cover,
))),
),
menuBuilder: (_) => buildLanguageSelector(),
),
MySpacing.width(6),
CustomPopupMenu(
backdrop: true,
@ -140,16 +123,17 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
MyContainer.rounded(
paddingAll: 0,
child: Image.asset(
Images.avatars[0],
height: 28,
width: 28,
fit: BoxFit.cover,
)),
Avatar(
firstName: employeeInfo?.firstName ?? 'First',
lastName: employeeInfo?.lastName ?? 'Name',
size: 31,
),
MySpacing.width(8),
MyText.labelLarge("Den")
MyText.labelSmall(
"${employeeInfo?.firstName ?? 'First Name'} ${employeeInfo?.lastName ?? 'Last Name'}",
fontWeight: 600,
muted: true,
),
],
),
),
@ -164,50 +148,15 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
);
}
Widget buildLanguageSelector() {
return MyContainer.bordered(
padding: MySpacing.xy(8, 8),
width: 125,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: Language.languages
.map((language) => MyButton.text(
padding: MySpacing.xy(8, 4),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
splashColor: contentTheme.onBackground.withAlpha(20),
onPressed: () async {
languageHideFn?.call();
// Language.changeLanguage(language);
await Provider.of<AppNotifier>(context, listen: false).changeLanguage(language, notify: true);
ThemeCustomizer.notify();
setState(() {});
},
child: Row(
children: [
ClipRRect(
clipBehavior: Clip.antiAliasWithSaveLayer,
borderRadius: BorderRadius.circular(2),
child: Image.asset(
'assets/lang/${language.locale.languageCode}.jpg',
width: 18,
height: 14,
fit: BoxFit.cover,
)),
MySpacing.width(8),
MyText.labelMedium(language.languageName)
],
),
))
.toList(),
),
);
}
Widget buildNotifications() {
Widget buildNotification(String title, String description) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [MyText.labelLarge(title), MySpacing.height(4), MyText.bodySmall(description)],
children: [
MyText.labelLarge(title),
MySpacing.height(4),
MyText.bodySmall(description)
],
);
}
@ -221,23 +170,29 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
padding: MySpacing.xy(16, 12),
child: MyText.titleMedium("Notification", fontWeight: 600),
),
MyDashedDivider(height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
MyDashedDivider(
height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
Padding(
padding: MySpacing.xy(16, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildNotification("Your order is dispatched", "Order #5678 is on its way"),
buildNotification("Missed Check-in",
"You missed check-in for Project Alpha on 21 May 2025."),
MySpacing.height(12),
buildNotification("Account Security Alert", "New device logged into your account."),
buildNotification("Approval Required",
"Regularization request pending approval for 20 May 2025."),
MySpacing.height(12),
buildNotification("Event Reminder", "Your event 'Flutter Workshop' is tomorrow at 10:00 AM."),
buildNotification("Attendance Reminder",
"Please check out before 6:00 PM today."),
MySpacing.height(12),
buildNotification("Payment Successful", "Your payment of \$45 has been successfully processed."),
buildNotification("Late Check-out",
"Your last check-out on 19 May 2025 was late by 15 minutes."),
],
),
),
MyDashedDivider(height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
MyDashedDivider(
height: 1, color: theme.dividerColor, dashSpace: 4, dashWidth: 6),
Padding(
padding: MySpacing.xy(16, 0),
child: Row(
@ -324,111 +279,9 @@ class _TopBarState extends State<TopBar> with SingleTickerProviderStateMixin, UI
],
),
),
MySpacing.height(4),
MyButton(
onPressed: () => {},
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
borderRadiusAll: AppStyle.buttonRadius.medium,
padding: MySpacing.xy(8, 4),
splashColor: colorScheme.onSurface.withAlpha(20),
backgroundColor: Colors.transparent,
child: Row(
children: [
Icon(
LucideIcons.bell,
size: 14,
color: contentTheme.onBackground,
),
MySpacing.width(8),
MyText.labelMedium(
"Notifications",
fontWeight: 600,
),
],
),
),
MySpacing.height(4),
MyButton(
onPressed: () => {},
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
borderRadiusAll: AppStyle.buttonRadius.medium,
padding: MySpacing.xy(8, 4),
splashColor: colorScheme.onSurface.withAlpha(20),
backgroundColor: Colors.transparent,
child: Row(
children: [
Icon(
LucideIcons.message_circle,
size: 14,
color: contentTheme.onBackground,
),
MySpacing.width(8),
MyText.labelMedium(
"Messages",
fontWeight: 600,
),
],
),
),
MySpacing.height(4),
MyButton(
onPressed: () => {},
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
borderRadiusAll: AppStyle.buttonRadius.medium,
padding: MySpacing.xy(8, 4),
splashColor: colorScheme.onSurface.withAlpha(20),
backgroundColor: Colors.transparent,
child: Row(
children: [
Icon(
LucideIcons.circle_help,
size: 14,
color: contentTheme.onBackground,
),
MySpacing.width(8),
MyText.labelMedium(
"Help & Support",
fontWeight: 600,
),
],
),
),
],
),
),
Divider(
height: 1,
thickness: 1,
),
Padding(
padding: MySpacing.xy(8, 8),
child: MyButton(
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
onPressed: () {
languageHideFn?.call();
Get.offNamed('/auth/login');
},
borderRadiusAll: AppStyle.buttonRadius.medium,
padding: MySpacing.xy(8, 4),
splashColor: contentTheme.danger.withAlpha(28),
backgroundColor: Colors.transparent,
child: Row(
children: [
Icon(
LucideIcons.log_out,
size: 14,
color: contentTheme.danger,
),
MySpacing.width(8),
MyText.labelMedium(
"Log out",
fontWeight: 600,
color: contentTheme.danger,
)
],
),
),
)
],
),
);