usite-sas-bic/prosappweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Maquetado de login por movil

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
fonts/Poppins-Black.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-Bold.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-ExtraBold.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-ExtraLight.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-Light.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-Medium.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-Regular.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-SemiBold.ttf
BIN
View File
Binary file not shown.
fonts/Poppins-Thin.ttf
BIN
View File
Binary file not shown.
lib/main.dart
+1
View File
@@ -16,6 +16,7 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) => ChangeNotifierProvider( Widget build(BuildContext context) => ChangeNotifierProvider(
create: (context) => GoogleSignProvider(), create: (context) => GoogleSignProvider(),
child: MaterialApp( child: MaterialApp(
theme: ThemeData(fontFamily: 'Poppins'),
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
title: 'ProsApp', title: 'ProsApp',
home: LoginScreen(), home: LoginScreen(),
lib/src/screens/login.dart
+46 -30
View File
@@ -16,33 +16,34 @@ class _LoginScreenState extends State<LoginScreen> {
return SafeArea( return SafeArea(
child: Scaffold( child: Scaffold(
resizeToAvoidBottomInset: false, resizeToAvoidBottomInset: false,
backgroundColor: const Color.fromARGB(255, 186, 237, 255), backgroundColor: Color(0xFFD6F4FF),
body: Stack( body: Stack(
children: [ children: [
Container( Container(
margin: const EdgeInsets.only(top: 300), margin: const EdgeInsets.only(top: 280),
width: double.infinity, width: double.infinity,
height: 600, height: 600,
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topRight: Radius.circular(40), topRight: Radius.circular(50),
topLeft: Radius.circular(40))), topLeft: Radius.circular(50))),
), ),
Container( 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')), child: const Image(image: AssetImage('images/logo_prosapp.png')),
), ),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), 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 [ child: Column(children: const [
Align( Align(
alignment: Alignment.topLeft, alignment: Alignment.topLeft,
child: Text( child: Text(
'Iniciar sesión', 'Iniciar sesión',
style: TextStyle( style: TextStyle(
fontSize: 40.0, color: Color(0xFF262626),
fontSize: 38.0,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@@ -51,30 +52,29 @@ class _LoginScreenState extends State<LoginScreen> {
), ),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), 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: [ child: Column(children: [
const Padding( const Padding(
padding: EdgeInsets.only(bottom: 5), padding: EdgeInsets.only(bottom: 5),
child: Align( child: Align(
alignment: Alignment.topLeft, alignment: Alignment.topLeft,
child: Text('Numero de celular', child: Text('Numero de celular',
style: style: TextStyle(
TextStyle(fontSize: 25.0, color: Colors.black38)), fontSize: 18.0, color: Color(0xFF959595))),
)), )),
const Padding( const Padding(
padding: EdgeInsets.only(bottom: 10), padding: EdgeInsets.only(bottom: 10),
child: TextField( child: TextField(
decoration: InputDecoration( decoration: InputDecoration(
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black12), borderSide: BorderSide(color: Color(0xFFECECEC)),
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(20.0), Radius.circular(50),
)), )),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(color: Color(0xFFECECEC)),
color: Color.fromARGB(255, 214, 214, 214)),
borderRadius: BorderRadius.all( borderRadius: BorderRadius.all(
Radius.circular(20.0), Radius.circular(50),
)), )),
hintText: '3163225944', hintText: '3163225944',
fillColor: Color.fromARGB(255, 239, 239, 239), fillColor: Color.fromARGB(255, 239, 239, 239),
@@ -83,42 +83,58 @@ class _LoginScreenState extends State<LoginScreen> {
), ),
), ),
const Padding( const Padding(
padding: EdgeInsets.only(bottom: 100), padding: EdgeInsets.only(bottom: 40),
child: Text('Un código sera enviado a este numero de celular', child: Text('Un código sera enviado a este numero de celular',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(fontSize: 15.0, color: Colors.black38)), style: TextStyle(fontSize: 15.0, color: Color(0xFF959595))),
), ),
Padding( Padding(
padding: const EdgeInsets.only(left: 20, right: 20, bottom: 20), padding: EdgeInsets.only(bottom: 40),
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: Center(
child: ElevatedButton(
onPressed: () {},
child: Text( child: Text(
'Enviar código', 'Enviar código',
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontWeight: FontWeight.w900, fontWeight: FontWeight.bold,
fontSize: 22), 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( RichText(
text: const TextSpan( text: const TextSpan(
style: TextStyle(fontSize: 16.0, color: Colors.black38), style: TextStyle(fontSize: 16.0, color: Color(0xFF959595)),
children: [ children: [
TextSpan(text: 'No estas registrado? '), TextSpan(text: 'No estas registrado? '),
TextSpan( TextSpan(
text: 'Registrarse', text: 'Registrarse',
style: TextStyle( style: TextStyle(
color: Color.fromARGB(255, 23, 189, 231))), color: Color(0xFF2BA4EC),
fontWeight: FontWeight.w500)),
], ],
), ),
) )
pubspec.yaml
+13 -10
View File
@@ -80,17 +80,20 @@ flutter:
# "family" key with the font family name, and a "fonts" key with a # "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For # list giving the asset and other descriptors for the font. For
# example: # example:
# fonts: fonts:
# - family: Schyler - family: Poppins
# fonts: fonts:
# - asset: fonts/Schyler-Regular.ttf - asset: fonts/Poppins-Thin.ttf
# - asset: fonts/Schyler-Italic.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 # style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
# #
# For details regarding fonts from package dependencies, # For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages # see https://flutter.dev/custom-fonts/#from-packages