From ee9e5bd86c1ae3a14a85eff50c404809e4509577 Mon Sep 17 00:00:00 2001 From: Leonardo Gonzalez Luzon Date: Wed, 20 Nov 2024 15:12:12 -0500 Subject: [PATCH] Add feature: improved-readability --- .../lib/README.md | 10 ++ .../lib/screens/home_screen/home_screen.dart | 118 ++++++++++++------ ...ign_in_with_email_and_password_screen.dart | 28 ++++- .../sign_in_with_email_link_screen.dart | 68 ++++++---- .../sign_in_with_phone_number_screen.dart | 70 +++++++---- .../sign_up_screen/sign_up_screen.dart | 47 ++++--- .../screens/splash_screen/splash_screen.dart | 19 ++- .../lib/shared/action_tile.dart | 28 +++-- .../lib/shared/button.dart | 19 ++- .../lib/shared/input_field.dart | 33 +++-- .../shared/sign_in_methods_bottom_sheet.dart | 15 ++- 11 files changed, 315 insertions(+), 140 deletions(-) create mode 100644 firebase-dart-admin-auth-sample-app/lib/README.md diff --git a/firebase-dart-admin-auth-sample-app/lib/README.md b/firebase-dart-admin-auth-sample-app/lib/README.md new file mode 100644 index 00000000..bc66a3cf --- /dev/null +++ b/firebase-dart-admin-auth-sample-app/lib/README.md @@ -0,0 +1,10 @@ +# Larger font sizes and high contrast for improved readability + +## Overview +Changes to the screens of the main app have been updated to have higher contrast and larger font sizes to improve readability for the users + +## Installations +No additional setup is required. These are updates to only the visuals of the screens. + +## Usage +run the basic sample app to see the changes \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/home_screen/home_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/home_screen/home_screen.dart index af6784f2..fc67aeb4 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/home_screen/home_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/home_screen/home_screen.dart @@ -5,52 +5,90 @@ import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); - @override + @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: const Text( - 'Test App', - ), - ), - body: SingleChildScrollView( - padding: 20.horizontal, - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - ActionTile( - onTap: () {}, - title: "Verify Before Update Email", - ), - 10.vSpace, - ActionTile( - onTap: () {}, - title: "Update Profile", - ), - 10.vSpace, - ActionTile( - onTap: () {}, - title: "Update Password", + appBar: PreferredSize( + preferredSize: const Size.fromHeight(60), // Increased height + child: AppBar( + backgroundColor: const Color(0xFF6A0DAD), // Matches gradient start color + elevation: 0, // Flat app bar + centerTitle: true, + foregroundColor: Colors.white, // Centered title + title: const Text( + 'Test App', + style: TextStyle( + fontSize: 24, // Larger font size + fontWeight: FontWeight.bold, // Bold text + color: Colors.white, ), - 10.vSpace, - ActionTile( - onTap: () {}, - title: "Send Verification Email", + ), + bottom: PreferredSize( + preferredSize: const Size.fromHeight(1), // Divider thickness + child: Container( + color: Colors.white.withOpacity(0.5), // Divider color + height: 1, ), - 10.vSpace, - ActionTile( - onTap: () {}, - title: "Send Password Reset Email", - ), - 10.vSpace, - ActionTile( - onTap: () {}, - title: "Sign Out", + ), + ), + ), + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: SafeArea( + child: SingleChildScrollView( + physics: const BouncingScrollPhysics(), // Smooth scrolling + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: MediaQuery.of(context).size.height, // Full page height + ), + child: Padding( + padding: const EdgeInsets.all(20), // Consistent padding + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + ActionTile( + onTap: () {}, + title: "Verify Before Update Email", + ), + 10.vSpace, + ActionTile( + onTap: () {}, + title: "Update Profile", + ), + 10.vSpace, + ActionTile( + onTap: () {}, + title: "Update Password", + ), + 10.vSpace, + ActionTile( + onTap: () {}, + title: "Send Verification Email", + ), + 10.vSpace, + ActionTile( + onTap: () {}, + title: "Send Password Reset Email", + ), + 10.vSpace, + ActionTile( + onTap: () {}, + title: "Sign Out", + ), + 10.vSpace, + ], + ), + ), ), - 10.vSpace, - ], + ), ), ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_and_password_screen/sign_in_with_email_and_password_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_and_password_screen/sign_in_with_email_and_password_screen.dart index 9c694b7b..e7e9a2b0 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_and_password_screen/sign_in_with_email_and_password_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_and_password_screen/sign_in_with_email_and_password_screen.dart @@ -31,9 +31,18 @@ class _SignInWithEmailAndPasswordScreenState create: (context) => SignInWithEmailAndPasswordViewModel(), child: Consumer( builder: (context, value, child) => Scaffold( - body: Center( - child: SingleChildScrollView( - padding: 20.horizontal, + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: SafeArea( + child: Center( + child: SingleChildScrollView( + padding: const EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.center, @@ -72,9 +81,16 @@ class _SignInWithEmailAndPasswordScreenState child: const Text( 'Explore more sign in options', textAlign: TextAlign.end, - ), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Colors.yellowAccent, + ), + ), + ), + ], ), - ], + ), ), ), ), @@ -82,4 +98,4 @@ class _SignInWithEmailAndPasswordScreenState ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_link_screen/sign_in_with_email_link_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_link_screen/sign_in_with_email_link_screen.dart index 933d0912..23185f71 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_link_screen/sign_in_with_email_link_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_email_link_screen/sign_in_with_email_link_screen.dart @@ -22,35 +22,51 @@ class _SignInWithEmailLinkScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: SingleChildScrollView( - padding: 20.horizontal, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - InputField( - controller: _emailLinkController, - label: 'Email Link', - hint: '', - ), - 20.vSpace, - Button( - onTap: () {}, - title: 'Sign In', - ), - 20.vSpace, - GestureDetector( - onTap: () => showSignMethodsBottomSheet(context), - child: const Text( - 'Explore more sign in options', - textAlign: TextAlign.end, - ), + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: SafeArea( + child: Center( + child: SingleChildScrollView( + padding: const EdgeInsets.all(20), // Consistent padding + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + InputField( + controller: _emailLinkController, + label: 'Email Link', + hint: '', + ), + 20.vSpace, + Button( + onTap: () {}, + title: 'Sign In', + ), + 20.vSpace, + GestureDetector( + onTap: () => showSignMethodsBottomSheet(context), + child: const Text( + 'Explore more sign in options', + textAlign: TextAlign.end, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Colors.yellowAccent, // Highlighted link color + ), + ), + ), + ], ), - ], + ), ), ), ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_phone_number_screen/sign_in_with_phone_number_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_phone_number_screen/sign_in_with_phone_number_screen.dart index d8892d6d..3a9af0a3 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_phone_number_screen/sign_in_with_phone_number_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/sign_in_with_phone_number_screen/sign_in_with_phone_number_screen.dart @@ -23,36 +23,52 @@ class _SignInWithPhoneNumberScreenState @override Widget build(BuildContext context) { return Scaffold( - body: Center( - child: SingleChildScrollView( - padding: 20.horizontal, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - InputField( - controller: _phonenumberController, - label: 'Phone number', - hint: '123456789', - textInputType: TextInputType.phone, - ), - 20.vSpace, - Button( - onTap: () {}, - title: 'Sign In', - ), - 20.vSpace, - GestureDetector( - onTap: () => showSignMethodsBottomSheet(context), - child: const Text( - 'Explore more sign in options', - textAlign: TextAlign.end, - ), + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: SafeArea( + child: Center( + child: SingleChildScrollView( + padding: 20.horizontal, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + InputField( + controller: _phonenumberController, + label: 'Phone number', + hint: '123456789', + textInputType: TextInputType.phone, + ), + 20.vSpace, + Button( + onTap: () {}, + title: 'Sign In', + ), + 20.vSpace, + GestureDetector( + onTap: () => showSignMethodsBottomSheet(context), + child: const Text( + 'Explore more sign in options', + textAlign: TextAlign.end, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Colors.yellowAccent, // Highlighted link color + ), + ), + ), + ], ), - ], + ), ), ), ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/sign_up_screen/sign_up_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/sign_up_screen/sign_up_screen.dart index 610a1c2d..f6903a5b 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/sign_up_screen/sign_up_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/sign_up_screen/sign_up_screen.dart @@ -31,7 +31,15 @@ class _SignUpScreenState extends State { create: (context) => SignUpViewModel(), child: Consumer( builder: (context, value, child) => Scaffold( - body: SafeArea( + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: SafeArea( child: Center( child: SingleChildScrollView( padding: 20.all, @@ -66,25 +74,30 @@ class _SignUpScreenState extends State { Text.rich( textAlign: TextAlign.end, TextSpan( - text: 'Have an account? ', - children: [ - TextSpan( - text: 'Sign In With Varieties Of Method', - recognizer: TapGestureRecognizer() - ..onTap = - () => showSignMethodsBottomSheet(context), - style: - Theme.of(context).textTheme.bodySmall?.copyWith( - fontWeight: FontWeight.bold, - fontSize: 16, - color: Colors.purple, - ), - ) - ], + text: 'Have an account? ', + style: Theme.of(context).textTheme.bodySmall?.copyWith( + fontWeight: FontWeight.bold, + fontSize: 16, + color: Colors.white, + ), + children: [ + TextSpan( + text: 'Sign In With Varieties Of Method', + recognizer: TapGestureRecognizer() + ..onTap = () => + showSignMethodsBottomSheet(context), + style: Theme.of(context).textTheme.bodySmall?.copyWith( + fontWeight: FontWeight.bold, + fontSize: 18, + color: Colors.yellowAccent, // Highlighted link color + ), + ), + ], ), ), ], ), + ), ), ), ), @@ -92,4 +105,4 @@ class _SignUpScreenState extends State { ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/screens/splash_screen/splash_screen.dart b/firebase-dart-admin-auth-sample-app/lib/screens/splash_screen/splash_screen.dart index af215ac4..062abc3a 100644 --- a/firebase-dart-admin-auth-sample-app/lib/screens/splash_screen/splash_screen.dart +++ b/firebase-dart-admin-auth-sample-app/lib/screens/splash_screen/splash_screen.dart @@ -30,18 +30,31 @@ class _SplashScreenState extends State { body: Container( height: MediaQuery.sizeOf(context).height, width: MediaQuery.sizeOf(context).width, - color: Colors.purple, + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Gradient background + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), child: Center( child: Text( 'SAMPLE APP', style: Theme.of(context).textTheme.bodySmall?.copyWith( color: Colors.white, fontWeight: FontWeight.w900, - fontSize: 20, + fontSize: 42, + shadows: [ + Shadow( + offset: const Offset(2.0, 2.0), + blurRadius: 3.0, + color: Colors.black.withOpacity(0.5), // Adds separation + ), + ], ), ), ), ), ); } -} +} \ No newline at end of file diff --git a/firebase-dart-admin-auth-sample-app/lib/shared/action_tile.dart b/firebase-dart-admin-auth-sample-app/lib/shared/action_tile.dart index d9e9f206..1463e7a8 100644 --- a/firebase-dart-admin-auth-sample-app/lib/shared/action_tile.dart +++ b/firebase-dart-admin-auth-sample-app/lib/shared/action_tile.dart @@ -1,5 +1,5 @@ -import 'package:dart_admin_auth_sample_app/utils/extensions.dart'; import 'package:flutter/material.dart'; +import 'package:dart_admin_auth_sample_app/utils/extensions.dart'; class ActionTile extends StatelessWidget { final String title; @@ -17,17 +17,31 @@ class ActionTile extends StatelessWidget { child: Container( padding: 10.all, decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - border: Border.all( - color: Colors.purple, - )), + color: Colors.white, // Tile background color + borderRadius: BorderRadius.circular(12), // Rounded corners + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // Subtle shadow + blurRadius: 8, + offset: const Offset(0, 4), + ), + ], + ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Text(title), + Text( + title, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + color: Colors.black87, // Text color + ), + ), const Icon( Icons.arrow_forward_ios, - color: Colors.purple, + color: Colors.purple, // Icon color + size: 18, ), ], ), diff --git a/firebase-dart-admin-auth-sample-app/lib/shared/button.dart b/firebase-dart-admin-auth-sample-app/lib/shared/button.dart index 17091636..7646e0bd 100644 --- a/firebase-dart-admin-auth-sample-app/lib/shared/button.dart +++ b/firebase-dart-admin-auth-sample-app/lib/shared/button.dart @@ -15,21 +15,28 @@ class Button extends StatelessWidget { Widget build(BuildContext context) { return MaterialButton( onPressed: onTap, - color: Colors.purple, + color: const Color(0xFFDA70D6), // Button background color shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), + borderRadius: BorderRadius.circular(12), // Rounded corners ), - textColor: Colors.white, - textTheme: ButtonTextTheme.normal, + textColor: Colors.black, // Button text color + elevation: 8, // Elevation for shadow effect child: loading ? const SizedBox( height: 15, width: 15, child: CircularProgressIndicator( - color: Colors.white, + color: Colors.black, // Spinner color + strokeWidth: 2, ), ) - : Text(title ?? ''), + : Text( + title ?? '', + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), ); } } diff --git a/firebase-dart-admin-auth-sample-app/lib/shared/input_field.dart b/firebase-dart-admin-auth-sample-app/lib/shared/input_field.dart index 89062c50..d140568d 100644 --- a/firebase-dart-admin-auth-sample-app/lib/shared/input_field.dart +++ b/firebase-dart-admin-auth-sample-app/lib/shared/input_field.dart @@ -17,13 +17,32 @@ class InputField extends StatelessWidget { @override Widget build(BuildContext context) { - return TextField( - controller: controller, - obscureText: obscure ?? false, - keyboardType: textInputType, - decoration: InputDecoration( - hintText: hint, - labelText: label, + return Container( + decoration: BoxDecoration( + color: Colors.white, // White background for contrast + borderRadius: BorderRadius.circular(12), // Rounded corners + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // Subtle shadow + blurRadius: 8, + offset: const Offset(0, 4), + ), + ], + ), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), // Padding inside the box + child: TextField( + controller: controller, + obscureText: obscure ?? false, + keyboardType: textInputType, + decoration: InputDecoration( + hintText: hint, + labelText: label, + border: InputBorder.none, // Remove default border + ), + style: const TextStyle( + fontSize: 16, + color: Colors.black87, // Text color + ), ), ); } diff --git a/firebase-dart-admin-auth-sample-app/lib/shared/sign_in_methods_bottom_sheet.dart b/firebase-dart-admin-auth-sample-app/lib/shared/sign_in_methods_bottom_sheet.dart index bbbbc56d..d229a9e3 100644 --- a/firebase-dart-admin-auth-sample-app/lib/shared/sign_in_methods_bottom_sheet.dart +++ b/firebase-dart-admin-auth-sample-app/lib/shared/sign_in_methods_bottom_sheet.dart @@ -19,8 +19,21 @@ class SignInMethodsBottomSheet extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - padding: 20.all, + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [Color(0xFF6A0DAD), Color(0xFF4B0082)], // Purple gradient + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + borderRadius: BorderRadius.only( + topLeft: Radius.circular(20), + topRight: Radius.circular(20), + ), // Rounded corners for the top of the bottom sheet + ), + padding: const EdgeInsets.all(20), // Consistent padding child: Column( + mainAxisSize: MainAxisSize.min, // Adjusts height to content + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ ActionTile( onTap: () => Navigator.push(