ammar/syncrow-web
1
0
Fork 0
mirror of https://github.com/SyncrowIOT/web.git synced 2025-07-09 22:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

WebAppBar ResponsiveLayout

Browse Source
This commit is contained in:
mohammad
2025-02-26 12:00:30 +03:00
parent ba44d1d359
commit fe52726f6e
13 changed files with 368 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

394
lib/web_layout/web_app_bar.dart
View File

@ -5,10 +5,10 @@ import 'package:syncrow_web/pages/home/bloc/home_bloc.dart';
import 'package:syncrow_web/pages/home/bloc/home_state.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/utils/responsive_layout.dart';
import 'package:syncrow_web/utils/user_drop_down_menu.dart';
class WebAppBar extends StatefulWidget {
class WebAppBar extends StatelessWidget {
final Widget? title;
final Widget? centerBody;
final Widget? rightBody;
@ -16,178 +16,234 @@ class WebAppBar extends StatefulWidget {
const WebAppBar({super.key, this.title, this.centerBody, this.rightBody});
@override
State<WebAppBar> createState() => _WebAppBarState();
Widget build(BuildContext context) {
return BlocBuilder<HomeBloc, HomeState>(
builder: (context, state) {
final user = context.read<HomeBloc>().user;
return ResponsiveLayout(
mobileBody: MobileAppBar(
title: title,
centerBody: centerBody,
rightBody: rightBody,
user: user,
),
tablet: TabletAppBar(
title: title,
centerBody: centerBody,
rightBody: rightBody,
user: user,
),
desktopBody: DesktopAppBar(
title: title,
centerBody: centerBody,
rightBody: rightBody,
user: user,
),
);
},
);
}
}
class _WebAppBarState extends State<WebAppBar> with HelperResponsiveLayout {
@override
void initState() {
super.initState();
}
class DesktopAppBar extends StatelessWidget {
final Widget? title;
final Widget? centerBody;
final Widget? rightBody;
final dynamic user;
const DesktopAppBar({
super.key,
this.title,
this.centerBody,
this.rightBody,
required this.user,
});
@override
Widget build(BuildContext context) {
bool isSmallScreen = isSmallScreenSize(context);
bool isHalfMediumScreen = isHafMediumScreenSize(context);
return BlocBuilder<HomeBloc, HomeState>(builder: (context, state) {
final user = context.read<HomeBloc>().user;
return Container(
height: (isSmallScreen || isHalfMediumScreen) ? 130 : 100,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.all(10),
child: isSmallScreen || isHalfMediumScreen
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.title != null)
Align(
alignment: Alignment.centerLeft,
child: widget.title!,
),
if (widget.centerBody != null)
Padding(
padding: const EdgeInsets.only(top: 8.0),
child: widget.centerBody,
),
if (widget.rightBody != null || user != null)
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (widget.rightBody != null) widget.rightBody!,
Row(
children: [
SizedBox.square(
dimension: 40,
child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors,
child: SizedBox.square(
dimension: 35,
child: SvgPicture.asset(
Assets.logoGrey,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(
width: 10,
),
if (user != null)
Text(
'${user.firstName} ${user.lastName}',
style: Theme.of(context).textTheme.bodyLarge,
),
],
),
],
),
],
)
: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Row(
children: [
widget.title!,
if (widget.centerBody != null)
Padding(
padding: const EdgeInsets.only(left: 80),
child: widget.centerBody!,
),
],
),
return Container(
height: 100,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Row(
children: [
if (title != null) title!,
if (centerBody != null)
Padding(
padding: const EdgeInsets.only(left: 80),
child: centerBody!,
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
if (widget.rightBody != null)
Align(
alignment: Alignment.centerRight,
child: widget.rightBody,
),
const SizedBox(
width: 10,
),
SizedBox.square(
dimension: 40,
child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors,
child: SizedBox.square(
dimension: 35,
child: SvgPicture.asset(
Assets.logoGrey,
fit: BoxFit.cover,
),
),
),
),
const SizedBox(
width: 10,
),
if (user != null)
Text(
'${user.firstName} ${user.lastName}',
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(
width: 10,
),
UserDropdownMenu(user: user),
// GestureDetector(
// onTap: () {
// showCustomDialog(
// context: context,
// barrierDismissible: true,
// title: 'Logout',
// message: 'Are you sure you want to logout?',
// actions: [
// GestureDetector(
// onTap: () {
// AuthBloc.logout();
// context.go(RoutesConst.auth);
// },
// child: DefaultButton(
// child: Text(
// 'Ok',
// style: Theme.of(context)
// .textTheme
// .bodyMedium!
// .copyWith(fontSize: 12, color: Colors.white),
// ),
// ),
// ),
// const SizedBox(
// height: 10,
// ),
// GestureDetector(
// onTap: () {
// context.pop();
// },
// child: DefaultButton(
// child: Text(
// 'Cancel',
// style: Theme.of(context)
// .textTheme
// .bodyMedium!
// .copyWith(fontSize: 12, color: Colors.white),
// ),
// ),
// ),
// ],
// );
// },
// child: const Icon(
// Icons.logout,
// color: ColorsManager.whiteColors,
// ),
// )
],
),
],
),
);
});
],
),
),
_buildUserSection(context),
],
),
);
}
Widget _buildUserSection(BuildContext context) {
return Row(
children: [
if (rightBody != null) rightBody!,
const SizedBox(width: 24),
_UserAvatar(),
const SizedBox(width: 12),
if (user != null)
Text(
'${user.firstName} ${user.lastName}',
style: Theme.of(context).textTheme.bodyLarge,
),
const SizedBox(width: 12),
UserDropdownMenu(user: user),
],
);
}
}
class TabletAppBar extends StatelessWidget {
final Widget? title;
final Widget? centerBody;
final Widget? rightBody;
final dynamic user;
const TabletAppBar({
super.key,
this.title,
this.centerBody,
this.rightBody,
required this.user,
});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (title != null) Expanded(child: title!),
_buildUserSection(context),
],
),
if (centerBody != null) Expanded(child: centerBody!),
],
),
);
}
Widget _buildUserSection(BuildContext context) {
return Row(
children: [
if (rightBody != null) rightBody!,
const SizedBox(width: 16),
_UserAvatar(),
if (user != null) ...[
const SizedBox(width: 8),
Text(
'${user.firstName} ${user.lastName}',
style:
Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 14),
),
],
UserDropdownMenu(user: user),
],
);
}
}
class MobileAppBar extends StatelessWidget {
final Widget? title;
final Widget? centerBody;
final Widget? rightBody;
final dynamic user;
const MobileAppBar({
super.key,
this.title,
this.centerBody,
this.rightBody,
required this.user,
});
@override
Widget build(BuildContext context) {
return Container(
height: 135,
decoration: const BoxDecoration(color: ColorsManager.secondaryColor),
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (title != null) title!,
_buildUserSection(context),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
if (centerBody != null)
Padding(
padding: const EdgeInsets.only(top: 8),
child: centerBody!,
),
if (rightBody != null)
Padding(
padding: const EdgeInsets.only(top: 8),
child: rightBody!,
),
],
),
],
),
);
}
Widget _buildUserSection(BuildContext context) {
return Row(
children: [
_UserAvatar(),
if (user != null) ...[
const SizedBox(width: 8),
Text(
'${user.firstName} ${user.lastName}',
style:
Theme.of(context).textTheme.bodyLarge?.copyWith(fontSize: 14),
),
],
UserDropdownMenu(user: user),
],
);
}
}
class _UserAvatar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox.square(
dimension: 40,
child: CircleAvatar(
backgroundColor: ColorsManager.whiteColors,
child: SizedBox.square(
dimension: 35,
child: SvgPicture.asset(
Assets.logoGrey,
fit: BoxFit.cover,
),
),
),
);
}
}