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

handle login, home page responsiveness

Browse Source
This commit is contained in:
ashrafzarkanisala
2024-08-31 17:24:43 +03:00
parent dbe65bffff
commit 36c2412234
10 changed files with 471 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lib/pages/access_management/view/access_management.dart
View File

@ -26,6 +26,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isLargeScreen = isLargeScreenSize(context); final isLargeScreen = isLargeScreenSize(context);
final isSmallScreen = isSmallScreenSize(context); final isSmallScreen = isSmallScreenSize(context);
final isHalfMediumScreen = isHafMediumScreenSize(context);
final padding = final padding =
isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15); isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15);
@ -72,7 +73,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
}, },
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
if (isSmallScreen) if (isSmallScreen || isHalfMediumScreen)
_buildSmallSearchFilters(context, accessBloc) _buildSmallSearchFilters(context, accessBloc)
else else
_buildNormalSearchWidgets(context, accessBloc), _buildNormalSearchWidgets(context, accessBloc),
@ -120,7 +121,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
children: [ children: [
Container( Container(
width: 205, width: 205,
height: 35, height: 42,
decoration: containerDecoration, decoration: containerDecoration,
child: DefaultButton( child: DefaultButton(
onPressed: () { onPressed: () {
@ -145,7 +146,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
), ),
Container( Container(
width: 133, width: 133,
height: 35, height: 42,
decoration: containerDecoration, decoration: containerDecoration,
child: DefaultButton( child: DefaultButton(
borderRadius: 8, borderRadius: 8,
@ -167,10 +168,10 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
textBaseline: TextBaseline.ideographic, textBaseline: TextBaseline.ideographic,
children: [ children: [
SizedBox( SizedBox(
width: MediaQuery.of(context).size.width * 0.15, width: 250,
child: CustomWebTextField( child: CustomWebTextField(
controller: accessBloc.passwordName, controller: accessBloc.passwordName,
height: 36, height: 38,
isRequired: true, isRequired: true,
textFieldName: 'Name', textFieldName: 'Name',
description: '', description: '',
@ -178,6 +179,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
), ),
const SizedBox(width: 15), const SizedBox(width: 15),
SizedBox( SizedBox(
height: 70,
child: DateTimeWebWidget( child: DateTimeWebWidget(
icon: Assets.calendarIcon, icon: Assets.calendarIcon,
isRequired: false, isRequired: false,
@ -217,11 +219,11 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout {
runSpacing: 10, runSpacing: 10,
children: [ children: [
SizedBox( SizedBox(
width: MediaQuery.of(context).size.width * 0.15, width: 300,
child: CustomWebTextField( child: CustomWebTextField(
controller: accessBloc.passwordName, controller: accessBloc.passwordName,
isRequired: true, isRequired: true,
height: 36, height: 40,
textFieldName: 'Name', textFieldName: 'Name',
description: '', description: '',
), ),

823
lib/pages/auth/view/login_web_page.dart
View File

@ -13,6 +13,7 @@ import 'package:syncrow_web/pages/common/first_layer.dart';
import 'package:syncrow_web/utils/color_manager.dart'; import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart'; import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/constants/routes_const.dart'; import 'package:syncrow_web/utils/constants/routes_const.dart';
import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
import 'package:syncrow_web/utils/style.dart'; import 'package:syncrow_web/utils/style.dart';
class LoginWebPage extends StatefulWidget { class LoginWebPage extends StatefulWidget {
@ -22,7 +23,8 @@ class LoginWebPage extends StatefulWidget {
State<LoginWebPage> createState() => _LoginWebPageState(); State<LoginWebPage> createState() => _LoginWebPageState();
} }
class _LoginWebPageState extends State<LoginWebPage> { class _LoginWebPageState extends State<LoginWebPage>
with HelperResponsiveLayout {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
@ -50,9 +52,12 @@ class _LoginWebPageState extends State<LoginWebPage> {
Widget _buildLoginForm(BuildContext context, AuthState state) { Widget _buildLoginForm(BuildContext context, AuthState state) {
final loginBloc = BlocProvider.of<AuthBloc>(context); final loginBloc = BlocProvider.of<AuthBloc>(context);
final isSmallScreen = isSmallScreenSize(context);
final isMediumScreen = isMediumScreenSize(context);
Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;
late ScrollController _scrollController; late ScrollController _scrollController;
_scrollController = ScrollController(); _scrollController = ScrollController();
void _scrollToCenter() { void _scrollToCenter() {
final double middlePosition = final double middlePosition =
_scrollController.position.maxScrollExtent / 2; _scrollController.position.maxScrollExtent / 2;
@ -66,6 +71,7 @@ class _LoginWebPageState extends State<LoginWebPage> {
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
_scrollToCenter(); _scrollToCenter();
}); });
return Stack( return Stack(
children: [ children: [
FirstLayer( FirstLayer(
@ -75,451 +81,53 @@ class _LoginWebPageState extends State<LoginWebPage> {
shrinkWrap: true, shrinkWrap: true,
children: [ children: [
Container( Container(
width: 400,
padding: EdgeInsets.all(size.width * 0.02), padding: EdgeInsets.all(size.width * 0.02),
margin: EdgeInsets.all(size.width * 0.09), margin: EdgeInsets.all(size.width * 0.05),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3), color: Colors.black.withOpacity(0.3),
borderRadius: const BorderRadius.all(Radius.circular(20)), borderRadius: const BorderRadius.all(Radius.circular(20)),
), ),
child: Center( child: Center(
child: Row( child: isSmallScreen || isMediumScreen
crossAxisAlignment: CrossAxisAlignment.center, ? SizedBox(
mainAxisAlignment: MainAxisAlignment.center, width: 400,
children: [ child: Column(
const Spacer(), // For small screens
Expanded( crossAxisAlignment: CrossAxisAlignment.center,
flex: 3, children: [
child: SvgPicture.asset( SizedBox(
Assets.loginLogo, width: 300,
), child: SvgPicture.asset(
), Assets.loginLogo,
const Spacer(),
Expanded(
flex: 3,
child: Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: const BorderRadius.all(
Radius.circular(30)),
border: Border.all(
color: ColorsManager.graysColor
.withOpacity(0.2))),
child: Form(
key: loginBloc.loginFormKey,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.02,
vertical: size.width * 0.003),
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 40),
Text('Login',
style: Theme.of(context)
.textTheme
.headlineLarge),
SizedBox(height: size.height * 0.03),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"Country/Region",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
fontSize: 14,
fontWeight:
FontWeight.w400),
),
const SizedBox(
height: 10,
),
SizedBox(
child: DropdownButtonFormField<
String>(
padding: EdgeInsets.zero,
value: loginBloc.regionList!
.any((region) =>
region.id ==
loginBloc
.regionUuid)
? loginBloc.regionUuid
: null,
validator:
loginBloc.validateRegion,
icon: const Icon(
Icons
.keyboard_arrow_down_outlined,
),
decoration: textBoxDecoration()!
.copyWith(
errorStyle: const TextStyle(
height: 0),
hintText: null,
),
hint: SizedBox(
width: size.width * 0.12,
child: Align(
alignment:
Alignment.centerLeft,
child: Text(
'Select your region/country',
textAlign:
TextAlign.center,
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color:
ColorsManager
.grayColor,
fontWeight:
FontWeight
.w400),
overflow:
TextOverflow.ellipsis,
),
),
),
isDense: true,
style: const TextStyle(
color: Colors.black),
items: loginBloc.regionList!
.map((RegionModel region) {
return DropdownMenuItem<
String>(
value: region.id,
child: SizedBox(
width:
size.width * 0.08,
child:
Text(region.name)),
);
}).toList(),
onChanged: (String? value) {
loginBloc
.add(CheckEnableEvent());
loginBloc.add(
SelectRegionEvent(
val: value!));
},
),
)
],
),
const SizedBox(height: 20.0),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"Email",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
fontSize: 14,
fontWeight:
FontWeight.w400),
),
const SizedBox(
height: 10,
),
SizedBox(
child: TextFormField(
onChanged: (value) {
loginBloc
.add(CheckEnableEvent());
},
validator: loginBloc
.loginValidateEmail,
controller: loginBloc
.loginEmailController,
decoration: textBoxDecoration()!
.copyWith(
errorStyle: const TextStyle(
height:
0), // Hide the error text space
hintText:
'Enter your email address',
hintStyle: Theme.of(
context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager
.grayColor,
fontWeight:
FontWeight
.w400)),
style: const TextStyle(
color: Colors.black),
),
),
],
),
const SizedBox(height: 20.0),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisAlignment:
MainAxisAlignment.start,
children: [
Text(
"Password",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
fontSize: 14,
fontWeight:
FontWeight.w400),
),
const SizedBox(
height: 10,
),
SizedBox(
child: TextFormField(
onChanged: (value) {
loginBloc
.add(CheckEnableEvent());
},
validator:
loginBloc.validatePassword,
obscureText:
loginBloc.obscureText,
keyboardType: TextInputType
.visiblePassword,
controller: loginBloc
.loginPasswordController,
decoration: textBoxDecoration()!
.copyWith(
hintText:
'At least 8 characters',
hintStyle: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: ColorsManager
.grayColor,
fontWeight:
FontWeight.w400),
suffixIcon: IconButton(
onPressed: () {
loginBloc.add(
PasswordVisibleEvent(
newValue: loginBloc
.obscureText));
},
icon: SizedBox(
child: SvgPicture.asset(
loginBloc.obscureText
? Assets
.visiblePassword
: Assets
.invisiblePassword,
height: 15,
width: 15,
),
),
),
errorStyle: const TextStyle(
height:
0), // Hide the error text space
),
style: const TextStyle(
color: Colors.black),
),
),
],
),
const SizedBox(
height: 20,
),
SizedBox(
child: Row(
mainAxisAlignment:
MainAxisAlignment.end,
children: [
InkWell(
onTap: () {
Navigator.of(context)
.push(MaterialPageRoute(
builder: (context) =>
const ForgetPasswordPage(),
));
},
child: Text(
"Forgot Password?",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(
color: Colors.black,
fontSize: 14,
fontWeight:
FontWeight.w400),
),
),
],
),
),
const SizedBox(
height: 20,
),
Row(
children: [
Transform.scale(
scale:
1.2, // Adjust the scale as needed
child: Checkbox(
fillColor: MaterialStateProperty
.all<Color>(Colors.white),
activeColor: Colors.white,
value: loginBloc.isChecked,
checkColor: Colors.black,
shape: const CircleBorder(),
onChanged: (bool? newValue) {
loginBloc.add(CheckBoxEvent(
newValue: newValue));
},
),
),
SizedBox(
width: size.width * 0.14,
child: RichText(
text: TextSpan(
text: 'Agree to ',
style: const TextStyle(
color: Colors.white),
children: [
TextSpan(
text:
'(Terms of Service)',
style: const TextStyle(
color: Colors.black,
),
recognizer:
TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL(
'https://example.com/terms');
},
),
TextSpan(
text:
' (Legal Statement)',
style: const TextStyle(
color: Colors.black),
recognizer:
TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL(
'https://example.com/legal');
},
),
TextSpan(
text:
' (Privacy Statement)',
style: const TextStyle(
color: Colors.black),
recognizer:
TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL(
'https://example.com/privacy');
},
),
],
),
),
),
],
),
const SizedBox(height: 20.0),
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
SizedBox(
width: size.width * 0.2,
child: DefaultButton(
enabled:
loginBloc.checkValidate,
child: Text('Sign in',
style: Theme.of(context)
.textTheme
.labelLarge!
.copyWith(
fontSize: 14,
color: loginBloc
.checkValidate
? ColorsManager
.whiteColors
: ColorsManager
.whiteColors
.withOpacity(
0.2),
)),
onPressed: () {
if (loginBloc.loginFormKey
.currentState!
.validate()) {
loginBloc
.add(LoginButtonPressed(
regionUuid:
loginBloc.regionUuid,
username: loginBloc
.loginEmailController
.text,
password: loginBloc
.loginPasswordController
.text,
));
} else {
loginBloc.add(
ChangeValidateEvent());
}
},
),
),
],
),
const SizedBox(height: 15.0),
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment:
MainAxisAlignment.center,
children: [
SizedBox(
child: Text(
loginBloc.validate,
style: const TextStyle(
fontWeight: FontWeight.w700,
color: ColorsManager.red),
),
)
],
)
],
),
), ),
))), ),
const Spacer(), const SizedBox(height: 20),
], _buildLoginFormFields(context, loginBloc, size),
), ],
),
)
: Row(
// For larger screens
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
Expanded(
flex: 1,
child: SvgPicture.asset(
Assets.loginLogo,
),
),
const Spacer(),
Expanded(
flex: 3,
child: _buildLoginFormFields(
context, loginBloc, size),
),
const Spacer(),
],
),
), ),
), ),
], ],
@ -531,4 +139,341 @@ class _LoginWebPageState extends State<LoginWebPage> {
], ],
); );
} }
Widget _buildLoginFormFields(
BuildContext context, AuthBloc loginBloc, Size size) {
return Container(
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: const BorderRadius.all(Radius.circular(30)),
border: Border.all(color: ColorsManager.graysColor.withOpacity(0.2)),
),
child: Form(
key: loginBloc.loginFormKey,
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.02, vertical: size.width * 0.003),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const SizedBox(height: 40),
Text('Login', style: Theme.of(context).textTheme.headlineLarge),
SizedBox(height: size.height * 0.03),
_buildDropdownField(context, loginBloc, size),
const SizedBox(height: 20.0),
_buildEmailField(context, loginBloc),
const SizedBox(height: 20.0),
_buildPasswordField(context, loginBloc),
const SizedBox(height: 20),
_buildForgotPassword(context),
const SizedBox(height: 20),
_buildCheckbox(context, loginBloc, size),
const SizedBox(height: 20.0),
_buildSignInButton(context, loginBloc, size),
const SizedBox(height: 15.0),
_buildValidationMessage(loginBloc),
],
),
),
),
);
}
Widget _buildDropdownField(
BuildContext context, AuthBloc loginBloc, Size size) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Country/Region",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontSize: 14, fontWeight: FontWeight.w400),
),
const SizedBox(height: 10),
SizedBox(
width: size.width * 0.8,
child: LayoutBuilder(
builder: (context, constraints) {
return DropdownButtonFormField<String>(
value: loginBloc.regionList!
.any((region) => region.id == loginBloc.regionUuid)
? loginBloc.regionUuid
: null,
validator: loginBloc.validateRegion,
icon: const Icon(
Icons.keyboard_arrow_down_outlined,
size: 20,
),
decoration: textBoxDecoration()!.copyWith(
errorStyle: const TextStyle(height: 0),
contentPadding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 10,
),
),
hint: Text(
'Select your region/country',
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: ColorsManager.grayColor,
fontWeight: FontWeight.w400),
overflow: TextOverflow.ellipsis,
),
isDense: true,
style: const TextStyle(color: Colors.black),
items: loginBloc.regionList!.map((RegionModel region) {
return DropdownMenuItem<String>(
value: region.id,
child: Container(
constraints:
BoxConstraints(maxWidth: constraints.maxWidth - 40),
child: Text(
region.name,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
),
);
}).toList(),
onChanged: (String? value) {
loginBloc.add(CheckEnableEvent());
loginBloc.add(SelectRegionEvent(val: value!));
},
dropdownColor: Colors.white,
menuMaxHeight: size.height * 0.45,
selectedItemBuilder: (context) {
return loginBloc.regionList!.map<Widget>((region) {
return Container(
constraints:
BoxConstraints(maxWidth: constraints.maxWidth - 40),
child: Text(
region.name,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
);
}).toList();
},
);
},
),
),
],
);
}
Widget _buildEmailField(BuildContext context, AuthBloc loginBloc) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Email",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontSize: 14, fontWeight: FontWeight.w400),
),
const SizedBox(height: 10),
SizedBox(
child: TextFormField(
onChanged: (value) {
loginBloc.add(CheckEnableEvent());
},
validator: loginBloc.loginValidateEmail,
controller: loginBloc.loginEmailController,
decoration: textBoxDecoration()!.copyWith(
errorStyle: const TextStyle(height: 0),
hintText: 'Enter your email address',
hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
color: ColorsManager.grayColor,
fontWeight: FontWeight.w400)),
style: const TextStyle(color: Colors.black),
),
),
],
);
}
Widget _buildPasswordField(BuildContext context, AuthBloc loginBloc) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"Password",
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(fontSize: 14, fontWeight: FontWeight.w400),
),
const SizedBox(height: 10),
SizedBox(
child: TextFormField(
onChanged: (value) {
loginBloc.add(CheckEnableEvent());
},
validator: loginBloc.validatePassword,
obscureText: loginBloc.obscureText,
keyboardType: TextInputType.visiblePassword,
controller: loginBloc.loginPasswordController,
decoration: textBoxDecoration()!.copyWith(
hintText: 'At least 8 characters',
hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith(
color: ColorsManager.grayColor, fontWeight: FontWeight.w400),
suffixIcon: IconButton(
onPressed: () {
loginBloc.add(
PasswordVisibleEvent(newValue: loginBloc.obscureText));
},
icon: SizedBox(
child: SvgPicture.asset(
loginBloc.obscureText
? Assets.visiblePassword
: Assets.invisiblePassword,
height: 15,
width: 15,
),
),
),
errorStyle: const TextStyle(height: 0),
),
style: const TextStyle(color: Colors.black),
),
),
],
);
}
Widget _buildForgotPassword(BuildContext context) {
return SizedBox(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
InkWell(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => const ForgetPasswordPage(),
));
},
child: Text(
"Forgot Password?",
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: Colors.black,
fontSize: 14,
fontWeight: FontWeight.w400),
),
),
],
),
);
}
Widget _buildCheckbox(BuildContext context, AuthBloc loginBloc, Size size) {
return Row(
children: [
Transform.scale(
scale: 1.2,
child: Checkbox(
fillColor: MaterialStateProperty.all<Color>(Colors.white),
activeColor: Colors.white,
value: loginBloc.isChecked,
checkColor: Colors.black,
shape: const CircleBorder(),
onChanged: (bool? newValue) {
loginBloc.add(CheckBoxEvent(newValue: newValue));
},
),
),
SizedBox(
width: 220,
child: RichText(
text: TextSpan(
text: 'Agree to ',
style: const TextStyle(color: Colors.white),
children: [
TextSpan(
text: '(Terms of Service)',
style: const TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL('https://example.com/terms');
},
),
TextSpan(
text: ' (Legal Statement)',
style: const TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL('https://example.com/legal');
},
),
TextSpan(
text: ' (Privacy Statement)',
style: const TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()
..onTap = () {
loginBloc.launchURL('https://example.com/privacy');
},
),
],
),
),
),
],
);
}
Widget _buildSignInButton(
BuildContext context, AuthBloc loginBloc, Size size) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: size.width * 0.2,
child: DefaultButton(
enabled: loginBloc.checkValidate,
child: Text('Sign in',
style: Theme.of(context).textTheme.labelLarge!.copyWith(
fontSize: 14,
color: loginBloc.checkValidate
? ColorsManager.whiteColors
: ColorsManager.whiteColors.withOpacity(0.2),
)),
onPressed: () {
if (loginBloc.loginFormKey.currentState!.validate()) {
loginBloc.add(LoginButtonPressed(
regionUuid: loginBloc.regionUuid,
username: loginBloc.loginEmailController.text,
password: loginBloc.loginPasswordController.text,
));
} else {
loginBloc.add(ChangeValidateEvent());
}
},
),
),
],
);
}
Widget _buildValidationMessage(AuthBloc loginBloc) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
child: Text(
loginBloc.validate,
style: const TextStyle(
fontWeight: FontWeight.w700, color: ColorsManager.red),
),
)
],
);
}
} }

4
lib/pages/common/buttons/search_reset_buttons.dart
View File

@ -24,7 +24,7 @@ class SearchResetButtons extends StatelessWidget {
const SizedBox(height: 25), const SizedBox(height: 25),
Center( Center(
child: Container( child: Container(
height: 35, height: 42,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(
@ -49,7 +49,7 @@ class SearchResetButtons extends StatelessWidget {
const SizedBox(height: 25), const SizedBox(height: 25),
Center( Center(
child: Container( child: Container(
height: 35, height: 42,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(

2
lib/pages/common/date_time_widget.dart
View File

@ -54,7 +54,7 @@ class DateTimeWebWidget extends StatelessWidget {
height: 8, height: 8,
), ),
Container( Container(
height: size.height * 0.056, // height: size.height * 0.056,
padding: padding:
const EdgeInsets.only(top: 10, bottom: 10, right: 30, left: 10), const EdgeInsets.only(top: 10, bottom: 10, right: 30, left: 10),
decoration: containerDecoration, decoration: containerDecoration,

2
lib/pages/common/filter/filter_widget.dart
View File

@ -20,7 +20,7 @@ class FilterWidget extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
decoration: containerDecoration, decoration: containerDecoration,
height: size.height * 0.05, height: 40,
child: ListView.builder( child: ListView.builder(
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
itemCount: tabs.length, itemCount: tabs.length,

2
lib/pages/common/text_field/custom_text_field.dart
View File

@ -60,7 +60,7 @@ class CustomTextField extends StatelessWidget {
title, title,
style: context.textTheme.bodyMedium!.copyWith( style: context.textTheme.bodyMedium!.copyWith(
fontSize: 13, fontSize: 13,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w600,
color: const Color(0xff000000), color: const Color(0xff000000),
), ),
), ),

2
lib/pages/device_managment/all_devices/widgets/device_managment_body.dart
View File

@ -75,7 +75,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout {
const DeviceSearchFilters(), const DeviceSearchFilters(),
const SizedBox(height: 12), const SizedBox(height: 12),
Container( Container(
height: 35, height: 45,
width: 100, width: 100,
decoration: containerDecoration, decoration: containerDecoration,
child: Center( child: Center(

10
lib/pages/home/view/home_page.dart
View File

@ -1,13 +1,17 @@
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:syncrow_web/pages/home/view/home_page_mobile.dart'; import 'package:syncrow_web/pages/home/view/home_page_mobile.dart';
import 'package:syncrow_web/pages/home/view/home_page_web.dart'; import 'package:syncrow_web/pages/home/view/home_page_web.dart';
import 'package:syncrow_web/utils/responsive_layout.dart'; import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
class HomePage extends StatelessWidget { class HomePage extends StatelessWidget with HelperResponsiveLayout {
const HomePage({super.key}); const HomePage({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ResponsiveLayout(desktopBody: const HomeWebPage(), mobileBody: HomeMobilePage()); final isSmallScreen = isSmallScreenSize(context);
final isMediumScreen = isMediumScreenSize(context);
return isSmallScreen || isMediumScreen
? HomeMobilePage()
: const HomeWebPage();
} }
} }

112
lib/pages/home/view/home_page_mobile.dart
View File

@ -13,61 +13,69 @@ class HomeMobilePage extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; Size size = MediaQuery.of(context).size;
return WebScaffold( return PopScope(
enableMenuSideba: false, canPop: false,
appBarTitle: Row( onPopInvoked: (didPop) => false,
children: [ child: WebScaffold(
SvgPicture.asset( enableMenuSideba: false,
Assets.loginLogo, appBarTitle: Row(
width: 150, children: [
), SvgPicture.asset(
], Assets.loginLogo,
), width: 150,
scaffoldBody: BlocConsumer<HomeBloc, HomeState>( ),
listener: (context, state) {}, ],
builder: (context, state) { ),
return SizedBox( scaffoldBody: BlocConsumer<HomeBloc, HomeState>(
height: size.height, listener: (context, state) {},
width: size.width, builder: (context, state) {
child: Column( final homeBloc = BlocProvider.of<HomeBloc>(context);
mainAxisAlignment: MainAxisAlignment.center, return SizedBox(
crossAxisAlignment: CrossAxisAlignment.center, height: size.height,
children: [ width: size.width,
SizedBox(height: size.height * 0.05), child: Column(
const Text( mainAxisAlignment: MainAxisAlignment.center,
'ACCESS YOUR APPS', crossAxisAlignment: CrossAxisAlignment.center,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700), children: [
), SizedBox(height: size.height * 0.05),
const SizedBox(height: 30), const Text(
Expanded( 'ACCESS YOUR APPS',
flex: 4, style:
child: SizedBox( TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
height: size.height * 0.6, ),
width: size.width * 0.68, const SizedBox(height: 30),
child: GridView.builder( Expanded(
itemCount: 8, flex: 4,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( child: SizedBox(
crossAxisCount: 2, height: size.height * 0.6,
crossAxisSpacing: 20.0, width: size.width * 0.68,
mainAxisSpacing: 20.0, child: GridView.builder(
childAspectRatio: 1.5, itemCount: 8,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0,
childAspectRatio: 1.5,
),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeItems[index]['active'],
name: homeItems[index]['title'],
img: homeItems[index]['icon'],
onTap: () =>
homeBloc.homeItems[index].onPress(context),
);
},
), ),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeItems[index]['active'],
name: homeItems[index]['title'],
img: homeItems[index]['icon'],
onTap: () {},
);
},
), ),
), ),
), ],
], ),
), );
); }),
}), ),
); );
} }

5
lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart
View File

@ -10,6 +10,11 @@ mixin HelperResponsiveLayout {
MediaQuery.of(context).size.width < 1024; MediaQuery.of(context).size.width < 1024;
} }
bool isHafMediumScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 600 / 1.3 &&
MediaQuery.of(context).size.width < 1024 / 1.3;
}
bool isLargeScreenSize(BuildContext context) { bool isLargeScreenSize(BuildContext context) {
return MediaQuery.of(context).size.width >= 1024 && return MediaQuery.of(context).size.width >= 1024 &&
MediaQuery.of(context).size.width < 1440; MediaQuery.of(context).size.width < 1440;