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),
), ),
) )
], ],

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

@ -15,65 +15,66 @@ class HomeWebPage extends StatelessWidget {
return PopScope( return PopScope(
canPop: false, canPop: false,
onPopInvoked: (didPop) => false, onPopInvoked: (didPop) => false,
child: WebScaffold( child: BlocConsumer<HomeBloc, HomeState>(
enableMenuSideba: false, listener: (BuildContext context, state) {},
appBarTitle: Row( builder: (context, state) {
children: [ final homeBloc = BlocProvider.of<HomeBloc>(context);
SvgPicture.asset( return WebScaffold(
Assets.loginLogo, enableMenuSideba: false,
width: 150, appBarTitle: Row(
), children: [
], SvgPicture.asset(
), Assets.loginLogo,
scaffoldBody: BlocConsumer<HomeBloc, HomeState>( width: 150,
listener: (BuildContext context, state) {}, ),
builder: (context, state) { ],
final homeBloc = BlocProvider.of<HomeBloc>(context); ),
return SizedBox( scaffoldBody: SizedBox(
height: size.height, height: size.height,
width: size.width, width: size.width,
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
SizedBox(height: size.height * 0.1), SizedBox(height: size.height * 0.1),
Text( Text(
'ACCESS YOUR APPS', 'ACCESS YOUR APPS',
style: Theme.of(context) style: Theme.of(context)
.textTheme .textTheme
.headlineLarge! .headlineLarge!
.copyWith(color: Colors.black, fontSize: 40), .copyWith(color: Colors.black, fontSize: 40),
), ),
const SizedBox(height: 30), const SizedBox(height: 30),
Expanded( Expanded(
flex: 4, flex: 4,
child: SizedBox( child: SizedBox(
height: size.height * 0.6, height: size.height * 0.6,
width: size.width * 0.68, width: size.width * 0.68,
child: GridView.builder( child: GridView.builder(
itemCount: 8, itemCount: 8,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4, crossAxisCount: 4,
crossAxisSpacing: 20.0, crossAxisSpacing: 20.0,
mainAxisSpacing: 20.0, mainAxisSpacing: 20.0,
childAspectRatio: 1.5, childAspectRatio: 1.5,
),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeBloc.homeItems[index].active!,
name: homeBloc.homeItems[index].title!,
img: homeBloc.homeItems[index].icon!,
onTap: () => homeBloc.homeItems[index].onPress(context),
);
},
), ),
itemBuilder: (context, index) {
return HomeCard(
index: index,
active: homeBloc.homeItems[index].active!,
name: homeBloc.homeItems[index].title!,
img: homeBloc.homeItems[index].icon!,
onTap: () => homeBloc.homeItems[index].onPress(context),
);
},
), ),
), ),
], ),
), ],
); ),
}, ),
))); );
},
));
} }
} }