update

2023-11-09 11:21:54 -05:00
parent db2f965e4c
commit b3d1740649
51 changed files with 397 additions and 274 deletions
@@ -0,0 +1,153 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
+import 'package:prosappco/src/controllers/otp_controller.dart';
+
+class NewNumberValidationScreen extends StatefulWidget {
+  const NewNumberValidationScreen({super.key});
+
+  @override
+  State<NewNumberValidationScreen> createState() =>
+      _NewNumberValidationScreenState();
+}
+
+class _NewNumberValidationScreenState extends State<NewNumberValidationScreen> {
+  dynamic otp;
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+        child: Scaffold(
+      resizeToAvoidBottomInset: false,
+      backgroundColor: const Color(0xFFD6F4FF),
+      body: Stack(
+        children: [
+          Container(
+            margin: const EdgeInsets.only(top: 280),
+            width: double.infinity,
+            height: 600,
+            decoration: const BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.only(
+                    topRight: Radius.circular(50),
+                    topLeft: Radius.circular(50))),
+          ),
+          Container(
+            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: 280, left: 25),
+            child: Row(
+              children: <Widget>[
+                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,
+                  ),
+                  textAlign: TextAlign.right,
+                ),
+              ],
+            ),
+          ),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
+            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: 18.0, color: Color(0xFF65676B))),
+                  )),
+              Padding(
+                padding: const EdgeInsets.only(bottom: 20),
+                child: Row(
+                  children: [
+                    const Expanded(
+                      child: TextField(
+                        decoration: InputDecoration(
+                          border: InputBorder.none,
+                          hintText: '+57',
+                          suffixIcon: Icon(Icons.edit),
+                        ),
+                      ),
+                    ),
+                    TextButton(
+                      onPressed: () {
+                        // Acción a realizar cuando se hace clic en el texto
+                      },
+                      child: const Text('Reenviar código'),
+                    ),
+                  ],
+                ),
+              ),
+              const Align(
+                alignment: Alignment.topLeft,
+                child: Padding(
+                  padding: EdgeInsets.only(bottom: 5),
+                  child: Text('Código',
+                      textAlign: TextAlign.left,
+                      style:
+                          TextStyle(fontSize: 18.0, color: Color(0xFF65676B))),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(bottom: 20),
+                child: 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);
+                  },
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(bottom: 40),
+                child: Center(
+                    child: ElevatedButton(
+                  onPressed: () {
+                    OTPController.instance.verifyOTP(otp);
+                  },
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: const Color(0xFF2BA4EC), // Color del botón
+                    shape: RoundedRectangleBorder(
+                      borderRadius:
+                          BorderRadius.circular(50), // Bordes redondeados
+                    ),
+                    elevation: 0,
+                    minimumSize: const Size(230, 60), // Tamaño mínimo del botón
+                  ),
+                  child: const Text(
+                    'Valida el código',
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontWeight: FontWeight.bold,
+                      fontSize: 18,
+                    ),
+                  ),
+                )),
+              ),
+            ]),
+          ),
+        ],
+      ),
+    ));
+  }
+}