From 261e10968e290529d14b3c6790d304f72eccfd30 Mon Sep 17 00:00:00 2001 From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com> Date: Mon, 5 Jun 2023 10:09:45 -0500 Subject: [PATCH] login responsive --- lib/src/screens/login.dart | 177 ++++++++++++++++++++++++++++++++++++- pubspec.lock | 8 ++ pubspec.yaml | 1 + 3 files changed, 185 insertions(+), 1 deletion(-) diff --git a/lib/src/screens/login.dart b/lib/src/screens/login.dart index 1e8d0da..c2e4080 100644 --- a/lib/src/screens/login.dart +++ b/lib/src/screens/login.dart @@ -1,11 +1,11 @@ import 'package:flutter/material.dart'; -import 'package:flutter_animate/flutter_animate.dart'; import 'package:get/get.dart'; import 'package:intl_phone_field/intl_phone_field.dart'; import 'package:prosappco/src/components/bottom_sheet.dart'; import 'package:prosappco/src/components/primary_btn.dart'; import 'package:prosappco/src/controllers/phone_auth_controller.dart'; import 'package:prosappco/src/screens/code_validation.dart'; +import 'package:responsive_builder/responsive_builder.dart'; class LoginScreen extends StatefulWidget { const LoginScreen({super.key}); @@ -21,6 +21,14 @@ class _LoginScreenState extends State { @override Widget build(BuildContext context) { + return ScreenTypeLayout.builder( + mobile: (BuildContext context) => _mobileView(context), + tablet: (BuildContext context) => _mobileView(context), + desktop: (BuildContext context) => _desktopView(context), + ); + } + + Widget _mobileView(BuildContext context) { return BottomSheetExpanded( children: [ const SizedBox( @@ -50,6 +58,7 @@ class _LoginScreenState extends State { child: IntlPhoneField( controller: controller.phoneNo, initialCountryCode: 'CO', + keyboardType: TextInputType.number, onChanged: (phoneNo) { completePhoneNumber = phoneNo.completeNumber; }, @@ -148,4 +157,170 @@ class _LoginScreenState extends State { ], ); } + + Widget _desktopView(BuildContext context) { + double height = MediaQuery.of(context).size.height; + double width = MediaQuery.of(context).size.width; + return Scaffold( + backgroundColor: const Color(0xFFD6F4FF), + body: SizedBox( + height: height, + width: width, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Expanded( + child: SizedBox( + height: height, + child: const Center( + child: Image( + image: AssetImage('images/logo_prosapp.png'), + ), + ), + ), + ), + Expanded( + child: Container( + padding: EdgeInsets.symmetric(horizontal: width * 0.1), + color: Colors.white, + height: height, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const SizedBox( + width: double.infinity, + child: Text( + 'Iniciar sesión', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + ), + ), + const SizedBox(height: 20), + const SizedBox( + width: double.infinity, + child: Text( + 'Numero de celular', + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B), + ), + ), + ), + Form( + key: _formKey, + child: IntlPhoneField( + controller: controller.phoneNo, + initialCountryCode: 'CO', + keyboardType: TextInputType.number, + onChanged: (phoneNo) { + completePhoneNumber = phoneNo.completeNumber; + }, + decoration: const InputDecoration( + border: OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + errorBorder: OutlineInputBorder( + borderSide: BorderSide( + color: Color.fromARGB(255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + ), + ), + ), + const Text( + 'Un código será enviado a este numero de celular.', + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 13.0, + color: Color(0xFF65676B), + ), + ), + const SizedBox(height: 20), + PrimaryButtom( + onPressed: () { + if (_formKey.currentState!.validate()) { + PhoneAuthController.instance.phoneAuthentication( + completePhoneNumber.trim(), + ); + Get.to( + () => CodeValidationScreen( + phoneNumber: completePhoneNumber.trim(), + ), + ); + } + }, + label: 'Enviar código', + ), + const SizedBox(height: 20), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/login'); + }, + child: const Text( + 'Entrar con correo electronico', + style: TextStyle( + fontSize: 15.0, color: Color(0xFF65676B), + decoration: TextDecoration.underline, // Subrayado + ), + ), + ), + const SizedBox(height: 20), + RichText( + text: TextSpan( + style: const TextStyle( + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), + children: [ + const TextSpan(text: 'No estas registrado? '), + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/register'); + }, + child: const Text( + 'Registrarse', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ], + ), + )); + } } diff --git a/pubspec.lock b/pubspec.lock index 9d5d44d..2233c35 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -680,6 +680,14 @@ packages: url: "https://pub.dev" source: hosted version: "3.2.1" + responsive_builder: + dependency: "direct main" + description: + name: responsive_builder + sha256: a38ba9ba86c9daf08904674553034b651377b1d685d10ee450d8350ae51f76ec + url: "https://pub.dev" + source: hosted + version: "0.7.0" simple_gesture_detector: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 934cb52..df8555f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -62,6 +62,7 @@ dependencies: firebase_storage: firebase_messaging: ^14.5.0 flutter_local_notifications: ^14.0.0+1 + responsive_builder: ^0.7.0 dev_dependencies: flutter_test: