Maquetado de login por movil

This commit is contained in:
Juan Felipe Duarte
2023-03-27 14:35:26 -05:00
parent 8d815be8dc
commit 0776b63326
12 changed files with 67 additions and 47 deletions
+52 -36
View File
@@ -16,33 +16,34 @@ class _LoginScreenState extends State<LoginScreen> {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color.fromARGB(255, 186, 237, 255),
backgroundColor: Color(0xFFD6F4FF),
body: Stack(
children: [
Container(
margin: const EdgeInsets.only(top: 300),
margin: const EdgeInsets.only(top: 280),
width: double.infinity,
height: 600,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40))),
topRight: Radius.circular(50),
topLeft: Radius.circular(50))),
),
Container(
margin: const EdgeInsets.only(top: 100, left: 50, right: 50),
margin: const EdgeInsets.only(top: 120, left: 70, right: 70),
child: const Image(image: AssetImage('images/logo_prosapp.png')),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
margin: const EdgeInsets.only(top: 300, left: 30, right: 50),
margin: const EdgeInsets.only(top: 280, left: 30, right: 50),
child: Column(children: const [
Align(
alignment: Alignment.topLeft,
child: Text(
'Iniciar sesión',
style: TextStyle(
fontSize: 40.0,
color: Color(0xFF262626),
fontSize: 38.0,
fontWeight: FontWeight.bold,
),
),
@@ -51,30 +52,29 @@ class _LoginScreenState extends State<LoginScreen> {
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
margin: const EdgeInsets.only(top: 400, left: 50, right: 50),
margin: const EdgeInsets.only(top: 350, left: 50, right: 50),
child: Column(children: [
const Padding(
padding: EdgeInsets.only(bottom: 5),
child: Align(
alignment: Alignment.topLeft,
child: Text('Numero de celular',
style:
TextStyle(fontSize: 25.0, color: Colors.black38)),
style: TextStyle(
fontSize: 18.0, color: Color(0xFF959595))),
)),
const Padding(
padding: EdgeInsets.only(bottom: 10),
child: TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black12),
borderSide: BorderSide(color: Color(0xFFECECEC)),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
Radius.circular(50),
)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color.fromARGB(255, 214, 214, 214)),
borderSide: BorderSide(color: Color(0xFFECECEC)),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
Radius.circular(50),
)),
hintText: '3163225944',
fillColor: Color.fromARGB(255, 239, 239, 239),
@@ -83,42 +83,58 @@ class _LoginScreenState extends State<LoginScreen> {
),
),
const Padding(
padding: EdgeInsets.only(bottom: 100),
padding: EdgeInsets.only(bottom: 40),
child: Text('Un código sera enviado a este numero de celular',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 15.0, color: Colors.black38)),
style: TextStyle(fontSize: 15.0, color: Color(0xFF959595))),
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20),
child: Container(
padding: const EdgeInsets.all(15),
decoration: const BoxDecoration(
color: Color.fromARGB(255, 34, 211, 255),
borderRadius: BorderRadius.all(
Radius.circular(20.0),
)),
child: const Center(
child: Center(
child: Text(
'Enviar código',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 22),
),
padding: EdgeInsets.only(bottom: 40),
child: Center(
child: ElevatedButton(
onPressed: () {},
child: Text(
'Enviar código',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
style: ElevatedButton.styleFrom(
primary: Color(0xFF2BA4EC), // Color del botón
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50), // Bordes redondeados
),
elevation: 0,
minimumSize: Size(220, 50), // Tamaño mínimo del botón
),
)),
),
Padding(
padding: EdgeInsets.only(bottom: 27),
child: GestureDetector(
onTap: () {},
child: Text(
'Entrar con correo electronico',
style: TextStyle(
fontSize: 15.0, color: Color(0xFF959595),
decoration: TextDecoration.underline, // Subrayado
),
),
),
),
RichText(
text: const TextSpan(
style: TextStyle(fontSize: 16.0, color: Colors.black38),
style: TextStyle(fontSize: 16.0, color: Color(0xFF959595)),
children: [
TextSpan(text: 'No estas registrado? '),
TextSpan(
text: 'Registrarse',
style: TextStyle(
color: Color.fromARGB(255, 23, 189, 231))),
color: Color(0xFF2BA4EC),
fontWeight: FontWeight.w500)),
],
),
)