Skip to main content

​
Screen Overview

The LoginScreen provides user authentication functionality with support for both email/password login and Google Sign-In. It includes terms and conditions acceptance and navigation to the registration screen. Location: lib/ui/screens/login_screen.dart

​
Purpose

The LoginScreen serves as the entry point to the application, providing:
  • Email and password authentication
  • Google Sign-In integration
  • Terms and conditions acceptance
  • Navigation to user registration
  • Form validation and error handling

​
State Management

​
State Variables

​
_authService
AuthService
Instance of the authentication service that handles sign-in operations.
​
_emailController
TextEditingController
Controller for the email input field.
​
_passwordController
TextEditingController
Controller for the password input field.
​
_acceptedTerms
bool
Boolean flag indicating whether the user has accepted the terms and conditions. Initially false.

​
Authentication Methods

​
Email/Password Login

void _loginWithEmail()
Authenticates users using email and password credentials. Located at login_screen.dart:19. Process:
  1. Trims email and password input
  2. Calls _authService.signInWithEmailAndPassword()
  3. On success: Navigates to /home route
  4. On failure: Shows error SnackBar
Error Handling:
  • Validates widget is still mounted before navigation
  • Displays “Inicio de sesión fallido. Verifica tus credenciales.” on error

​
Google Sign-In

void _loginWithGoogle()
Authenticates users through Google Sign-In. Located at login_screen.dart:37. Process:
  1. Calls _authService.signInWithGoogle()
  2. On success: Navigates to /home route
  3. On failure: Shows error SnackBar
Error Handling:
  • Validates widget is still mounted before navigation
  • Displays “Error al iniciar sesión con Google.” on error

​
Form Components

​
Email Input Field

​
Email Field
TextField
  • Label: “Ingrese correo electrónico”
  • Input type: TextInputType.emailAddress
  • Border: Rounded (30.0 radius)
  • Color scheme: Gray (#C9C9CA)
Located at login_screen.dart:70-83.

​
Password Input Field

​
Password Field
TextField
  • Label: “Contraseña”
  • Obscured text: true
  • Border: Rounded (30.0 radius)
  • Color scheme: Gray (#C9C9CA)
Located at login_screen.dart:85-97.

​
Terms and Conditions Checkbox

​
Terms Checkbox
Checkbox
  • Label: “Acepto Términos y Condiciones” (clickable)
  • Active color: Light gray (#E6E6E6)
  • Check color: Green (#6BCE81)
  • Tapping label opens terms dialog
Located at login_screen.dart:99-127.

​
Buttons

​
Login Button

ElevatedButton(
  onPressed: _acceptedTerms ? _loginWithEmail : null,
  // ...
)
  • State: Disabled unless terms are accepted
  • Background: Teal (#B7F6E3)
  • Border: Yellow (#FFEE93, 2px)
  • Text: “Iniciar”
  • Size: 200x50 minimum
Located at login_screen.dart:129-147.

​
Google Sign-In Button

  • Background: Teal (#089B83)
  • Text: “Iniciar sesión con Google”
  • Always enabled (no terms requirement)
Located at login_screen.dart:154-160.

​
Register Navigation

TextButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const RegisterScreen()),
    );
  },
  // ...
)
Displays: “¿No tienes una cuenta? Regístrate”
  • First part: Gray (#C9C9CA)
  • “Regístrate”: Dark green (#0D4533)
Located at login_screen.dart:161-183.

​
Terms and Conditions Dialog

​
Dialog Function

void _showTermsAndConditions(BuildContext context)
Displays a custom dialog with terms and conditions content. Located at login_screen.dart:194.

​
Dialog Structure

Header

  • Title: “Términos y Condiciones”
  • Close button (circular, top-right)

Content

  • Effective date: “02 de Octubre de 2024”
  • Welcome message
  • Section 1: Acceptance of Terms
Styling:
  • Rounded corners (20.0 radius)
  • Max width: 350px
  • Close button: Green circular border (#97CE6B)
  • Scrollable content for long terms

​
Layout Structure

Scaffold
└── SingleChildScrollView
    └── Center
        └── Padding
            └── Container (max width: 400)
                └── Column
                    ├── Image (sunshine.png, 280px)
                    ├── TextField (email)
                    ├── TextField (password)
                    ├── Row
                    │   ├── Checkbox
                    │   └── Text (terms link)
                    ├── ElevatedButton (login)
                    ├── Text (Google prompt)
                    ├── ElevatedButton (Google)
                    └── TextButton (register link)

​
Form Validation

​
Input Validation

  • Email: Uses .trim() to remove whitespace
  • Password: Uses .trim() to remove whitespace
  • Terms: Must be accepted before email/password login
The login button is disabled when _acceptedTerms is false. Users must check the checkbox to proceed with email/password authentication.

​
Error Messages

Error messages are displayed using ScaffoldMessenger.showSnackBar(): 
ScaffoldMessenger.of(context).showSnackBar(
  const SnackBar(
    content: Text('Inicio de sesión fallido. Verifica tus credenciales.')
  ),
);

​
Screen Features

  • SingleChildScrollView prevents overflow on small screens
  • Container max-width constraint (400px) for larger screens
  • Centered layout for better appearance
  • Proper keyboard types (email, password)
  • Visible labels on all inputs
  • Clear error messaging
  • Touch-friendly button sizes
  • Visual branding with sunshine logo
  • Disabled state for login button (requires terms acceptance)
  • Separate Google Sign-In option (no terms requirement)
  • Clear path to registration

​
Color Scheme

ElementColor CodeDescription
Background#FFFFFFWhite
Input borders#C9C9CALight gray
Login button bg#B7F6E3Teal
Login button border#FFEE93Yellow
Google button bg#089B83Dark teal
Terms checkbox#6BCE81Green
Register link#0D4533Dark green

​
Best Practices

Uses mounted check before navigation to prevent memory leaks
Trims user input to avoid whitespace issues
Separates authentication logic into AuthService
Provides clear user feedback with SnackBars
Implements proper error handling for async operations

Build docs developers (and LLMs) love

Get started for freeTalk to us