fixed some login design bug in table and desktop
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 210 KiB |
@@ -6,6 +6,7 @@ class AssetsManager {
|
||||
|
||||
// login page
|
||||
static const logo = 'assets/pngs/logo.png';
|
||||
static const webLoginImage = 'assets/pngs/web_login_image.png';
|
||||
static const userIcon = 'assets/svgs/user_icon.svg';
|
||||
static const passwordIcon = 'assets/svgs/password_icon.svg';
|
||||
static const passwordVisibility = 'assets/svgs/password_visibility.svg';
|
||||
|
||||
@@ -128,4 +128,5 @@ class AppColors {
|
||||
static const Color lightBlue = Color(0xFFe8ecfc);
|
||||
static const Color cyanAqua = Color(0xFFd6f4f8);
|
||||
static const Color cyanTeal = Color(0xFF24A6B4);
|
||||
static const Color white = Color(0xFFFFFFFF);
|
||||
}
|
||||
|
||||
@@ -20,68 +20,90 @@ class LoginDesktopPage extends StatelessWidget {
|
||||
body: Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.0.w()),
|
||||
child: SizedBox(
|
||||
width: 526,
|
||||
child: Consumer<AuthViewModel>(
|
||||
builder: (context, viewModel, _) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
LoginLogo(width: 190.0.w(), height: 88.0.h()),
|
||||
SizedBox(height: 32.0.h()),
|
||||
const LoginTitle(),
|
||||
SizedBox(height: 32.0.h()),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 526,
|
||||
child: Consumer<AuthViewModel>(
|
||||
builder: (context, viewModel, _) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
LoginLogo(width: 190.0.w(), height: 88.0.h()),
|
||||
SizedBox(height: 32.0.h()),
|
||||
const LoginTitle(),
|
||||
SizedBox(height: 32.0.h()),
|
||||
LoginTextField(
|
||||
controller: viewModel.usernameController,
|
||||
focusNode: viewModel.usernameFocus,
|
||||
label: AppStrings.usernameLabel,
|
||||
iconPath: AssetsManager.userIcon,
|
||||
fieldHeight: 60.0.h(),
|
||||
borderRedus: 12,
|
||||
prefixIconPadding: 7.0.w(),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
LoginTextField(
|
||||
controller: viewModel.passwordController,
|
||||
focusNode: viewModel.passwordFocus,
|
||||
label: AppStrings.passwordLabel,
|
||||
iconPath: AssetsManager.passwordIcon,
|
||||
prefixIconPadding: 7.0.w(),
|
||||
isPassword: true,
|
||||
obscureText: viewModel.obscurePassword,
|
||||
fieldHeight: 60.0.h(),
|
||||
onToggleVisibility:
|
||||
viewModel.togglePasswordVisibility,
|
||||
borderRedus: 12,
|
||||
),
|
||||
SizedBox(height: 32.0.h()),
|
||||
|
||||
LoginTextField(
|
||||
controller: viewModel.usernameController,
|
||||
focusNode: viewModel.usernameFocus,
|
||||
label: AppStrings.usernameLabel,
|
||||
iconPath: AssetsManager.userIcon,
|
||||
fieldHeight: 60.0.h(),
|
||||
borderRedus: 4.0.w(),
|
||||
prefixIconPadding: 4.0.w(),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
|
||||
LoginTextField(
|
||||
controller: viewModel.passwordController,
|
||||
focusNode: viewModel.passwordFocus,
|
||||
label: AppStrings.passwordLabel,
|
||||
iconPath: AssetsManager.passwordIcon,
|
||||
prefixIconPadding: 4.0.w(),
|
||||
isPassword: true,
|
||||
obscureText: viewModel.obscurePassword,
|
||||
fieldHeight: 60.0.h(),
|
||||
onToggleVisibility: viewModel.togglePasswordVisibility,
|
||||
borderRedus: 4.0.w(),
|
||||
),
|
||||
SizedBox(height: 32.0.h()),
|
||||
|
||||
if (viewModel.isLoading)
|
||||
const CircularProgressIndicator()
|
||||
else
|
||||
BaseButton(
|
||||
isEnabled: viewModel.isLoginEnabled,
|
||||
onPressed:
|
||||
viewModel.isLoginEnabled
|
||||
? () async {
|
||||
await viewModel.login();
|
||||
if (viewModel.loggedInUser != null) {
|
||||
HomeRouteData().go(context);
|
||||
} else if (viewModel.errorMessage != null) {
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(viewModel.errorMessage!),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
: null,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
if (viewModel.isLoading)
|
||||
BaseButton(
|
||||
isEnabled: false,
|
||||
onPressed: null,
|
||||
isLoading: true,
|
||||
)
|
||||
else
|
||||
BaseButton(
|
||||
isEnabled: viewModel.isLoginEnabled,
|
||||
onPressed:
|
||||
viewModel.isLoginEnabled
|
||||
? () async {
|
||||
await viewModel.login();
|
||||
if (viewModel.loggedInUser != null) {
|
||||
HomeRouteData().go(context);
|
||||
} else if (viewModel.errorMessage !=
|
||||
null) {
|
||||
ScaffoldMessenger.of(
|
||||
context,
|
||||
).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(
|
||||
viewModel.errorMessage!,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
: null,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 20.0.h()),
|
||||
child: Image.asset(
|
||||
AssetsManager.webLoginImage,
|
||||
width: 796.0.w(),
|
||||
height: 944.0.h(),
|
||||
fit: BoxFit.fitHeight,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -51,7 +51,11 @@ class LoginMobilePage extends StatelessWidget {
|
||||
SizedBox(height: 32.0.h()),
|
||||
|
||||
if (viewModel.isLoading)
|
||||
const CircularProgressIndicator()
|
||||
BaseButton(
|
||||
isEnabled: false,
|
||||
onPressed: null,
|
||||
isLoading: true,
|
||||
)
|
||||
else
|
||||
BaseButton(
|
||||
isEnabled: viewModel.isLoginEnabled,
|
||||
|
||||
@@ -38,7 +38,7 @@ class LoginTabletPage extends StatelessWidget {
|
||||
label: AppStrings.usernameLabel,
|
||||
iconPath: AssetsManager.userIcon,
|
||||
fieldHeight: 60.0.h(),
|
||||
borderRedus: 4.0.w(),
|
||||
borderRedus: 12,
|
||||
prefixIconPadding: 4.0.w(),
|
||||
),
|
||||
SizedBox(height: 16.0.h()),
|
||||
@@ -53,12 +53,16 @@ class LoginTabletPage extends StatelessWidget {
|
||||
obscureText: viewModel.obscurePassword,
|
||||
fieldHeight: 60.0.h(),
|
||||
onToggleVisibility: viewModel.togglePasswordVisibility,
|
||||
borderRedus: 4.0.w(),
|
||||
borderRedus: 12,
|
||||
),
|
||||
SizedBox(height: 32.0.h()),
|
||||
|
||||
if (viewModel.isLoading)
|
||||
const CircularProgressIndicator()
|
||||
BaseButton(
|
||||
isEnabled: false,
|
||||
onPressed: null,
|
||||
isLoading: true,
|
||||
)
|
||||
else
|
||||
BaseButton(
|
||||
isEnabled: viewModel.isLoginEnabled,
|
||||
|
||||
@@ -15,6 +15,7 @@ class BaseButton extends StatelessWidget {
|
||||
final double? borderRadius;
|
||||
final double? elevation;
|
||||
final double? width;
|
||||
final bool isLoading;
|
||||
|
||||
const BaseButton({
|
||||
required this.isEnabled,
|
||||
@@ -27,39 +28,59 @@ class BaseButton extends StatelessWidget {
|
||||
this.borderRadius,
|
||||
this.elevation,
|
||||
this.width,
|
||||
this.isLoading = false,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: width ?? double.infinity,
|
||||
height: 55.0.h(),
|
||||
child: ElevatedButton(
|
||||
onPressed: isEnabled ? onPressed : null,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor:
|
||||
backgroundColor ??
|
||||
(isEnabled ? AppColors.mainBlue : AppColors.backgroundColor),
|
||||
foregroundColor: textColor ?? AppColors.backgroundColor,
|
||||
elevation: elevation ?? 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()),
|
||||
side: BorderSide(
|
||||
color: borderColor ?? Colors.transparent,
|
||||
width: borderWidth ?? 0,
|
||||
return isLoading
|
||||
? Container(
|
||||
width: double.infinity,
|
||||
height: 55.0.h(),
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.mainBlue,
|
||||
borderRadius: BorderRadius.circular(28.0.w()),
|
||||
),
|
||||
child: Center(
|
||||
child: SizedBox(
|
||||
width: 30.0.w(),
|
||||
height: 30.0.w(),
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 4.0,
|
||||
color: AppColors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
text ?? AppStrings.loginButton,
|
||||
style: TextStyle(
|
||||
fontSize: 16.0.sp(),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor ?? AppColors.backgroundColor,
|
||||
)
|
||||
: SizedBox(
|
||||
width: width ?? double.infinity,
|
||||
height: 55.0.h(),
|
||||
child: ElevatedButton(
|
||||
onPressed: isEnabled ? onPressed : null,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor:
|
||||
backgroundColor ??
|
||||
(isEnabled ? AppColors.mainBlue : AppColors.backgroundColor),
|
||||
foregroundColor: textColor ?? AppColors.backgroundColor,
|
||||
elevation: elevation ?? 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadius ?? 28.0.w()),
|
||||
side: BorderSide(
|
||||
color: borderColor ?? Colors.transparent,
|
||||
width: borderWidth ?? 0,
|
||||
),
|
||||
),
|
||||
),
|
||||
child: Text(
|
||||
text ?? AppStrings.loginButton,
|
||||
style: TextStyle(
|
||||
fontSize: 16.0.sp(),
|
||||
fontWeight: FontWeight.bold,
|
||||
color: textColor ?? AppColors.backgroundColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,6 +17,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "7.7.1"
|
||||
archive:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: archive
|
||||
sha256: "2fde1607386ab523f7a36bb3e7edb43bd58e6edaf2ffb29d8a6d578b297fdbbd"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.0.7"
|
||||
args:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -145,6 +153,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.19.1"
|
||||
color:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: color
|
||||
sha256: ddcdf1b3badd7008233f5acffaf20ca9f5dc2cd0172b75f68f24526a5f5725cb
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.0.0"
|
||||
convert:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -177,6 +193,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "3.1.1"
|
||||
dartx:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: dartx
|
||||
sha256: "8b25435617027257d43e6508b5fe061012880ddfdaa75a71d607c3de2a13d244"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.2.0"
|
||||
dio:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
@@ -230,6 +254,22 @@ packages:
|
||||
description: flutter
|
||||
source: sdk
|
||||
version: "0.0.0"
|
||||
flutter_gen_core:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: flutter_gen_core
|
||||
sha256: eda54fdc5de08e7eeea663eb8442aafc8660b5a13fda4e0c9e572c64e50195fb
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "5.11.0"
|
||||
flutter_gen_runner:
|
||||
dependency: "direct dev"
|
||||
description:
|
||||
name: flutter_gen_runner
|
||||
sha256: "669bf8b7a9b4acbdcb7fcc5e12bf638aca19acedf43341714cbca3bf3a219521"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "5.11.0"
|
||||
flutter_lints:
|
||||
dependency: "direct dev"
|
||||
description:
|
||||
@@ -312,6 +352,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.3.2"
|
||||
hashcodes:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: hashcodes
|
||||
sha256: "80f9410a5b3c8e110c4b7604546034749259f5d6dcca63e0d3c17c9258f1a651"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.0.0"
|
||||
http:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -336,6 +384,22 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.1.2"
|
||||
image:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: image
|
||||
sha256: "4e973fcf4caae1a4be2fa0a13157aa38a8f9cb049db6529aa00b4d71abc4d928"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "4.5.4"
|
||||
image_size_getter:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: image_size_getter
|
||||
sha256: "7c26937e0ae341ca558b7556591fd0cc456fcc454583b7cb665d2f03e93e590f"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.4.1"
|
||||
io:
|
||||
dependency: transitive
|
||||
description:
|
||||
@@ -536,6 +600,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "1.5.1"
|
||||
posix:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: posix
|
||||
sha256: "6323a5b0fa688b6a010df4905a56b00181479e6d10534cecfecede2aa55add61"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "6.0.3"
|
||||
provider:
|
||||
dependency: "direct main"
|
||||
description:
|
||||
@@ -709,6 +781,14 @@ packages:
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "0.7.4"
|
||||
time:
|
||||
dependency: transitive
|
||||
description:
|
||||
name: time
|
||||
sha256: "370572cf5d1e58adcb3e354c47515da3f7469dac3a95b447117e728e7be6f461"
|
||||
url: "https://pub.dev"
|
||||
source: hosted
|
||||
version: "2.1.5"
|
||||
timing:
|
||||
dependency: transitive
|
||||
description:
|
||||
|
||||
Reference in New Issue
Block a user