Maquetado de login por movil
This commit is contained in:
+52
-36
@@ -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)),
|
||||
],
|
||||
),
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user