Improvements on login_page.dart

design_3.0_demo_module
zaid_daoud 2 years ago
parent 1db543710e
commit e49399de45

@ -5,7 +5,7 @@
"password": "كلمة السر", "password": "كلمة السر",
"username" : "اسم المستخدم", "username" : "اسم المستخدم",
"requiredField" : "الحقل مطلوب", "requiredField" : "الحقل مطلوب",
"passwordLengthMessage" : "كلمة السر أقل من 6 خانات", "passwordLengthMessage" : "يجب أن تتكون كلمة السر من 6 خانات على الأقل",
"overview" : "نظرة عامة", "overview" : "نظرة عامة",
"myRequests" : "طلباتي", "myRequests" : "طلباتي",
"myAssets" : "ممتلكاتي", "myAssets" : "ممتلكاتي",

@ -5,7 +5,7 @@
"password" : "Password", "password" : "Password",
"username" : "Username", "username" : "Username",
"requiredField" : "Required Field", "requiredField" : "Required Field",
"passwordLengthMessage" : "Password length is less than 6 characters", "passwordLengthMessage" : "Password must has at least 6 characters",
"overview" : "Overview", "overview" : "Overview",
"myRequests" : "My Request", "myRequests" : "My Request",
"myAssets" : "My Assets", "myAssets" : "My Assets",

@ -1,3 +1,89 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/app_style/app_text_style.dart';
extension CapExtension on String {
String get toCamelCase => "${this[0].toUpperCase()}${substring(1)}";
String get inCaps => '${this[0].toUpperCase()}${substring(1)}';
String get allInCaps => toUpperCase();
String get capitalizeFirstOfEach => trim().isNotEmpty ? trim().toLowerCase().split(" ").map((str) => str.inCaps).join(" ") : "";
}
extension TextStyleExtension on String {
Widget toHeading1(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading1.copyWith(color: color ?? (context.isDark ? AppColor.backgroundLight : AppColor.neutral70), fontWeight: fontWeight),
);
Widget toHeading2(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading2.copyWith(color: color ?? (context.isDark ? AppColor.neutral30 : AppColor.neutral50), fontWeight: fontWeight),
);
Widget toHeading3(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading3.copyWith(color: color ?? (context.isDark ? AppColor.neutral30 : AppColor.neutral50), fontWeight: fontWeight),
);
Widget toHeading4(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading4.copyWith(color: color ?? (context.isDark ? AppColor.neutral30 : AppColor.neutral50), fontWeight: fontWeight),
);
Widget toHeading5(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading5.copyWith(color: color ?? (context.isDark ? AppColor.neutral30 : AppColor.neutral50), fontWeight: fontWeight),
);
Widget toHeading6(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.heading6.copyWith(color: color ?? (context.isDark ? AppColor.neutral30 : AppColor.neutral50), fontWeight: fontWeight),
);
Widget toBody1(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.body1.copyWith(color: color ?? (context.isDark ? AppColor.neutral10 : AppColor.neutral20), fontWeight: fontWeight),
);
Widget toBody2(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.body2.copyWith(color: color ?? (context.isDark ? AppColor.neutral10 : AppColor.neutral20), fontWeight: fontWeight),
);
Widget toTiny(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.tiny.copyWith(color: color ?? (context.isDark ? AppColor.neutral10 : AppColor.neutral20), fontWeight: fontWeight),
);
Widget toOverline(BuildContext context, {Color color, int maxLines, FontWeight fontWeight}) => Text(
this,
maxLines: (maxLines != null && maxLines > 0) ? maxLines : null,
style: AppTextStyle.overline.copyWith(color: color ?? (context.isDark ? AppColor.neutral10 : AppColor.neutral20), fontWeight: fontWeight),
);
}
extension FilesExtension on String {
SvgPicture toSvgAsset({
double width,
double height,
Color color,
BoxFit fit = BoxFit.contain,
}) =>
SvgPicture.asset("assets/images/$this.svg", width: width, height: height, color: color, fit: fit);
Image toPngAsset({
double width,
double height,
Color color,
BoxFit fit = BoxFit.contain,
}) =>
Image.asset("assets/images/$this.png", width: width, height: height, color: color, fit: fit);
}
// //
// import 'package:flutter/cupertino.dart'; // import 'package:flutter/cupertino.dart';
// import 'package:intl/intl.dart'; // import 'package:intl/intl.dart';

@ -0,0 +1,86 @@
import 'package:flutter/material.dart';
import 'package:test_sa/extensions/int_extensions.dart';
class AppTextStyle {
static const fontFamily = "Poppins";
AppTextStyle._();
static final TextStyle heading1 = TextStyle(
height: 1.5,
fontSize: 32.toScreenWidth,
letterSpacing: -0.5,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
decoration: TextDecoration.none,
);
static final TextStyle heading2 = TextStyle(
height: 1.5,
fontSize: 28.toScreenWidth,
letterSpacing: -0.5,
fontFamily: fontFamily,
fontWeight: FontWeight.w700,
decoration: TextDecoration.none,
);
static final TextStyle heading3 = TextStyle(
height: 1.5,
fontSize: 24.toScreenWidth,
letterSpacing: -0.5,
fontFamily: fontFamily,
fontWeight: FontWeight.w600,
decoration: TextDecoration.none,
);
static final TextStyle heading4 = TextStyle(
height: 1.5,
fontSize: 21.toScreenWidth,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
);
static final TextStyle heading5 = TextStyle(
height: 1.5,
fontSize: 19.toScreenWidth,
letterSpacing: 0,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
);
static final TextStyle heading6 = TextStyle(
height: 1.5,
fontSize: 16.toScreenWidth,
letterSpacing: 0,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
);
static final TextStyle body1 = TextStyle(
height: 1.5,
fontSize: 14.toScreenWidth,
letterSpacing: 0,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
decoration: TextDecoration.none,
);
static final TextStyle body2 = TextStyle(
height: 1.5,
fontSize: 12.toScreenWidth,
letterSpacing: 0,
fontFamily: fontFamily,
fontWeight: FontWeight.w400,
decoration: TextDecoration.none,
);
static final TextStyle tiny = TextStyle(
height: 1.5,
fontSize: 11.toScreenWidth,
letterSpacing: 0,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
);
static final TextStyle overline = TextStyle(
height: 1.5,
fontSize: 9.toScreenWidth,
letterSpacing: 0.5,
fontFamily: fontFamily,
fontWeight: FontWeight.w500,
decoration: TextDecoration.none,
);
}

@ -1,10 +1,11 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/app_style/app_text_style.dart';
class AppThemes { class AppThemes {
AppThemes._(); AppThemes._();
static ThemeData lightTheme = ThemeData.light().copyWith( static ThemeData lightTheme = ThemeData.light().copyWith(
textTheme: ThemeData.light().textTheme.apply(fontFamily: "Poppins"), textTheme: ThemeData.light().textTheme.apply(fontFamily: AppTextStyle.fontFamily),
primaryColor: AppColor.primary50, primaryColor: AppColor.primary50,
indicatorColor: AppColor.primary50, indicatorColor: AppColor.primary50,
scaffoldBackgroundColor: AppColor.backgroundLight, scaffoldBackgroundColor: AppColor.backgroundLight,
@ -32,7 +33,7 @@ class AppThemes {
); );
static ThemeData darkTheme = ThemeData.dark().copyWith( static ThemeData darkTheme = ThemeData.dark().copyWith(
textTheme: ThemeData.dark().textTheme.apply(fontFamily: "Poppins"), textTheme: ThemeData.dark().textTheme.apply(fontFamily: AppTextStyle.fontFamily),
primaryColor: AppColor.primary50, primaryColor: AppColor.primary50,
indicatorColor: AppColor.primary50, indicatorColor: AppColor.primary50,
scaffoldBackgroundColor: AppColor.backgroundDark, scaffoldBackgroundColor: AppColor.backgroundDark,

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/string_extensions.dart';
import 'package:test_sa/models/enums/translation_keys.dart'; import 'package:test_sa/models/enums/translation_keys.dart';
class AppFilledButton extends StatelessWidget { class AppFilledButton extends StatelessWidget {
@ -24,11 +25,12 @@ class AppFilledButton extends StatelessWidget {
), ),
child: ElevatedButton( child: ElevatedButton(
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
elevation: 0,
padding: const EdgeInsets.symmetric(vertical: 16), padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
), ),
onPressed: onPressed, onPressed: onPressed,
child: Text(context.translate(label)), child: context.translate(label).toHeading6(context, color: Theme.of(context).floatingActionButtonTheme.foregroundColor),
), ),
), ),
); );

@ -3,7 +3,7 @@ import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/models/enums/translation_keys.dart'; import 'package:test_sa/models/enums/translation_keys.dart';
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/views/app_style/sizing.dart'; import 'package:test_sa/new_views/app_style/app_text_style.dart';
class AppTextFormField extends StatefulWidget { class AppTextFormField extends StatefulWidget {
final Function(String) onSaved; final Function(String) onSaved;
@ -21,7 +21,7 @@ class AppTextFormField extends StatefulWidget {
final FocusNode node; final FocusNode node;
final Widget suffixIcon; final Widget suffixIcon;
final IconData prefixIconData; final IconData prefixIconData;
final double prefixIconSize; final int prefixIconSize;
final TextEditingController controller; final TextEditingController controller;
final TextInputAction textInputAction; final TextInputAction textInputAction;
final VoidCallback onAction; final VoidCallback onAction;
@ -63,43 +63,49 @@ class _AppTextFormFieldState extends State<AppTextFormField> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final border = UnderlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(10)); final border = UnderlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(10));
return TextFormField( return Container(
focusNode: widget.node, decoration: BoxDecoration(
enabled: widget.enable, borderRadius: BorderRadius.circular(10),
onSaved: widget.onSaved, boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
initialValue: widget.controller != null ? null : widget.initialValue, ),
validator: widget.validator, child: TextFormField(
onChanged: widget.onChange, focusNode: widget.node,
obscureText: widget.obscureText ?? false, enabled: widget.enable,
keyboardType: widget.textInputType, onSaved: widget.onSaved,
maxLines: widget.textInputType == TextInputType.multiline ? null : 1, initialValue: widget.controller != null ? null : widget.initialValue,
obscuringCharacter: "*", validator: widget.validator,
controller: widget.controller, onChanged: widget.onChange,
textInputAction: widget.textInputType == TextInputType.multiline ? null : widget.textInputAction ?? TextInputAction.next, obscureText: widget.obscureText ?? false,
onEditingComplete: widget.onAction ?? () => FocusScope.of(context).nextFocus(), keyboardType: widget.textInputType,
style: Theme.of(context).textTheme.bodyLarge, maxLines: widget.textInputType == TextInputType.multiline ? null : 1,
decoration: InputDecoration( obscuringCharacter: "*",
border: border, controller: widget.controller,
disabledBorder: border, textInputAction: widget.textInputType == TextInputType.multiline ? null : widget.textInputAction ?? TextInputAction.next,
focusedBorder: border, onEditingComplete: widget.onAction ?? () => FocusScope.of(context).nextFocus(),
enabledBorder: border, style: AppTextStyle.body1?.copyWith(fontWeight: FontWeight.w500),
errorBorder: border, decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 8.toScreenHeight, horizontal: 16.toScreenWidth), border: border,
constraints: const BoxConstraints(), disabledBorder: border,
suffixIconConstraints: const BoxConstraints(minWidth: 0), focusedBorder: border,
filled: true, enabledBorder: border,
fillColor: context.isDark ? AppColor.neutral50 : Colors.white, errorBorder: border,
errorStyle: Theme.of(context).textTheme.bodySmall?.copyWith(color: context.isDark ? AppColor.red50 : AppColor.red60), contentPadding: EdgeInsets.symmetric(vertical: 8.toScreenHeight, horizontal: 16.toScreenWidth),
floatingLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(color: context.isDark ? null : AppColor.neutral20, fontWeight: FontWeight.w500), constraints: const BoxConstraints(),
hintText: widget.hintText != null ? context.translate(widget.hintText) : null, suffixIconConstraints: const BoxConstraints(minWidth: 0),
labelText: widget.labelText != null ? context.translate(widget.labelText) : null, filled: true,
suffixIcon: widget.prefixIconData == null fillColor: context.isDark ? AppColor.neutral50 : Colors.white,
? null errorStyle: AppTextStyle.tiny.copyWith(color: context.isDark ? AppColor.red50 : AppColor.red60),
: Icon( floatingLabelStyle: AppTextStyle.body1?.copyWith(fontWeight: FontWeight.w500, color: context.isDark ? null : AppColor.neutral20),
widget.prefixIconData, hintText: widget.hintText != null ? context.translate(widget.hintText) : null,
size: widget.prefixIconSize == null ? 20 * AppStyle.getScaleFactor(context) : (widget.prefixIconSize - 10) * AppStyle.getScaleFactor(context), labelText: widget.labelText != null ? context.translate(widget.labelText) : null,
color: AppColor.neutral70, suffixIcon: widget.prefixIconData == null
), ? null
: Icon(
widget.prefixIconData,
size: widget.prefixIconSize == null ? 20.toScreenWidth : (widget.prefixIconSize - 10).toScreenWidth,
color: AppColor.neutral70,
),
),
), ),
); );
} }

@ -1,9 +1,9 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluttertoast/fluttertoast.dart'; import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:test_sa/extensions/context_extension.dart'; import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/string_extensions.dart' show FilesExtension, TextStyleExtension;
import 'package:test_sa/models/enums/translation_keys.dart'; import 'package:test_sa/models/enums/translation_keys.dart';
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_lazy_loading.dart'; import 'package:test_sa/new_views/common_widgets/app_lazy_loading.dart';
@ -51,19 +51,10 @@ class _LoginPageState extends State<LoginPage> {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Hero( Hero(tag: "logo", child: "logo".toSvgAsset(height: 64.toScreenHeight)),
tag: "logo",
child: SvgPicture.asset("assets/images/logo.svg", height: 64.toScreenHeight),
),
64.height, 64.height,
Text( context.translate(TranslationKeys.login).toHeading2(context, fontWeight: FontWeight.w600, color: context.isDark ? AppColor.primary50 : AppColor.neutral50),
context.translate(TranslationKeys.login), context.translate(TranslationKeys.enterCredsToLogin).toHeading6(context, color: context.isDark ? AppColor.neutral10 : AppColor.neutral20),
style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: context.isDark ? AppColor.primary50 : AppColor.neutral50, fontWeight: FontWeight.w600),
),
Text(
context.translate(TranslationKeys.enterCredsToLogin),
style: Theme.of(context).textTheme.titleMedium?.copyWith(color: context.isDark ? AppColor.neutral10 : AppColor.neutral20, fontWeight: FontWeight.w500),
),
32.height, 32.height,
AppTextFormField( AppTextFormField(
initialValue: _user?.userName, initialValue: _user?.userName,
@ -95,10 +86,7 @@ class _LoginPageState extends State<LoginPage> {
onTap: () { onTap: () {
/// TODO [zaid] : push to another screen /// TODO [zaid] : push to another screen
}, },
child: Text( child: context.translate(TranslationKeys.forgotPassword).toBody1(context, color: AppColor.primary50, fontWeight: FontWeight.w500),
context.translate(TranslationKeys.forgotPassword),
style: Theme.of(context).textTheme.bodyMedium?.copyWith(color: AppColor.primary50, fontWeight: FontWeight.w500),
),
), ),
), ),
], ],

Loading…
Cancel
Save