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

Fixed login design

Browse Source
This commit is contained in:
Abdullah Alassaf
2024-09-01 09:49:24 +03:00
parent 36c2412234
commit 3287e43a5f
2 changed files with 91 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,8 +23,7 @@ class LoginWebPage extends StatefulWidget {
State<LoginWebPage> createState() => _LoginWebPageState(); State<LoginWebPage> createState() => _LoginWebPageState();
} }
class _LoginWebPageState extends State<LoginWebPage> class _LoginWebPageState extends State<LoginWebPage> with HelperResponsiveLayout {
with HelperResponsiveLayout {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
@ -59,8 +58,7 @@ class _LoginWebPageState extends State<LoginWebPage>
_scrollController = ScrollController(); _scrollController = ScrollController();
void _scrollToCenter() { void _scrollToCenter() {
final double middlePosition = final double middlePosition = _scrollController.position.maxScrollExtent / 2;
_scrollController.position.maxScrollExtent / 2;
_scrollController.animateTo( _scrollController.animateTo(
middlePosition, middlePosition,
duration: const Duration(seconds: 1), duration: const Duration(seconds: 1),
@ -114,16 +112,15 @@ class _LoginWebPageState extends State<LoginWebPage>
children: [ children: [
const Spacer(), const Spacer(),
Expanded( Expanded(
flex: 1, flex: 2,
child: SvgPicture.asset( child: SvgPicture.asset(
Assets.loginLogo, Assets.loginLogo,
), ),
), ),
const Spacer(), const Spacer(),
Expanded( Expanded(
flex: 3, flex: 2,
child: _buildLoginFormFields( child: _buildLoginFormFields(context, loginBloc, size),
context, loginBloc, size),
), ),
const Spacer(), const Spacer(),
], ],
@ -134,14 +131,12 @@ class _LoginWebPageState extends State<LoginWebPage>
), ),
), ),
), ),
if (state is AuthLoading) if (state is AuthLoading) const Center(child: CircularProgressIndicator())
const Center(child: CircularProgressIndicator())
], ],
); );
} }
Widget _buildLoginFormFields( Widget _buildLoginFormFields(BuildContext context, AuthBloc loginBloc, Size size) {
BuildContext context, AuthBloc loginBloc, Size size) {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1), color: Colors.white.withOpacity(0.1),
@ -151,8 +146,8 @@ class _LoginWebPageState extends State<LoginWebPage>
child: Form( child: Form(
key: loginBloc.loginFormKey, key: loginBloc.loginFormKey,
child: Padding( child: Padding(
padding: EdgeInsets.symmetric( padding:
horizontal: size.width * 0.02, vertical: size.width * 0.003), EdgeInsets.symmetric(horizontal: size.width * 0.02, vertical: size.width * 0.003),
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -180,8 +175,7 @@ class _LoginWebPageState extends State<LoginWebPage>
); );
} }
Widget _buildDropdownField( Widget _buildDropdownField(BuildContext context, AuthBloc loginBloc, Size size) {
BuildContext context, AuthBloc loginBloc, Size size) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
@ -199,8 +193,7 @@ class _LoginWebPageState extends State<LoginWebPage>
child: LayoutBuilder( child: LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
return DropdownButtonFormField<String>( return DropdownButtonFormField<String>(
value: loginBloc.regionList! value: loginBloc.regionList!.any((region) => region.id == loginBloc.regionUuid)
.any((region) => region.id == loginBloc.regionUuid)
? loginBloc.regionUuid ? loginBloc.regionUuid
: null, : null,
validator: loginBloc.validateRegion, validator: loginBloc.validateRegion,
@ -217,9 +210,10 @@ class _LoginWebPageState extends State<LoginWebPage>
), ),
hint: Text( hint: Text(
'Select your region/country', 'Select your region/country',
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context)
color: ColorsManager.grayColor, .textTheme
fontWeight: FontWeight.w400), .bodySmall!
.copyWith(color: ColorsManager.grayColor, fontWeight: FontWeight.w400),
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
isDense: true, isDense: true,
@ -228,8 +222,7 @@ class _LoginWebPageState extends State<LoginWebPage>
return DropdownMenuItem<String>( return DropdownMenuItem<String>(
value: region.id, value: region.id,
child: Container( child: Container(
constraints: constraints: BoxConstraints(maxWidth: constraints.maxWidth - 40),
BoxConstraints(maxWidth: constraints.maxWidth - 40),
child: Text( child: Text(
region.name, region.name,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -247,8 +240,7 @@ class _LoginWebPageState extends State<LoginWebPage>
selectedItemBuilder: (context) { selectedItemBuilder: (context) {
return loginBloc.regionList!.map<Widget>((region) { return loginBloc.regionList!.map<Widget>((region) {
return Container( return Container(
constraints: constraints: BoxConstraints(maxWidth: constraints.maxWidth - 40),
BoxConstraints(maxWidth: constraints.maxWidth - 40),
child: Text( child: Text(
region.name, region.name,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -288,9 +280,10 @@ class _LoginWebPageState extends State<LoginWebPage>
decoration: textBoxDecoration()!.copyWith( decoration: textBoxDecoration()!.copyWith(
errorStyle: const TextStyle(height: 0), errorStyle: const TextStyle(height: 0),
hintText: 'Enter your email address', hintText: 'Enter your email address',
hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith( hintStyle: Theme.of(context)
color: ColorsManager.grayColor, .textTheme
fontWeight: FontWeight.w400)), .bodySmall!
.copyWith(color: ColorsManager.grayColor, fontWeight: FontWeight.w400)),
style: const TextStyle(color: Colors.black), style: const TextStyle(color: Colors.black),
), ),
), ),
@ -322,18 +315,17 @@ class _LoginWebPageState extends State<LoginWebPage>
controller: loginBloc.loginPasswordController, controller: loginBloc.loginPasswordController,
decoration: textBoxDecoration()!.copyWith( decoration: textBoxDecoration()!.copyWith(
hintText: 'At least 8 characters', hintText: 'At least 8 characters',
hintStyle: Theme.of(context).textTheme.bodySmall!.copyWith( hintStyle: Theme.of(context)
color: ColorsManager.grayColor, fontWeight: FontWeight.w400), .textTheme
.bodySmall!
.copyWith(color: ColorsManager.grayColor, fontWeight: FontWeight.w400),
suffixIcon: IconButton( suffixIcon: IconButton(
onPressed: () { onPressed: () {
loginBloc.add( loginBloc.add(PasswordVisibleEvent(newValue: loginBloc.obscureText));
PasswordVisibleEvent(newValue: loginBloc.obscureText));
}, },
icon: SizedBox( icon: SizedBox(
child: SvgPicture.asset( child: SvgPicture.asset(
loginBloc.obscureText loginBloc.obscureText ? Assets.visiblePassword : Assets.invisiblePassword,
? Assets.visiblePassword
: Assets.invisiblePassword,
height: 15, height: 15,
width: 15, width: 15,
), ),
@ -361,10 +353,10 @@ class _LoginWebPageState extends State<LoginWebPage>
}, },
child: Text( child: Text(
"Forgot Password?", "Forgot Password?",
style: Theme.of(context).textTheme.bodySmall!.copyWith( style: Theme.of(context)
color: Colors.black, .textTheme
fontSize: 14, .bodySmall!
fontWeight: FontWeight.w400), .copyWith(color: Colors.black, fontSize: 14, fontWeight: FontWeight.w400),
), ),
), ),
], ],
@ -427,8 +419,7 @@ class _LoginWebPageState extends State<LoginWebPage>
); );
} }
Widget _buildSignInButton( Widget _buildSignInButton(BuildContext context, AuthBloc loginBloc, Size size) {
BuildContext context, AuthBloc loginBloc, Size size) {
return Row( return Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -469,8 +460,7 @@ class _LoginWebPageState extends State<LoginWebPage>
SizedBox( SizedBox(
child: Text( child: Text(
loginBloc.validate, loginBloc.validate,
style: const TextStyle( style: const TextStyle(fontWeight: FontWeight.w700, color: ColorsManager.red),
fontWeight: FontWeight.w700, color: ColorsManager.red),
), ),
) )
], ],

15
lib/pages/home/view/home_page_web.dart
View File

@ -15,7 +15,11 @@ class HomeWebPage extends StatelessWidget {
return PopScope( return PopScope(
canPop: false, canPop: false,
onPopInvoked: (didPop) => false, onPopInvoked: (didPop) => false,
child: WebScaffold( child: BlocConsumer<HomeBloc, HomeState>(
listener: (BuildContext context, state) {},
builder: (context, state) {
final homeBloc = BlocProvider.of<HomeBloc>(context);
return WebScaffold(
enableMenuSideba: false, enableMenuSideba: false,
appBarTitle: Row( appBarTitle: Row(
children: [ children: [
@ -25,11 +29,7 @@ class HomeWebPage extends StatelessWidget {
), ),
], ],
), ),
scaffoldBody: BlocConsumer<HomeBloc, HomeState>( scaffoldBody: SizedBox(
listener: (BuildContext context, state) {},
builder: (context, state) {
final homeBloc = BlocProvider.of<HomeBloc>(context);
return SizedBox(
height: size.height, height: size.height,
width: size.width, width: size.width,
child: Column( child: Column(
@ -72,8 +72,9 @@ class HomeWebPage extends StatelessWidget {
), ),
], ],
), ),
),
); );
}, },
))); ));
} }
} }