From 30a9a23b866727ba2d923362a6ac1421a85952a8 Mon Sep 17 00:00:00 2001 From: zypherift Date: Wed, 1 May 2024 22:58:30 +0200 Subject: [PATCH] huge progess, start the login buttons and etc on the bottom --- .../lib/screens/login/login_screen.dart | 519 +++++++++--------- 1 file changed, 271 insertions(+), 248 deletions(-) diff --git a/refilc_mobile_ui/lib/screens/login/login_screen.dart b/refilc_mobile_ui/lib/screens/login/login_screen.dart index 21ccb80..30b9870 100644 --- a/refilc_mobile_ui/lib/screens/login/login_screen.dart +++ b/refilc_mobile_ui/lib/screens/login/login_screen.dart @@ -1,5 +1,6 @@ // import 'dart:async'; +import 'package:flutter/widgets.dart'; import 'package:refilc/api/client.dart'; import 'package:refilc/api/login.dart'; import 'package:refilc/theme/colors/colors.dart'; @@ -97,8 +98,6 @@ class LoginScreenState extends State { height: MediaQuery.of(context).size.height, child: SafeArea( child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, children: [ // app icon Padding( @@ -127,257 +126,281 @@ class LoginScreenState extends State { ), ], )), - Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, + Stack( + alignment: Alignment.bottomCenter, children: [ - const SizedBox(height: 21), - CarouselSlider( - options: CarouselOptions( - height: MediaQuery.of(context).size.height, - viewportFraction: 1, - autoPlay: true, - autoPlayInterval: const Duration(seconds: 6), - pauseAutoPlayOnTouch: true), - items: [1, 2, 3, 4].map((i) { - return Builder( - builder: (BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Padding( - padding: - const EdgeInsets.only(left: 24), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - mainAxisAlignment: - MainAxisAlignment.start, - children: [ - Text( - "welcome_title_$i".i18n, - style: const TextStyle( - color: Color(0xFF050B15), - fontSize: 19, - fontFamily: 'Montserrat', - fontWeight: FontWeight.w700, - height: 1.3), - ), - const SizedBox( - height: 14.375), //meth - Padding( - padding: const EdgeInsets.only( - right: 20), - child: Text( - "welcome_text_$i".i18n, - style: const TextStyle( - color: Color(0xFF050B15), - fontFamily: 'FigTree', - fontWeight: FontWeight.w500, - fontSize: 17, - height: 1.3), - ), - ), - ], - )), - const SizedBox(height: 15.625), - Padding( - padding: const EdgeInsets.only( - left: 16, right: 16), - child: Image.asset( - 'assets/images/showcase$i.png', - fit: BoxFit.fitWidth)), - ], + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + const SizedBox(height: 21), + CarouselSlider( + options: CarouselOptions( + height: MediaQuery.of(context).size.height, + viewportFraction: 1, + autoPlay: true, + autoPlayInterval: const Duration(seconds: 6), + pauseAutoPlayOnTouch: true), + items: [1, 2, 3, 4].map((i) { + return Builder( + builder: (BuildContext context) { + return Column( + crossAxisAlignment: + CrossAxisAlignment.start, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Padding( + padding: + const EdgeInsets.only(left: 24), + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text( + "welcome_title_$i".i18n, + style: const TextStyle( + color: Color(0xFF050B15), + fontSize: 19, + fontFamily: 'Montserrat', + fontWeight: + FontWeight.w700, + height: 1.3), + ), + const SizedBox( + height: 14.375), //meth + Padding( + padding: + const EdgeInsets.only( + right: 20), + child: Text( + "welcome_text_$i".i18n, + style: const TextStyle( + color: + Color(0xFF050B15), + fontFamily: 'FigTree', + fontWeight: + FontWeight.w500, + fontSize: 17, + height: 1.3), + ), + ), + ], + )), + const SizedBox(height: 15.625), + Padding( + padding: const EdgeInsets.only( + left: 16, right: 16), + child: Image.asset( + 'assets/images/showcase$i.png')) + ], + ); + }, ); - }, - ); - }).toList(), + }).toList(), + ), + ], ), + Container( + height: 250, + width: 250, + decoration: const BoxDecoration( + color: Color.fromARGB(255, 107, 107, 107)), + child: Column( + children: [ + Padding( + padding: const EdgeInsets.only(bottom: 6.0), + child: Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Text( + "username".i18n, + maxLines: 1, + style: TextStyle( + color: AppColors.of(context) + .loginPrimary, + fontWeight: FontWeight.w500, + fontSize: 12.0, + ), + ), + ), + Expanded( + child: Text( + "usernameHint".i18n, + maxLines: 1, + textAlign: TextAlign.right, + style: TextStyle( + color: AppColors.of(context) + .loginSecondary, + fontWeight: FontWeight.w500, + fontSize: 12.0, + ), + ), + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.only(bottom: 12.0), + child: LoginInput( + style: LoginInputStyle.username, + controller: usernameController, + ), + ), + ], + )) + // Column( + // //login buttons and ui starts here + // mainAxisAlignment: MainAxisAlignment.end, + // crossAxisAlignment: CrossAxisAlignment.end, + // children: [ + // Padding( + // padding: const EdgeInsets.only( + // left: 22.0, + // right: 22.0, + // top: 0.0, + // ), + // child: AutofillGroup( + // child: Column( + // crossAxisAlignment: CrossAxisAlignment.end, + // children: [ + // // username + + // // password + // Padding( + // padding: + // const EdgeInsets.only(bottom: 6.0), + // child: Row( + // mainAxisAlignment: + // MainAxisAlignment.spaceBetween, + // children: [ + // Expanded( + // child: Text( + // "password".i18n, + // maxLines: 1, + // style: TextStyle( + // color: AppColors.of(context) + // .loginPrimary, + // fontWeight: FontWeight.w500, + // fontSize: 12.0, + // ), + // ), + // ), + // Expanded( + // child: Text( + // "passwordHint".i18n, + // maxLines: 1, + // textAlign: TextAlign.right, + // style: TextStyle( + // color: AppColors.of(context) + // .loginSecondary, + // fontWeight: FontWeight.w500, + // fontSize: 12.0, + // ), + // ), + // ), + // ], + // ), + // ), + // Padding( + // padding: + // const EdgeInsets.only(bottom: 12.0), + // child: LoginInput( + // style: LoginInputStyle.password, + // controller: passwordController, + // ), + // ), + + // // school + // Padding( + // padding: + // const EdgeInsets.only(bottom: 6.0), + // child: Text( + // "school".i18n, + // maxLines: 1, + // style: TextStyle( + // color: AppColors.of(context) + // .loginPrimary, + // fontWeight: FontWeight.w500, + // fontSize: 12.0, + // ), + // ), + // ), + // SchoolInput( + // scroll: _scrollController, + // controller: schoolController, + // ), + // ], + // ), + // ), + // ), + // Padding( + // padding: const EdgeInsets.only( + // top: 35.0, + // left: 22.0, + // right: 22.0, + // ), + // child: Visibility( + // visible: _loginState != LoginState.inProgress, + // replacement: const Padding( + // padding: EdgeInsets.symmetric(vertical: 6.0), + // child: CircularProgressIndicator( + // valueColor: AlwaysStoppedAnimation( + // Colors.white), + // ), + // ), + // child: LoginButton( + // child: Text("login".i18n, + // maxLines: 1, + // style: const TextStyle( + // fontWeight: FontWeight.bold, + // fontSize: 20.0, + // )), + // onPressed: () => _loginAPI(context: context), + // ), + // ), + // ), + // ], + // ), ], - ) - // // inputs - // Padding( - // padding: const EdgeInsets.only( - // left: 22.0, - // right: 22.0, - // top: 0.0, - // ), - // child: AutofillGroup( - // child: Column( - // crossAxisAlignment: CrossAxisAlignment.start, - // children: [ - // // username - // Padding( - // padding: const EdgeInsets.only(bottom: 6.0), - // child: Row( - // mainAxisAlignment: MainAxisAlignment.spaceBetween, - // children: [ - // Expanded( - // child: Text( - // "username".i18n, - // maxLines: 1, - // style: TextStyle( - // color: AppColors.of(context).loginPrimary, - // fontWeight: FontWeight.w500, - // fontSize: 12.0, - // ), - // ), - // ), - // Expanded( - // child: Text( - // "usernameHint".i18n, - // maxLines: 1, - // textAlign: TextAlign.right, - // style: TextStyle( - // color: - // AppColors.of(context).loginSecondary, - // fontWeight: FontWeight.w500, - // fontSize: 12.0, - // ), - // ), - // ), - // ], - // ), - // ), - // Padding( - // padding: const EdgeInsets.only(bottom: 12.0), - // child: LoginInput( - // style: LoginInputStyle.username, - // controller: usernameController, - // ), - // ), + ), - // // password - // Padding( - // padding: const EdgeInsets.only(bottom: 6.0), - // child: Row( - // mainAxisAlignment: MainAxisAlignment.spaceBetween, - // children: [ - // Expanded( - // child: Text( - // "password".i18n, - // maxLines: 1, - // style: TextStyle( - // color: AppColors.of(context).loginPrimary, - // fontWeight: FontWeight.w500, - // fontSize: 12.0, - // ), - // ), - // ), - // Expanded( - // child: Text( - // "passwordHint".i18n, - // maxLines: 1, - // textAlign: TextAlign.right, - // style: TextStyle( - // color: - // AppColors.of(context).loginSecondary, - // fontWeight: FontWeight.w500, - // fontSize: 12.0, - // ), - // ), - // ), - // ], - // ), - // ), - // Padding( - // padding: const EdgeInsets.only(bottom: 12.0), - // child: LoginInput( - // style: LoginInputStyle.password, - // controller: passwordController, - // ), - // ), - - // // school - // Padding( - // padding: const EdgeInsets.only(bottom: 6.0), - // child: Text( - // "school".i18n, - // maxLines: 1, - // style: TextStyle( - // color: AppColors.of(context).loginPrimary, - // fontWeight: FontWeight.w500, - // fontSize: 12.0, - // ), - // ), - // ), - // SchoolInput( - // scroll: _scrollController, - // controller: schoolController, - // ), - // ], - // ), - // ), - // ), - - // // login button - // Padding( - // padding: const EdgeInsets.only( - // top: 35.0, - // left: 22.0, - // right: 22.0, - // ), - // child: Visibility( - // visible: _loginState != LoginState.inProgress, - // replacement: const Padding( - // padding: EdgeInsets.symmetric(vertical: 6.0), - // child: CircularProgressIndicator( - // valueColor: - // AlwaysStoppedAnimation(Colors.white), - // ), - // ), - // child: LoginButton( - // child: Text("login".i18n, - // maxLines: 1, - // style: const TextStyle( - // fontWeight: FontWeight.bold, - // fontSize: 20.0, - // )), - // onPressed: () => _loginAPI(context: context), - // ), - // ), - // ), - - // // error messages - // if (_loginState == LoginState.missingFields || - // _loginState == LoginState.invalidGrant || - // _loginState == LoginState.failed) - // Padding( - // padding: const EdgeInsets.only( - // top: 8.0, left: 12.0, right: 12.0), - // child: Text( - // [ - // "missing_fields", - // "invalid_grant", - // "error" - // ][_loginState.index] - // .i18n, - // style: const TextStyle( - // color: Colors.red, - // fontWeight: FontWeight.w500, - // ), - // textAlign: TextAlign.center, - // ), - // ), - // const SizedBox(height: 22.0), - - // // privacy policy - // GestureDetector( - // onTap: () => PrivacyView.show(context), - // child: Text( - // 'privacy'.i18n, - // style: TextStyle( - // color: AppColors.of(context).loginSecondary, - // fontWeight: FontWeight.w500, - // fontSize: 14.0, - // ), - // ), - // ), - - // const Spacer( - // flex: 1, - // ), + if (_loginState == LoginState.missingFields || + _loginState == LoginState.invalidGrant || + _loginState == LoginState.failed) + Padding( + padding: const EdgeInsets.only( + top: 8.0, left: 12.0, right: 12.0), + child: Text( + [ + "missing_fields", + "invalid_grant", + "error" + ][_loginState.index] + .i18n, + style: const TextStyle( + color: Colors.red, + fontWeight: FontWeight.w500, + ), + textAlign: TextAlign.center, + ), + ), + // privacy policy + GestureDetector( + onTap: () => PrivacyView.show(context), + child: Text( + 'privacy'.i18n, + style: TextStyle( + color: AppColors.of(context).loginSecondary, + fontWeight: FontWeight.w500, + fontSize: 14.0, + ), + ), + ), ], ), ),