From 17bd6ef09bc57c48436022702b5243efb823a6b8 Mon Sep 17 00:00:00 2001 From: Priyanshu Paliwal <66347715+Priyanshu078@users.noreply.github.com> Date: Thu, 28 Oct 2021 21:50:20 +0530 Subject: [PATCH] updated ui to show all the text properly (#255) * updated ui to show all the text properly * used variables height and width and removed any in provider * also updated the signup with same issue --- lib/views/auth/login_view.dart | 330 +++++++++++++-------------- lib/views/auth/signup_view.dart | 388 ++++++++++++++++---------------- 2 files changed, 361 insertions(+), 357 deletions(-) diff --git a/lib/views/auth/login_view.dart b/lib/views/auth/login_view.dart index 3ddc72f..7744be9 100644 --- a/lib/views/auth/login_view.dart +++ b/lib/views/auth/login_view.dart @@ -48,193 +48,195 @@ class LoginScreenState extends State { child: Scaffold( body: SafeArea( child: Center( - child: RelicBazaarStackedView( - height: height * 0.60, - width: width * 0.87, - child: Form( - key: _formKey, - child: Padding( - padding: EdgeInsets.symmetric(horizontal: height / 99), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Flexible( - flex: 2, - child: Text( - 'Login', - style: TextStyle( - fontSize: 40, - color: Colors.white, - fontFamily: 'pix M 8pt', - fontWeight: FontWeight.bold, + child: SingleChildScrollView( + child: RelicBazaarStackedView( + height: height*0.70, + width: width*0.87, + child: Form( + key: _formKey, + child: Padding( + padding: EdgeInsets.symmetric(horizontal: height / 99), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Flexible( + flex: 2, + child: Text( + 'Login', + style: TextStyle( + fontSize: 40, + color: Colors.white, + fontFamily: 'pix M 8pt', + fontWeight: FontWeight.bold, + ), ), ), - ), - SizedBox( - height: height * 0.0004, - ), - const Flexible( - flex: 2, - child: Text( - 'Welcome back,\nPlease login to your account', - style: TextStyle( - fontSize: 20, - color: Colors.white, - fontFamily: 'pix M 8pt', - ), + SizedBox( + height: height * 0.0004, ), - ), - SizedBox( - height: height * 0.015, - ), - Flexible( - flex: 3, - child: RelicBazaarStackedView( - height: height * 0.07, - width: width * 0.7, - child: TextFormField( - focusNode: _emailFocusNode, - keyboardType: TextInputType.emailAddress, - enabled: true, - textInputAction: TextInputAction.next, - decoration: textFieldDecoration( - hintText: 'Email Address', + const Flexible( + flex: 2, + child: Text( + 'Welcome back,\nPlease login to your account', + style: TextStyle( + fontSize: 20, + color: Colors.white, + fontFamily: 'pix M 8pt', ), - onFieldSubmitted: (_) { - _emailFocusNode!.unfocus(); - FocusScope.of(context) - .requestFocus(_passwordFocusNode); - }, - onSaved: (String? value) { - _email = value; - }, ), ), - ), - SizedBox( - height: height * 0.019, - ), - Flexible( - flex: 3, - child: RelicBazaarStackedView( - height: height * 0.07, - width: width * 0.7, - child: TextFormField( - focusNode: _passwordFocusNode, - keyboardType: TextInputType.visiblePassword, - obscureText: _showPassword, - enabled: true, - textInputAction: TextInputAction.done, - decoration: textFieldDecoration( - hintText: 'Password', - suffixIcon: IconButton( - icon: _showPassword - ? const Icon(Icons.visibility) - : const Icon(Icons.visibility_off), - onPressed: () { - setState( - () { - _showPassword = !_showPassword; - }, - ); - }, //for show and hide password + SizedBox( + height: height * 0.015, + ), + Flexible( + flex: 3, + child: RelicBazaarStackedView( + height: height * 0.07, + width: width * 0.7, + child: TextFormField( + focusNode: _emailFocusNode, + keyboardType: TextInputType.emailAddress, + enabled: true, + textInputAction: TextInputAction.next, + decoration: textFieldDecoration( + hintText: 'Email Address', ), + onFieldSubmitted: (_) { + _emailFocusNode!.unfocus(); + FocusScope.of(context) + .requestFocus(_passwordFocusNode); + }, + onSaved: (String? value) { + _email = value; + }, ), - onFieldSubmitted: (_) { - _passwordFocusNode!.unfocus(); - FocusScope.of(context) - .requestFocus(_loginFocusNode); - }, - onSaved: (String? value) { - _password = value; - }, ), ), - ), - SizedBox( - height: height * 0.019, - ), - Flexible( - flex: 2, - child: InkWell( - onTap: () { - _formKey.currentState!.save(); - _inputValidator( - email: _email!, - password: _password, - ); - }, - focusNode: _loginFocusNode, + SizedBox( + height: height * 0.019, + ), + Flexible( + flex: 3, child: RelicBazaarStackedView( - upperColor: Colors.black, - lowerColor: Colors.white, - height: height * 0.065, - width: width * 0.40, - borderColor: Colors.white, - child: const Center( - child: Text( - 'Login', - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: Colors.white, + height: height * 0.07, + width: width * 0.7, + child: TextFormField( + focusNode: _passwordFocusNode, + keyboardType: TextInputType.visiblePassword, + obscureText: _showPassword, + enabled: true, + textInputAction: TextInputAction.done, + decoration: textFieldDecoration( + hintText: 'Password', + suffixIcon: IconButton( + icon: _showPassword + ? const Icon(Icons.visibility) + : const Icon(Icons.visibility_off), + onPressed: () { + setState( + () { + _showPassword = !_showPassword; + }, + ); + }, //for show and hide password ), ), + onFieldSubmitted: (_) { + _passwordFocusNode!.unfocus(); + FocusScope.of(context) + .requestFocus(_loginFocusNode); + }, + onSaved: (String? value) { + _password = value; + }, ), ), ), - ), - SizedBox( - height: height * 0.04, - ), - Center( - child: Column( - children: [ - InkWell( - onTap: () async { - debugPrint('Navigate to google!'); - setState(() { - _loading = true; - }); - final String? errorMessage = - await AuthenticationService - .signInWithGoogle(); - if (errorMessage != null && - !errorMessage.contains( - 'Sign In Cancelled By User')) { - showErrorDialog( - errorMessage: errorMessage, - context: context, - ); - setState(() { - _loading = false; - }); - } - }, - child: SizedBox( - width: 45, - height: 45, - child: Image.asset( - 'assets/items/google.png', + SizedBox( + height: height * 0.019, + ), + Flexible( + flex: 2, + child: InkWell( + onTap: () { + _formKey.currentState!.save(); + _inputValidator( + email: _email!, + password: _password, + ); + }, + focusNode: _loginFocusNode, + child: RelicBazaarStackedView( + upperColor: Colors.black, + lowerColor: Colors.white, + height: height * 0.065, + width: width * 0.40, + borderColor: Colors.white, + child: const Center( + child: Text( + 'Login', + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: Colors.white, + ), ), ), ), - TextButton( - onPressed: () => Navigator.of(context).pushNamed( - RouteConstant.SIGN_UP_SCREEN, + ), + ), + SizedBox( + height: height * 0.04, + ), + Center( + child: Column( + children: [ + InkWell( + onTap: () async { + debugPrint('Navigate to google!'); + setState(() { + _loading = true; + }); + final String? errorMessage = + await AuthenticationService + .signInWithGoogle(); + if (errorMessage != null && + !errorMessage.contains( + 'Sign In Cancelled By User')) { + showErrorDialog( + errorMessage: errorMessage, + context: context, + ); + setState(() { + _loading = false; + }); + } + }, + child: SizedBox( + width: 45, + height: 45, + child: Image.asset( + 'assets/items/google.png', + ), + ), ), - child: const Text( - 'SignUp', - style: TextStyle( - color: Colors.white, + TextButton( + onPressed: () => Navigator.of(context).pushNamed( + RouteConstant.SIGN_UP_SCREEN, + ), + child: const Text( + 'SignUp', + style: TextStyle( + color: Colors.white, + ), ), ), - ), - ], + ], + ), ), - ), - ], + ], + ), ), ), ), diff --git a/lib/views/auth/signup_view.dart b/lib/views/auth/signup_view.dart index befbac9..2be8d3d 100644 --- a/lib/views/auth/signup_view.dart +++ b/lib/views/auth/signup_view.dart @@ -52,224 +52,226 @@ class SignUpScreenState extends State { child: Scaffold( body: SafeArea( child: Center( - child: RelicBazaarStackedView( - height: height * 0.65, - width: width * 0.87, - child: Form( - key: _formKey, - child: Padding( - padding: EdgeInsets.symmetric(horizontal: height / 99), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Flexible( - flex: 2, - child: Text( - 'SignUp', - style: TextStyle( - fontSize: 40, - color: Colors.white, - fontFamily: 'pix M 8pt', - fontWeight: FontWeight.bold, + child: SingleChildScrollView( + child: RelicBazaarStackedView( + height: height * 0.75, + width: width * 0.87, + child: Form( + key: _formKey, + child: Padding( + padding: EdgeInsets.symmetric(horizontal: height / 99), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Flexible( + flex: 2, + child: Text( + 'SignUp', + style: TextStyle( + fontSize: 40, + color: Colors.white, + fontFamily: 'pix M 8pt', + fontWeight: FontWeight.bold, + ), ), ), - ), - SizedBox( - height: height * 0.002, - ), - const Flexible( - flex: 2, - child: Text( - 'Get Started,\nCreate a new account', - style: TextStyle( - fontSize: 18, - color: Colors.white, - fontFamily: 'pix M 8pt', - ), + SizedBox( + height: height * 0.002, ), - ), - SizedBox( - height: height * 0.010, - ), - Flexible( - flex: 3, - child: RelicBazaarStackedView( - height: height * 0.07, - width: width * 0.7, - child: TextFormField( - focusNode: _emailFocusNode, - keyboardType: TextInputType.emailAddress, - enabled: true, - textInputAction: TextInputAction.next, - decoration: - textFieldDecoration(hintText: 'Email Address'), - onFieldSubmitted: (_) { - _emailFocusNode!.unfocus(); - FocusScope.of(context) - .requestFocus(_passwordFocusNode); - }, - onSaved: (String? value) { - _email = value; - }, + const Flexible( + flex: 2, + child: Text( + 'Get Started,\nCreate a new account', + style: TextStyle( + fontSize: 18, + color: Colors.white, + fontFamily: 'pix M 8pt', + ), ), ), - ), - SizedBox( - height: height * 0.019, - ), - Flexible( - flex: 3, - child: RelicBazaarStackedView( - height: height * 0.07, - width: width * 0.7, - child: TextFormField( - focusNode: _passwordFocusNode, - keyboardType: TextInputType.visiblePassword, - obscureText: showPassword, - enabled: true, - textInputAction: TextInputAction.next, - decoration: textFieldDecoration( - hintText: 'Password', - suffixIcon: IconButton( - icon: showPassword - ? const Icon(Icons.visibility) - : const Icon(Icons.visibility_off), - onPressed: () { - setState(() { - showPassword = !showPassword; - }); - }, //for show and hide password - ), + SizedBox( + height: height * 0.010, + ), + Flexible( + flex: 3, + child: RelicBazaarStackedView( + height: height * 0.07, + width: width * 0.7, + child: TextFormField( + focusNode: _emailFocusNode, + keyboardType: TextInputType.emailAddress, + enabled: true, + textInputAction: TextInputAction.next, + decoration: + textFieldDecoration(hintText: 'Email Address'), + onFieldSubmitted: (_) { + _emailFocusNode!.unfocus(); + FocusScope.of(context) + .requestFocus(_passwordFocusNode); + }, + onSaved: (String? value) { + _email = value; + }, ), - onFieldSubmitted: (_) { - _passwordFocusNode!.unfocus(); - FocusScope.of(context).requestFocus( - _confirmPasswordFocusNode, - ); - }, - onSaved: (String? value) { - _password = value; - }, ), ), - ), - SizedBox( - height: height * 0.019, - ), - Flexible( - flex: 3, - child: RelicBazaarStackedView( - height: height * 0.07, - width: width * 0.7, - child: TextFormField( - focusNode: _confirmPasswordFocusNode, - keyboardType: TextInputType.visiblePassword, - obscureText: showConfirmPassword, - enabled: true, - textInputAction: TextInputAction.done, - decoration: textFieldDecoration( - hintText: 'Confirm Password', - suffixIcon: IconButton( - icon: showConfirmPassword - ? const Icon(Icons.visibility) - : const Icon(Icons.visibility_off), - onPressed: () { - setState(() { - showConfirmPassword = !showConfirmPassword; - }); - }, //for show and hide password + SizedBox( + height: height * 0.019, + ), + Flexible( + flex: 3, + child: RelicBazaarStackedView( + height: height * 0.07, + width: width * 0.7, + child: TextFormField( + focusNode: _passwordFocusNode, + keyboardType: TextInputType.visiblePassword, + obscureText: showPassword, + enabled: true, + textInputAction: TextInputAction.next, + decoration: textFieldDecoration( + hintText: 'Password', + suffixIcon: IconButton( + icon: showPassword + ? const Icon(Icons.visibility) + : const Icon(Icons.visibility_off), + onPressed: () { + setState(() { + showPassword = !showPassword; + }); + }, //for show and hide password + ), ), + onFieldSubmitted: (_) { + _passwordFocusNode!.unfocus(); + FocusScope.of(context).requestFocus( + _confirmPasswordFocusNode, + ); + }, + onSaved: (String? value) { + _password = value; + }, ), - onFieldSubmitted: (_) { - _confirmPasswordFocusNode!.unfocus(); - FocusScope.of(context).requestFocus( - _signupFocusNode, - ); - }, - onSaved: (String? value) { - _confirmPassword = value; - }, ), ), - ), - SizedBox( - height: height * 0.015, - ), - Flexible( - flex: 2, - child: InkWell( - onTap: () { - _formKey.currentState!.save(); - _inputValidator( - confirmPassword: _confirmPassword, - email: _email!, - password: _password, - ); - }, - focusNode: _signupFocusNode, + SizedBox( + height: height * 0.019, + ), + Flexible( + flex: 3, child: RelicBazaarStackedView( - upperColor: Colors.black, - lowerColor: Colors.white, - height: height * 0.065, - width: width * 0.40, - borderColor: Colors.white, - child: const Center( - child: Text( - 'SignUp', - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - color: Colors.white, + height: height * 0.07, + width: width * 0.7, + child: TextFormField( + focusNode: _confirmPasswordFocusNode, + keyboardType: TextInputType.visiblePassword, + obscureText: showConfirmPassword, + enabled: true, + textInputAction: TextInputAction.done, + decoration: textFieldDecoration( + hintText: 'Confirm Password', + suffixIcon: IconButton( + icon: showConfirmPassword + ? const Icon(Icons.visibility) + : const Icon(Icons.visibility_off), + onPressed: () { + setState(() { + showConfirmPassword = !showConfirmPassword; + }); + }, //for show and hide password ), ), + onFieldSubmitted: (_) { + _confirmPasswordFocusNode!.unfocus(); + FocusScope.of(context).requestFocus( + _signupFocusNode, + ); + }, + onSaved: (String? value) { + _confirmPassword = value; + }, ), ), ), - ), - SizedBox( - height: height * 0.04, - ), - Flexible( - flex: 2, - child: Center( + SizedBox( + height: height * 0.015, + ), + Flexible( + flex: 2, child: InkWell( - onTap: () async { - debugPrint('Navigate to google!'); - setState(() { - _loading = true; - }); - final String? errorMessage = - await AuthenticationService - .signInWithGoogle(); - if (errorMessage != null && - !errorMessage - .contains('Sign In Cancelled By User')) { - showErrorDialog( - errorMessage: errorMessage, - context: context, - ); - setState(() { - _loading = false; - }); - } else { + onTap: () { + _formKey.currentState!.save(); + _inputValidator( + confirmPassword: _confirmPassword, + email: _email!, + password: _password, + ); + }, + focusNode: _signupFocusNode, + child: RelicBazaarStackedView( + upperColor: Colors.black, + lowerColor: Colors.white, + height: height * 0.065, + width: width * 0.40, + borderColor: Colors.white, + child: const Center( + child: Text( + 'SignUp', + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + ), + ), + ), + ), + SizedBox( + height: height * 0.04, + ), + Flexible( + flex: 2, + child: Center( + child: InkWell( + onTap: () async { + debugPrint('Navigate to google!'); setState(() { - _loading = false; + _loading = true; }); - Navigator.of(context).pop(); - } - }, - child: SizedBox( - width: 45, - height: 45, - child: Image.asset( - 'assets/items/google.png', + final String? errorMessage = + await AuthenticationService + .signInWithGoogle(); + if (errorMessage != null && + !errorMessage + .contains('Sign In Cancelled By User')) { + showErrorDialog( + errorMessage: errorMessage, + context: context, + ); + setState(() { + _loading = false; + }); + } else { + setState(() { + _loading = false; + }); + Navigator.of(context).pop(); + } + }, + child: SizedBox( + width: 45, + height: 45, + child: Image.asset( + 'assets/items/google.png', + ), ), ), ), ), - ), - ], + ], + ), ), ), ),