From 36c2412234fb49484b52f191ffaef59d0f896b3a Mon Sep 17 00:00:00 2001 From: ashrafzarkanisala Date: Sat, 31 Aug 2024 17:24:43 +0300 Subject: [PATCH] handle login, home page responsiveness --- .../view/access_management.dart | 16 +- lib/pages/auth/view/login_web_page.dart | 823 ++++++++---------- .../common/buttons/search_reset_buttons.dart | 4 +- lib/pages/common/date_time_widget.dart | 2 +- lib/pages/common/filter/filter_widget.dart | 2 +- .../common/text_field/custom_text_field.dart | 2 +- .../widgets/device_managment_body.dart | 2 +- lib/pages/home/view/home_page.dart | 10 +- lib/pages/home/view/home_page_mobile.dart | 112 +-- .../responsive_layout_helper.dart | 5 + 10 files changed, 471 insertions(+), 507 deletions(-) diff --git a/lib/pages/access_management/view/access_management.dart b/lib/pages/access_management/view/access_management.dart index 2f5deb6d..26a1dcc2 100644 --- a/lib/pages/access_management/view/access_management.dart +++ b/lib/pages/access_management/view/access_management.dart @@ -26,6 +26,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { Widget build(BuildContext context) { final isLargeScreen = isLargeScreenSize(context); final isSmallScreen = isSmallScreenSize(context); + final isHalfMediumScreen = isHafMediumScreenSize(context); final padding = isLargeScreen ? const EdgeInsets.all(30) : const EdgeInsets.all(15); @@ -72,7 +73,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { }, ), const SizedBox(height: 20), - if (isSmallScreen) + if (isSmallScreen || isHalfMediumScreen) _buildSmallSearchFilters(context, accessBloc) else _buildNormalSearchWidgets(context, accessBloc), @@ -120,7 +121,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { children: [ Container( width: 205, - height: 35, + height: 42, decoration: containerDecoration, child: DefaultButton( onPressed: () { @@ -145,7 +146,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { ), Container( width: 133, - height: 35, + height: 42, decoration: containerDecoration, child: DefaultButton( borderRadius: 8, @@ -167,10 +168,10 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { textBaseline: TextBaseline.ideographic, children: [ SizedBox( - width: MediaQuery.of(context).size.width * 0.15, + width: 250, child: CustomWebTextField( controller: accessBloc.passwordName, - height: 36, + height: 38, isRequired: true, textFieldName: 'Name', description: '', @@ -178,6 +179,7 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { ), const SizedBox(width: 15), SizedBox( + height: 70, child: DateTimeWebWidget( icon: Assets.calendarIcon, isRequired: false, @@ -217,11 +219,11 @@ class AccessManagementPage extends StatelessWidget with HelperResponsiveLayout { runSpacing: 10, children: [ SizedBox( - width: MediaQuery.of(context).size.width * 0.15, + width: 300, child: CustomWebTextField( controller: accessBloc.passwordName, isRequired: true, - height: 36, + height: 40, textFieldName: 'Name', description: '', ), diff --git a/lib/pages/auth/view/login_web_page.dart b/lib/pages/auth/view/login_web_page.dart index a88aac07..bce74d56 100644 --- a/lib/pages/auth/view/login_web_page.dart +++ b/lib/pages/auth/view/login_web_page.dart @@ -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/constants/assets.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'; class LoginWebPage extends StatefulWidget { @@ -22,7 +23,8 @@ class LoginWebPage extends StatefulWidget { State createState() => _LoginWebPageState(); } -class _LoginWebPageState extends State { +class _LoginWebPageState extends State + with HelperResponsiveLayout { @override Widget build(BuildContext context) { return Scaffold( @@ -50,9 +52,12 @@ class _LoginWebPageState extends State { Widget _buildLoginForm(BuildContext context, AuthState state) { final loginBloc = BlocProvider.of(context); + final isSmallScreen = isSmallScreenSize(context); + final isMediumScreen = isMediumScreenSize(context); Size size = MediaQuery.of(context).size; late ScrollController _scrollController; _scrollController = ScrollController(); + void _scrollToCenter() { final double middlePosition = _scrollController.position.maxScrollExtent / 2; @@ -66,6 +71,7 @@ class _LoginWebPageState extends State { WidgetsBinding.instance.addPostFrameCallback((_) { _scrollToCenter(); }); + return Stack( children: [ FirstLayer( @@ -75,451 +81,53 @@ class _LoginWebPageState extends State { shrinkWrap: true, children: [ Container( + width: 400, padding: EdgeInsets.all(size.width * 0.02), - margin: EdgeInsets.all(size.width * 0.09), + margin: EdgeInsets.all(size.width * 0.05), decoration: BoxDecoration( color: Colors.black.withOpacity(0.3), borderRadius: const BorderRadius.all(Radius.circular(20)), ), child: Center( - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Spacer(), - Expanded( - flex: 3, - 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: [ - 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(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), - ), - ) - ], - ) - ], - ), + child: isSmallScreen || isMediumScreen + ? SizedBox( + width: 400, + child: Column( + // For small screens + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + width: 300, + child: SvgPicture.asset( + Assets.loginLogo, ), - ))), - 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 { ], ); } + + 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: [ + 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( + 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( + 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((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(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), + ), + ) + ], + ); + } } diff --git a/lib/pages/common/buttons/search_reset_buttons.dart b/lib/pages/common/buttons/search_reset_buttons.dart index cdb09c21..7b63a485 100644 --- a/lib/pages/common/buttons/search_reset_buttons.dart +++ b/lib/pages/common/buttons/search_reset_buttons.dart @@ -24,7 +24,7 @@ class SearchResetButtons extends StatelessWidget { const SizedBox(height: 25), Center( child: Container( - height: 35, + height: 42, width: 100, decoration: containerDecoration, child: Center( @@ -49,7 +49,7 @@ class SearchResetButtons extends StatelessWidget { const SizedBox(height: 25), Center( child: Container( - height: 35, + height: 42, width: 100, decoration: containerDecoration, child: Center( diff --git a/lib/pages/common/date_time_widget.dart b/lib/pages/common/date_time_widget.dart index 824ab382..0965377e 100644 --- a/lib/pages/common/date_time_widget.dart +++ b/lib/pages/common/date_time_widget.dart @@ -54,7 +54,7 @@ class DateTimeWebWidget extends StatelessWidget { height: 8, ), Container( - height: size.height * 0.056, + // height: size.height * 0.056, padding: const EdgeInsets.only(top: 10, bottom: 10, right: 30, left: 10), decoration: containerDecoration, diff --git a/lib/pages/common/filter/filter_widget.dart b/lib/pages/common/filter/filter_widget.dart index d6cfcc7e..1af23045 100644 --- a/lib/pages/common/filter/filter_widget.dart +++ b/lib/pages/common/filter/filter_widget.dart @@ -20,7 +20,7 @@ class FilterWidget extends StatelessWidget { Widget build(BuildContext context) { return Container( decoration: containerDecoration, - height: size.height * 0.05, + height: 40, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: tabs.length, diff --git a/lib/pages/common/text_field/custom_text_field.dart b/lib/pages/common/text_field/custom_text_field.dart index 2c29762c..f54d3991 100644 --- a/lib/pages/common/text_field/custom_text_field.dart +++ b/lib/pages/common/text_field/custom_text_field.dart @@ -60,7 +60,7 @@ class CustomTextField extends StatelessWidget { title, style: context.textTheme.bodyMedium!.copyWith( fontSize: 13, - fontWeight: FontWeight.w400, + fontWeight: FontWeight.w600, color: const Color(0xff000000), ), ), diff --git a/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart b/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart index d1ee0fed..2e9d916a 100644 --- a/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart +++ b/lib/pages/device_managment/all_devices/widgets/device_managment_body.dart @@ -75,7 +75,7 @@ class DeviceManagementBody extends StatelessWidget with HelperResponsiveLayout { const DeviceSearchFilters(), const SizedBox(height: 12), Container( - height: 35, + height: 45, width: 100, decoration: containerDecoration, child: Center( diff --git a/lib/pages/home/view/home_page.dart b/lib/pages/home/view/home_page.dart index 6217122b..9159011f 100644 --- a/lib/pages/home/view/home_page.dart +++ b/lib/pages/home/view/home_page.dart @@ -1,13 +1,17 @@ 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_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}); @override 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(); } } diff --git a/lib/pages/home/view/home_page_mobile.dart b/lib/pages/home/view/home_page_mobile.dart index ccf506e1..c0abdfe3 100644 --- a/lib/pages/home/view/home_page_mobile.dart +++ b/lib/pages/home/view/home_page_mobile.dart @@ -13,61 +13,69 @@ class HomeMobilePage extends StatelessWidget { @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; - return WebScaffold( - enableMenuSideba: false, - appBarTitle: Row( - children: [ - SvgPicture.asset( - Assets.loginLogo, - width: 150, - ), - ], - ), - scaffoldBody: BlocConsumer( - listener: (context, state) {}, - builder: (context, state) { - return SizedBox( - height: size.height, - width: size.width, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - SizedBox(height: size.height * 0.05), - const Text( - 'ACCESS YOUR APPS', - style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700), - ), - const SizedBox(height: 30), - Expanded( - flex: 4, - child: SizedBox( - height: size.height * 0.6, - width: size.width * 0.68, - child: GridView.builder( - itemCount: 8, - gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( - crossAxisCount: 2, - crossAxisSpacing: 20.0, - mainAxisSpacing: 20.0, - childAspectRatio: 1.5, + return PopScope( + canPop: false, + onPopInvoked: (didPop) => false, + child: WebScaffold( + enableMenuSideba: false, + appBarTitle: Row( + children: [ + SvgPicture.asset( + Assets.loginLogo, + width: 150, + ), + ], + ), + scaffoldBody: BlocConsumer( + listener: (context, state) {}, + builder: (context, state) { + final homeBloc = BlocProvider.of(context); + return SizedBox( + height: size.height, + width: size.width, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox(height: size.height * 0.05), + const Text( + 'ACCESS YOUR APPS', + style: + TextStyle(fontSize: 20, fontWeight: FontWeight.w700), + ), + const SizedBox(height: 30), + Expanded( + flex: 4, + child: SizedBox( + height: size.height * 0.6, + width: size.width * 0.68, + child: GridView.builder( + 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: () {}, - ); - }, ), ), - ), - ], - ), - ); - }), + ], + ), + ); + }), + ), ); } diff --git a/lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart b/lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart index ba11583c..0d793aa6 100644 --- a/lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart +++ b/lib/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart @@ -10,6 +10,11 @@ mixin HelperResponsiveLayout { 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) { return MediaQuery.of(context).size.width >= 1024 && MediaQuery.of(context).size.width < 1440;