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

login responsive

Browse Source
This commit is contained in:
Juan Felipe Duarte
2023-06-05 10:09:45 -05:00
parent 8a3c2d9453
commit 261e10968e
3 changed files with 185 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/screens/login.dart
+176 -1
View File
@@ -1,11 +1,11 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:intl_phone_field/intl_phone_field.dart'; import 'package:intl_phone_field/intl_phone_field.dart';
import 'package:prosappco/src/components/bottom_sheet.dart'; import 'package:prosappco/src/components/bottom_sheet.dart';
import 'package:prosappco/src/components/primary_btn.dart'; import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/controllers/phone_auth_controller.dart'; import 'package:prosappco/src/controllers/phone_auth_controller.dart';
import 'package:prosappco/src/screens/code_validation.dart'; import 'package:prosappco/src/screens/code_validation.dart';
import 'package:responsive_builder/responsive_builder.dart';
class LoginScreen extends StatefulWidget { class LoginScreen extends StatefulWidget {
const LoginScreen({super.key}); const LoginScreen({super.key});
@@ -21,6 +21,14 @@ class _LoginScreenState extends State<LoginScreen> {
@override @override
Widget build(BuildContext context) { 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( return BottomSheetExpanded(
children: [ children: [
const SizedBox( const SizedBox(
@@ -50,6 +58,7 @@ class _LoginScreenState extends State<LoginScreen> {
child: IntlPhoneField( child: IntlPhoneField(
controller: controller.phoneNo, controller: controller.phoneNo,
initialCountryCode: 'CO', initialCountryCode: 'CO',
keyboardType: TextInputType.number,
onChanged: (phoneNo) { onChanged: (phoneNo) {
completePhoneNumber = phoneNo.completeNumber; completePhoneNumber = phoneNo.completeNumber;
}, },
@@ -148,4 +157,170 @@ class _LoginScreenState extends State<LoginScreen> {
], ],
); );
} }
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,
),
),
),
),
],
),
),
],
),
),
),
],
),
));
}
} }
pubspec.lock
+8
View File
@@ -680,6 +680,14 @@ packages:
url: "https://pub.dev" url: "https://pub.dev"
source: hosted source: hosted
version: "3.2.1" 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: simple_gesture_detector:
dependency: transitive dependency: transitive
description: description:
pubspec.yaml
+1
View File
@@ -62,6 +62,7 @@ dependencies:
firebase_storage: firebase_storage:
firebase_messaging: ^14.5.0 firebase_messaging: ^14.5.0
flutter_local_notifications: ^14.0.0+1 flutter_local_notifications: ^14.0.0+1
responsive_builder: ^0.7.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test: