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

update

Browse Source
This commit is contained in:
Felipe
2023-11-09 11:21:54 -05:00
parent db2f965e4c
commit b3d1740649
51 changed files with 397 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/src/presentation/screens/code_validation.dart
+274
View File
@@ -0,0 +1,274 @@
import 'package:flutter/material.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:get/get.dart';
import 'package:prosappco/src/components/bottom_sheet.dart';
import 'package:prosappco/src/components/column_padding.dart';
import 'package:prosappco/src/components/primary_btn.dart';
import 'package:prosappco/src/controllers/otp_controller.dart';
import 'package:prosappco/src/controllers/phone_auth_controller.dart';
import 'package:responsive_builder/responsive_builder.dart';
class CodeValidationScreen extends StatelessWidget {
CodeValidationScreen({super.key, this.phoneNumber});
String? phoneNumber;
var otp;
final controller = Get.put(OTPController());
@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(
horizontalPadding: 10,
children: [
Row(
children: [
IconButton(
icon: const Icon(
Icons.arrow_back,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
const Text(
'Valida el código',
style: TextStyle(
color: Color(0xFF262626),
fontSize: 38.0,
fontWeight: FontWeight.bold,
),
),
],
),
ColumnPadding(
alineacion: MainAxisAlignment.start,
padding: const EdgeInsets.symmetric(horizontal: 25),
children: [
const SizedBox(height: 10),
const SizedBox(
width: double.infinity,
child: Text(
'Numero de celular',
style: TextStyle(
fontSize: 18.0,
color: Color(0xFF65676B),
),
),
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: TextField(
onChanged: (value) {
phoneNumber = value;
},
controller: TextEditingController(text: phoneNumber ?? ''),
decoration: const InputDecoration(
border: InputBorder.none,
hintText: '',
suffixIcon: Icon(Icons.edit),
),
),
),
TextButton(
child: const Text('Reenviar código'),
onPressed: () {
if (phoneNumber!.isNotEmpty) {
PhoneAuthController.instance.phoneAuthentication(
phoneNumber!,
);
}
},
),
],
),
const SizedBox(height: 10),
const SizedBox(
width: double.infinity,
child: Text(
'Codigo',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 18.0,
color: Color(0xFF65676B),
),
),
),
const SizedBox(height: 10),
OtpTextField(
numberOfFields: 6,
focusedBorderColor: Colors.blue,
fillColor: Colors.black.withOpacity(0.1),
filled: true,
keyboardType: TextInputType.number,
onSubmit: (code) {
otp = code;
OTPController.instance.verifyOTP(otp);
},
),
const SizedBox(height: 40),
PrimaryButtom(
onPressed: () {
OTPController.instance.verifyOTP(otp);
},
label: 'Valida el código',
),
const SizedBox(height: 30),
],
),
],
);
}
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.07),
color: Colors.white,
height: height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
IconButton(
icon: const Icon(
Icons.arrow_back,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
SizedBox(width: width * 0.01),
const Text(
'Validar código',
style: TextStyle(
color: Color(0xFF262626),
fontSize: 38.0,
fontWeight: FontWeight.bold,
),
),
],
),
ColumnPadding(
alineacion: MainAxisAlignment.start,
padding: const EdgeInsets.symmetric(horizontal: 25),
children: [
const SizedBox(height: 10),
const SizedBox(
width: double.infinity,
child: Text(
'Numero de celular',
style: TextStyle(
fontSize: 18.0,
color: Color(0xFF65676B),
),
),
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
child: TextField(
onChanged: (value) {
phoneNumber = value;
},
controller: TextEditingController(
text: phoneNumber ?? ''),
decoration: const InputDecoration(
border: InputBorder.none,
hintText: '',
suffixIcon: Icon(Icons.edit),
),
),
),
TextButton(
child: const Text('Reenviar código'),
onPressed: () {
if (phoneNumber!.isNotEmpty) {
PhoneAuthController.instance
.phoneAuthentication(
phoneNumber!,
);
}
},
),
],
),
const SizedBox(height: 10),
const SizedBox(
width: double.infinity,
child: Text(
'Codigo',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 18.0,
color: Color(0xFF65676B),
),
),
),
const SizedBox(height: 10),
OtpTextField(
numberOfFields: 6,
focusedBorderColor: Colors.blue,
fillColor: Colors.black.withOpacity(0.1),
filled: true,
keyboardType: TextInputType.number,
onSubmit: (code) {
otp = code;
OTPController.instance.verifyOTP(otp);
},
),
const SizedBox(height: 40),
PrimaryButtom(
onPressed: () {
OTPController.instance.verifyOTP(otp);
},
label: 'Valida el código',
),
const SizedBox(height: 30),
],
),
],
),
),
),
],
),
),
);
}
}