From 4c9770247d720075a698fa3e307f459abe937a5c Mon Sep 17 00:00:00 2001 From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com> Date: Sat, 17 Jun 2023 10:46:25 -0500 Subject: [PATCH] form --- lib/src/screens/professional_profile_web.dart | 524 +++++++++--------- 1 file changed, 266 insertions(+), 258 deletions(-) diff --git a/lib/src/screens/professional_profile_web.dart b/lib/src/screens/professional_profile_web.dart index 2e6e05c..32c7b6a 100644 --- a/lib/src/screens/professional_profile_web.dart +++ b/lib/src/screens/professional_profile_web.dart @@ -425,6 +425,7 @@ class _ProfessionalProfileWebScreenState double _space = 10; return Scaffold( + backgroundColor: const Color(0xFFD6F4FF), appBar: PopAppbar( onPressed: () { Navigator.pop(context); @@ -432,270 +433,277 @@ class _ProfessionalProfileWebScreenState label: 'Perfil profesional'), body: SingleChildScrollView( child: Center( - child: _isLoading - ? const Padding( - padding: EdgeInsets.symmetric(vertical: 30), - child: CircularProgressIndicator(), - ) - : Column( - children: [ - Container( - padding: const EdgeInsets.only(top: 20), - child: (selectedImagInBytes != null) - ? LocalPhotoWeb(file: selectedImagInBytes) - : ReferencePhotoWeb(ref: storage.ref().child(_photo)), - ), - // Padding( - // padding: const EdgeInsets.symmetric(vertical: 10), - // child: ElevatedButton.icon( - // onPressed: () { - // _selectFile(true); - // }, - // icon: const Icon(Icons.image), - // label: const Text('Elige una imagen'), - // ), - // ), - SizedBox( - width: 300, - child: Form( - key: _formKey, - child: Column( - children: [ - TextFormField( - keyboardType: TextInputType.number, - controller: _cedulaController, - inputFormatters: [ - FilteringTextInputFormatter - .digitsOnly // Solo permite caracteres numéricos - ], - validator: (String? value) { - if (value == null || value.isEmpty) { - return 'Ingrese una cedula válida'; - } - return null; - }, - decoration: const InputDecoration( - prefixIcon: Icon(Icons.person_outline), - hintText: 'Cedula (Obligatorio)', - ), - ), - SizedBox(height: _space), - ElevatedButton( - onPressed: () { - _selectFileCedula(true); - }, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFFD6F4FF), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(50), - ), - elevation: 0, - minimumSize: const Size(250, 50), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Cedula', - style: TextStyle( - color: Color(0xFF2BA4EC), - fontSize: 17, - ), - ), - const SizedBox(width: 15), - Icon( - imageCedulaBytes != null - ? Icons.check - : Icons.file_upload_outlined, - color: const Color(0xFF2BA4EC), - size: 30, - ), - ], - ), - ), - SizedBox(height: _space), - TextFormField( - readOnly: true, - onTap: () async { - final String? profesion = - (await Navigator.pushNamed( - context, '/profession')) as String?; - - if (profesion != null) { - setState(() { - _profession = profesion; - }); - } - }, - decoration: InputDecoration( - prefixIcon: - const Icon(Icons.assignment_ind_rounded), - suffixIcon: const Icon(Icons.arrow_drop_down), - hintStyle: profession == '' - ? const TextStyle() - : const TextStyle(color: Colors.black87), - hintText: profession == '' - ? 'Profesión (Obligatorio)' - : profession), - ), - SizedBox(height: _space), - ElevatedButton( - onPressed: () { - _selectFileCertificado(true); - }, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFFD6F4FF), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(50), - ), - elevation: 0, - minimumSize: const Size(250, 50), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Certificado profesional', - style: TextStyle( - color: Color(0xFF2BA4EC), - fontSize: 17, - ), - ), - const SizedBox(width: 15), - Icon( - imageCertificadoBytes != null - ? Icons.check - : Icons.file_upload_outlined, - color: const Color(0xFF2BA4EC), - size: 30, - ), - ], - ), - ), - SizedBox(height: _space), - TextFormField( - controller: _especializacionController, - decoration: const InputDecoration( - prefixIcon: - Icon(Icons.assignment_ind_rounded), - hintText: 'Especialización'), - ), - SizedBox(height: _space), - ElevatedButton( - onPressed: () async { - _selectFilesEspecializaciones(true); - }, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFFD6F4FF), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(50), - ), - elevation: 0, - minimumSize: const Size(250, 50), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Especialización', - style: TextStyle( - color: Color(0xFF2BA4EC), - fontSize: 17, - ), - ), - const SizedBox(width: 15), - Icon( - imagesEspecializacionsBytes.isEmpty - ? Icons.file_upload_outlined - : Icons.check, - color: const Color(0xFF2BA4EC), - size: 30, - ), - ], - ), - ), - ], - ), - ), - ), - Container( - width: 450, - margin: const EdgeInsets.only( - left: 40, right: 40, top: 40, bottom: 0), - padding: const EdgeInsets.symmetric( - horizontal: 20, vertical: 15), - decoration: BoxDecoration( - color: const Color(0xFFD6F4FF), - borderRadius: BorderRadius.circular(20), - boxShadow: [ - BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 1, - blurRadius: 5, - offset: const Offset(1, 3), - ), - ], - ), - child: const Row( + child: SizedBox( + width: 350, + child: Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + ), + color: Colors.white, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 20.0), + child: _isLoading + ? const Padding( + padding: EdgeInsets.symmetric(vertical: 30), + child: CircularProgressIndicator(), + ) + : Column( children: [ - Icon( - Icons.error_outline, - size: 27, - color: Colors.black54, + Container( + padding: const EdgeInsets.only(top: 20), + child: (selectedImagInBytes != null) + ? LocalPhotoWeb(file: selectedImagInBytes) + : ReferencePhotoWeb( + ref: storage.ref().child(_photo)), ), - SizedBox(width: 15), - Expanded( - child: Text( - 'Para añadir mas de una especialidad, envie mas fotos y separe por comas (,).', - style: - TextStyle(color: Colors.black, fontSize: 14), + SizedBox( + width: 300, + child: Form( + key: _formKey, + child: Column( + children: [ + TextFormField( + keyboardType: TextInputType.number, + controller: _cedulaController, + inputFormatters: [ + FilteringTextInputFormatter + .digitsOnly // Solo permite caracteres numéricos + ], + validator: (String? value) { + if (value == null || value.isEmpty) { + return 'Ingrese una cedula válida'; + } + return null; + }, + decoration: const InputDecoration( + prefixIcon: Icon(Icons.person_outline), + hintText: 'Cedula (Obligatorio)', + ), + ), + SizedBox(height: _space), + ElevatedButton( + onPressed: () { + _selectFileCedula(true); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFFD6F4FF), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: const Size(250, 50), + ), + child: Row( + mainAxisAlignment: + MainAxisAlignment.center, + children: [ + const Text( + 'Cedula', + style: TextStyle( + color: Color(0xFF2BA4EC), + fontSize: 17, + ), + ), + const SizedBox(width: 15), + Icon( + imageCedulaBytes != null + ? Icons.check + : Icons.file_upload_outlined, + color: const Color(0xFF2BA4EC), + size: 30, + ), + ], + ), + ), + SizedBox(height: _space), + TextFormField( + readOnly: true, + onTap: () async { + final String? profesion = + (await Navigator.pushNamed( + context, '/profession')) + as String?; + + if (profesion != null) { + setState(() { + _profession = profesion; + }); + } + }, + decoration: InputDecoration( + prefixIcon: const Icon( + Icons.assignment_ind_rounded), + suffixIcon: + const Icon(Icons.arrow_drop_down), + hintStyle: profession == '' + ? const TextStyle() + : const TextStyle( + color: Colors.black87), + hintText: profession == '' + ? 'Profesión (Obligatorio)' + : profession), + ), + SizedBox(height: _space), + ElevatedButton( + onPressed: () { + _selectFileCertificado(true); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFFD6F4FF), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: const Size(250, 50), + ), + child: Row( + mainAxisAlignment: + MainAxisAlignment.center, + children: [ + const Text( + 'Certificado profesional', + style: TextStyle( + color: Color(0xFF2BA4EC), + fontSize: 17, + ), + ), + const SizedBox(width: 15), + Icon( + imageCertificadoBytes != null + ? Icons.check + : Icons.file_upload_outlined, + color: const Color(0xFF2BA4EC), + size: 30, + ), + ], + ), + ), + SizedBox(height: _space), + TextFormField( + controller: _especializacionController, + decoration: const InputDecoration( + prefixIcon: + Icon(Icons.assignment_ind_rounded), + hintText: 'Especialización'), + ), + SizedBox(height: _space), + ElevatedButton( + onPressed: () async { + _selectFilesEspecializaciones(true); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFFD6F4FF), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: const Size(250, 50), + ), + child: Row( + mainAxisAlignment: + MainAxisAlignment.center, + children: [ + const Text( + 'Especialización', + style: TextStyle( + color: Color(0xFF2BA4EC), + fontSize: 17, + ), + ), + const SizedBox(width: 15), + Icon( + imagesEspecializacionsBytes.isEmpty + ? Icons.file_upload_outlined + : Icons.check, + color: const Color(0xFF2BA4EC), + size: 30, + ), + ], + ), + ), + ], + ), + ), + ), + Container( + margin: const EdgeInsets.only(top: 40), + padding: const EdgeInsets.symmetric( + horizontal: 20, vertical: 15), + decoration: BoxDecoration( + color: const Color(0xFFD6F4FF), + borderRadius: BorderRadius.circular(20), + boxShadow: [ + BoxShadow( + color: Colors.grey.withOpacity(0.5), + spreadRadius: 1, + blurRadius: 5, + offset: const Offset(1, 3), + ), + ], + ), + child: const Row( + children: [ + Icon( + Icons.error_outline, + size: 27, + color: Colors.black54, + ), + SizedBox(width: 15), + Expanded( + child: Text( + 'Para añadir mas de una especialidad, envie mas fotos y separe por comas (,).', + style: TextStyle( + color: Colors.black, fontSize: 14), + ), + ), + ], + ), + ), + Container( + alignment: Alignment.bottomCenter, + margin: const EdgeInsets.only( + top: 30, right: 20, left: 20, bottom: 30), + child: ElevatedButton( + onPressed: () { + if (_formKey.currentState!.validate()) { + sendInfo(); + } + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF2BA4EC), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: const Size(250, 50), + maximumSize: const Size(350, 50), + ), + child: const Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Enviar información', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 17, + ), + ), + SizedBox(width: 15), + Icon( + Icons.send, + color: Colors.white, + size: 20, + ), + ], + ), ), ), ], ), - ), - Container( - alignment: Alignment.bottomCenter, - margin: const EdgeInsets.only( - top: 80, right: 20, left: 20, bottom: 30), - child: ElevatedButton( - onPressed: () { - if (_formKey.currentState!.validate()) { - sendInfo(); - } - }, - style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFF2BA4EC), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(50), - ), - elevation: 0, - minimumSize: const Size(250, 50), - maximumSize: const Size(350, 50), - ), - child: const Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'Enviar información', - style: TextStyle( - color: Colors.white, - fontWeight: FontWeight.bold, - fontSize: 17, - ), - ), - SizedBox(width: 15), - Icon( - Icons.send, - color: Colors.white, - size: 20, - ), - ], - ), - ), - ), - ], - ), + ), + ), + ), ), ), );