Mi primer commit
This commit is contained in:
Kimberly
228
lib/login.dart
Normal file
228
lib/login.dart
Normal file
@@ -0,0 +1,228 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'domicilios.dart'; // Para navegar aquí tras el login
|
||||
|
||||
class LoginScreen extends StatefulWidget {
|
||||
const LoginScreen({super.key});
|
||||
|
||||
@override
|
||||
State<LoginScreen> createState() => _LoginScreenState();
|
||||
}
|
||||
|
||||
class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStateMixin {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
|
||||
// Controladores para capturar el texto
|
||||
final _usuarioController = TextEditingController();
|
||||
final _passwordController = TextEditingController();
|
||||
|
||||
bool _obscurePassword = true; // Ocultar/mostrar contraseña
|
||||
late TabController _tabController; // Controla si inicia con Email o Teléfono
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: 2, vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_usuarioController.dispose();
|
||||
_passwordController.dispose();
|
||||
_tabController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _iniciarSesion() {
|
||||
if (_formKey.currentState!.validate()) {
|
||||
// Aquí irá tu lógica futura con Firebase/Supabase
|
||||
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
const SnackBar(
|
||||
content: Text('¡Ingreso exitoso!'),
|
||||
backgroundColor: Colors.green,
|
||||
),
|
||||
);
|
||||
|
||||
// Navegamos directamente a tu pantalla de Gestión de Domicilios
|
||||
Navigator.pushReplacement(
|
||||
context,
|
||||
MaterialPageRoute(builder: (context) => const GestionDomiciliosScreen()),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// Icono e Identidad de la App
|
||||
CircleAvatar(
|
||||
radius: 45,
|
||||
backgroundColor: Colors.green[50],
|
||||
child: Icon(Icons.recycling_rounded, size: 55, color: Colors.green[700]),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'EcoRecolección',
|
||||
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.green[800],
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'Por una comunidad más limpia y educada',
|
||||
style: TextStyle(color: Colors.grey[600], fontSize: 14),
|
||||
),
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// Selector de tipo de ingreso (Email / Teléfono)
|
||||
Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey[100],
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: TabBar(
|
||||
controller: _tabController,
|
||||
indicatorSize: TabBarIndicatorSize.tab,
|
||||
dividerColor: Colors.transparent,
|
||||
indicator: BoxDecoration(
|
||||
color: Colors.green[700],
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
labelColor: Colors.white,
|
||||
unselectedLabelColor: Colors.grey[600],
|
||||
labelStyle: const TextStyle(fontWeight: FontWeight.bold),
|
||||
tabs: const [
|
||||
Tab(text: 'Correo Electrónico'),
|
||||
Tab(text: 'Teléfono'),
|
||||
],
|
||||
onTap: (index) {
|
||||
_usuarioController.clear(); // Limpia al cambiar de pestaña
|
||||
},
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Contenedor dinámico según el Tab activo
|
||||
AnimatedBuilder(
|
||||
animation: _tabController,
|
||||
builder: (context, child) {
|
||||
bool esEmail = _tabController.index == 0;
|
||||
return TextFormField(
|
||||
controller: _usuarioController,
|
||||
keyboardType: esEmail ? TextInputType.emailAddress : TextInputType.phone,
|
||||
decoration: InputDecoration(
|
||||
labelText: esEmail ? 'Correo Electrónico' : 'Número de Teléfono',
|
||||
hintText: esEmail ? 'ejemplo@correo.com' : '10 dígitos',
|
||||
prefixIcon: Icon(esEmail ? Icons.email_outlined : Icons.phone_android_rounded, color: Colors.green[700]),
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: Colors.green[700]!, width: 2),
|
||||
),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.trim().isEmpty) {
|
||||
return esEmail ? 'Ingresa tu correo' : 'Ingresa tu teléfono';
|
||||
}
|
||||
if (esEmail && !RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
|
||||
return 'Introduce un correo válido';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Campo de Contraseña
|
||||
TextFormField(
|
||||
controller: _passwordController,
|
||||
obscureText: _obscurePassword,
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Contraseña',
|
||||
prefixIcon: Icon(Icons.lock_outline_rounded, color: Colors.green[700]),
|
||||
suffixIcon: IconButton(
|
||||
icon: Icon(_obscurePassword ? Icons.visibility_off_outlined : Icons.visibility_outlined, color: Colors.grey),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_obscurePassword = !_obscurePassword;
|
||||
});
|
||||
},
|
||||
),
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(color: Colors.green[700]!, width: 2),
|
||||
),
|
||||
),
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'Ingresa tu contraseña';
|
||||
}
|
||||
if (value.length < 6) {
|
||||
return 'Debe tener al menos 6 caracteres';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
|
||||
// Olvidé mi contraseña
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: TextButton(
|
||||
onPressed: () {},
|
||||
child: Text('¿Olvidaste tu contraseña?', style: TextStyle(color: Colors.green[800], fontWeight: FontWeight.w600)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Botón Ingresar
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
child: ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.green[700],
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
elevation: 1,
|
||||
),
|
||||
onPressed: _iniciarSesion,
|
||||
child: const Text('Iniciar Sesión', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Crear cuenta nueva
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text('¿No tienes una cuenta? ', style: TextStyle(color: Colors.grey[600])),
|
||||
GestureDetector(
|
||||
onTap: () {}, // Aquí abrirías la pantalla de registro
|
||||
child: Text(
|
||||
'Regístrate',
|
||||
style: TextStyle(color: Colors.green[800], fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user