Maquetado de login por movil
This commit is contained in:
Juan Felipe Duarte
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -16,6 +16,7 @@ class MyApp extends StatelessWidget {
|
||||
Widget build(BuildContext context) => ChangeNotifierProvider(
|
||||
create: (context) => GoogleSignProvider(),
|
||||
child: MaterialApp(
|
||||
theme: ThemeData(fontFamily: 'Poppins'),
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'ProsApp',
|
||||
home: LoginScreen(),
|
||||
|
||||
+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)),
|
||||
],
|
||||
),
|
||||
)
|
||||
|
||||
+14
-11
@@ -80,17 +80,20 @@ flutter:
|
||||
# "family" key with the font family name, and a "fonts" key with a
|
||||
# list giving the asset and other descriptors for the font. For
|
||||
# example:
|
||||
# fonts:
|
||||
# - family: Schyler
|
||||
# fonts:
|
||||
# - asset: fonts/Schyler-Regular.ttf
|
||||
# - asset: fonts/Schyler-Italic.ttf
|
||||
# style: italic
|
||||
# - family: Trajan Pro
|
||||
# fonts:
|
||||
# - asset: fonts/TrajanPro.ttf
|
||||
# - asset: fonts/TrajanPro_Bold.ttf
|
||||
# weight: 700
|
||||
fonts:
|
||||
- family: Poppins
|
||||
fonts:
|
||||
- asset: fonts/Poppins-Thin.ttf
|
||||
- asset: fonts/Poppins-ExtraLight.ttf
|
||||
- asset: fonts/Poppins-Light.ttf
|
||||
- asset: fonts/Poppins-Regular.ttf
|
||||
- asset: fonts/Poppins-Medium.ttf
|
||||
- asset: fonts/Poppins-Black.ttf
|
||||
- asset: fonts/Poppins-SemiBold.ttf
|
||||
- asset: fonts/Poppins-Bold.ttf
|
||||
- asset: fonts/Poppins-ExtraBold.ttf
|
||||
# style: italic
|
||||
|
||||
#
|
||||
# For details regarding fonts from package dependencies,
|
||||
# see https://flutter.dev/custom-fonts/#from-packages
|
||||
|
||||
Reference in New Issue
Block a user