537 lines
24 KiB
Dart
537 lines
24 KiB
Dart
import 'dart:io';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:injector/injector.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
import 'package:image_picker/image_picker.dart';
|
|
import 'package:prosappco/blocs/auth_bloc/auth_bloc.dart';
|
|
import 'package:prosappco/blocs/my_user_bloc/my_user_bloc.dart';
|
|
import 'package:prosappco/blocs/profile_bloc/profile_bloc.dart';
|
|
import 'package:prosappco/components/birthday_picker.dart';
|
|
import 'package:prosappco/components/gender_dropdown.dart';
|
|
import 'package:prosappco/screens/profile/components/profile_item.dart';
|
|
import 'package:prosappco/screens/profile/profile_email_screen.dart';
|
|
import 'package:prosappco/screens/profile/profile_phone_screen.dart';
|
|
|
|
class ProfileScreen extends StatefulWidget {
|
|
const ProfileScreen({super.key});
|
|
|
|
@override
|
|
State<ProfileScreen> createState() => _ProfileScreenState();
|
|
}
|
|
|
|
class _ProfileScreenState extends State<ProfileScreen> {
|
|
final TextEditingController _nameController = TextEditingController();
|
|
final TextEditingController _emailController = TextEditingController();
|
|
final TextEditingController _newEmailController = TextEditingController();
|
|
final TextEditingController _phoneController = TextEditingController();
|
|
final TextEditingController _birthdayController = TextEditingController();
|
|
final TextEditingController _genderController = TextEditingController();
|
|
final TextEditingController _passwordController = TextEditingController();
|
|
|
|
XFile? _imageFile;
|
|
bool isLoading = false;
|
|
|
|
bool enableLoginWithEmail = false;
|
|
bool obscurePassword = true;
|
|
IconData iconPassword = CupertinoIcons.eye_fill;
|
|
|
|
@override
|
|
void dispose() {
|
|
_nameController.dispose();
|
|
_emailController.dispose();
|
|
_phoneController.dispose();
|
|
_birthdayController.dispose();
|
|
_genderController.dispose();
|
|
_passwordController.dispose();
|
|
_newEmailController.dispose();
|
|
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final authBloc = Injector.appInstance.get<AuthBloc>();
|
|
|
|
return BlocProvider<AuthBloc>(
|
|
create: (context) => authBloc,
|
|
child: BlocListener<ProfileBloc, ProfileState>(
|
|
listener: (context, state) {
|
|
if (state is UpdateUserInfoLoading) {
|
|
setState(() {
|
|
isLoading = true;
|
|
});
|
|
} else if (state is UpdateUserInfoSuccess) {
|
|
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
|
|
content: Text('Información actualizada'),
|
|
));
|
|
setState(() {
|
|
isLoading = false;
|
|
});
|
|
} else if (state is UpdateUserInfoFailure) {
|
|
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
|
|
content: Text('Error al actualizar la información'),
|
|
));
|
|
setState(() {
|
|
isLoading = false;
|
|
});
|
|
}
|
|
},
|
|
child: Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('Perfil'),
|
|
),
|
|
body: BlocBuilder<MyUserBloc, MyUserState>(
|
|
builder: (context, state) {
|
|
if (state.status == MyUserStatus.success) {
|
|
_nameController.text = state.user!.name ?? '';
|
|
_emailController.text = state.user!.email ?? '';
|
|
_phoneController.text = state.user!.phone ?? '';
|
|
_birthdayController.text = state.user!.birthday ?? '';
|
|
_genderController.text = state.user!.gender ?? '';
|
|
|
|
return SingleChildScrollView(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 40, vertical: 10),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
pictureWidget(state, context),
|
|
const SizedBox(height: 30),
|
|
TextFormField(
|
|
controller: _nameController,
|
|
decoration: const InputDecoration(
|
|
labelText: 'Nombre',
|
|
prefixIcon: Icon(Icons.person),
|
|
hintText: 'Nombre (obligatorio)',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(10.0),
|
|
)),
|
|
errorBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(color: Colors.red),
|
|
),
|
|
focusedErrorBorder: OutlineInputBorder(
|
|
borderSide:
|
|
BorderSide(color: Colors.red, width: 2.0),
|
|
),
|
|
),
|
|
validator: (value) {
|
|
if (value == null || value.isEmpty) {
|
|
return 'Por favor, ingrese su nombre';
|
|
}
|
|
return null;
|
|
},
|
|
),
|
|
const SizedBox(height: 20),
|
|
ProfileItem(
|
|
title: 'Iniciar sesión con correo',
|
|
subtitle: _emailController.text,
|
|
leading: Icons.email_rounded,
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
CupertinoPageRoute(
|
|
builder: (context) =>
|
|
const ProfileEmailScreen(),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
const SizedBox(height: 20),
|
|
ProfileItem(
|
|
title: 'Iniciar sesión con teléfono',
|
|
subtitle: _phoneController.text,
|
|
leading: Icons.phone_iphone_rounded,
|
|
onTap: () {
|
|
Navigator.push(
|
|
context,
|
|
CupertinoPageRoute(
|
|
builder: (context) =>
|
|
const ProfilePhoneScreen(),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
|
|
// Column(
|
|
// children: [
|
|
// const SizedBox(height: 20.0),
|
|
// TextFormField(
|
|
// readOnly: true,
|
|
// controller: _emailController,
|
|
// decoration: const InputDecoration(
|
|
// labelText: 'Email',
|
|
// prefixIcon: Icon(Icons.email_rounded),
|
|
// hintText: 'Email',
|
|
// border: OutlineInputBorder(
|
|
// borderRadius: BorderRadius.all(
|
|
// Radius.circular(10.0),
|
|
// )),
|
|
// errorBorder: OutlineInputBorder(
|
|
// borderSide: BorderSide(color: Colors.red),
|
|
// ),
|
|
// focusedErrorBorder: OutlineInputBorder(
|
|
// borderSide: BorderSide(
|
|
// color: Colors.red, width: 2.0),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// const SizedBox(height: 20.0),
|
|
// TextFormField(
|
|
// readOnly: true,
|
|
// controller: _phoneController,
|
|
// decoration: const InputDecoration(
|
|
// labelText: 'Número de Teléfono',
|
|
// prefixIcon: Icon(Icons.phone_android_rounded),
|
|
// hintText: '+57',
|
|
// border: OutlineInputBorder(
|
|
// borderRadius: BorderRadius.all(
|
|
// Radius.circular(10.0),
|
|
// )),
|
|
// errorBorder: OutlineInputBorder(
|
|
// borderSide: BorderSide(color: Colors.red),
|
|
// ),
|
|
// focusedErrorBorder: OutlineInputBorder(
|
|
// borderSide:
|
|
// BorderSide(color: Colors.red, width: 2.0),
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// _emailController.text.isEmpty
|
|
// ? Column(
|
|
// children: [
|
|
// const SizedBox(height: 20.0),
|
|
// GeneralCheckbox(
|
|
// text:
|
|
// 'Habilitar inicio de sesión con correo (Opcional)',
|
|
// initialValue: enableLoginWithEmail,
|
|
// onChanged: (value) {
|
|
// setState(() {
|
|
// enableLoginWithEmail = value;
|
|
// });
|
|
// },
|
|
// ),
|
|
// enableLoginWithEmail
|
|
// ? Container(
|
|
// decoration: BoxDecoration(
|
|
// border: Border.all(
|
|
// color: Colors.blue,
|
|
// width: 0.5,
|
|
// ),
|
|
// borderRadius:
|
|
// BorderRadius.circular(10),
|
|
// ),
|
|
// padding: const EdgeInsets.all(10),
|
|
// child: Column(
|
|
// children: [
|
|
// TextFormField(
|
|
// controller:
|
|
// _newEmailController,
|
|
// validator: (String? value) {
|
|
// if (enableLoginWithEmail) {
|
|
// if (value == null ||
|
|
// value.isEmpty) {
|
|
// return 'Por favor ingrese un email';
|
|
// }
|
|
// final RegExp
|
|
// emailRegExp =
|
|
// RegExp(
|
|
// r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
|
|
// if (!emailRegExp
|
|
// .hasMatch(value)) {
|
|
// return 'Por favor ingrese un email válido';
|
|
// }
|
|
// return null;
|
|
// } else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
// decoration:
|
|
// const InputDecoration(
|
|
// prefixIcon: Icon(
|
|
// Icons.email_rounded),
|
|
// hintText: 'Email',
|
|
// ),
|
|
// ),
|
|
// const SizedBox(height: 20.0),
|
|
// TextFormField(
|
|
// controller:
|
|
// _passwordController,
|
|
// obscureText:
|
|
// obscurePassword,
|
|
// validator: (value) {
|
|
// if (enableLoginWithEmail) {
|
|
// if (value == null ||
|
|
// value.isEmpty) {
|
|
// return 'Por favor ingrese una contraseña.';
|
|
// }
|
|
// if (value.length < 5) {
|
|
// return 'Debe tener al menos 5 caracteres.';
|
|
// }
|
|
// return null;
|
|
// } else {
|
|
// return null;
|
|
// }
|
|
// },
|
|
// decoration: InputDecoration(
|
|
// prefixIcon: const Icon(
|
|
// Icons.lock_rounded),
|
|
// suffixIcon: IconButton(
|
|
// onPressed: () {
|
|
// setState(() {
|
|
// obscurePassword =
|
|
// !obscurePassword;
|
|
// if (obscurePassword) {
|
|
// iconPassword =
|
|
// CupertinoIcons
|
|
// .eye_fill;
|
|
// } else {
|
|
// iconPassword =
|
|
// CupertinoIcons
|
|
// .eye_slash_fill;
|
|
// }
|
|
// });
|
|
// },
|
|
// icon: Icon(iconPassword,
|
|
// color: Colors
|
|
// .grey[600]),
|
|
// ),
|
|
// hintText: 'Contraseña',
|
|
// ),
|
|
// ),
|
|
// const SizedBox(height: 20),
|
|
// Container(
|
|
// margin:
|
|
// const EdgeInsets.only(
|
|
// left: 5,
|
|
// right: 5,
|
|
// top: 5,
|
|
// bottom: 5,
|
|
// ),
|
|
// padding: const EdgeInsets
|
|
// .symmetric(
|
|
// horizontal: 10,
|
|
// vertical: 8,
|
|
// ),
|
|
// 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: 20,
|
|
// color: Colors.black54,
|
|
// ),
|
|
// SizedBox(width: 10),
|
|
// Expanded(
|
|
// child: Text(
|
|
// 'Al habilitar el inicio de sesión con correo, se cerrara la sesión actual.',
|
|
// style: TextStyle(
|
|
// color: Colors
|
|
// .black54,
|
|
// fontSize: 13,
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// )
|
|
// ],
|
|
// ),
|
|
// )
|
|
// : const SizedBox(),
|
|
// ],
|
|
// )
|
|
// : const SizedBox(),
|
|
_birthdayController.text.isEmpty &&
|
|
_genderController.text.isEmpty
|
|
? Column(
|
|
children: [
|
|
const SizedBox(height: 20.0),
|
|
BirthdayPicker(
|
|
onDateSelected: (birthDay) {
|
|
_birthdayController.text =
|
|
DateFormat('dd/MM/yyyy')
|
|
.format(birthDay);
|
|
},
|
|
controller: _birthdayController,
|
|
),
|
|
const SizedBox(height: 20.0),
|
|
GenderDropdown(
|
|
controller: _genderController,
|
|
),
|
|
],
|
|
)
|
|
: const SizedBox(),
|
|
const SizedBox(height: 60.0),
|
|
saveButton(state, context),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
} else {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
},
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget saveButton(MyUserState state, BuildContext context) {
|
|
return ElevatedButton(
|
|
onPressed: () {
|
|
if (isLoading) {
|
|
return;
|
|
}
|
|
|
|
if (enableLoginWithEmail) {
|
|
if (_newEmailController.text.isEmpty) {
|
|
return;
|
|
}
|
|
|
|
if (_passwordController.text.isEmpty) {
|
|
return;
|
|
}
|
|
|
|
context.read<AuthBloc>().add(
|
|
AuthEventAddEmailAndPassword(
|
|
email: _newEmailController.text,
|
|
password: _passwordController.text,
|
|
),
|
|
);
|
|
|
|
_emailController.text = _newEmailController.text;
|
|
}
|
|
|
|
final myUser = state.user!.copyWith(
|
|
name: _nameController.text,
|
|
email: _emailController.text,
|
|
phone: _phoneController.text,
|
|
birthday: _birthdayController.text,
|
|
gender: _genderController.text,
|
|
nickname: _nameController.text.trim().toLowerCase(),
|
|
);
|
|
|
|
context.read<ProfileBloc>().add(
|
|
UpdateUserInfo(
|
|
myUser: myUser,
|
|
filePicture: _imageFile?.path,
|
|
),
|
|
);
|
|
|
|
// Navigator.pop(context);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.blue,
|
|
padding: const EdgeInsets.symmetric(vertical: 5),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
shadowColor: Colors.grey,
|
|
elevation: 5,
|
|
),
|
|
child: Container(
|
|
constraints: const BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
|
|
alignment: Alignment.center,
|
|
child: isLoading
|
|
? const CircularProgressIndicator(
|
|
color: Colors.white,
|
|
)
|
|
: const Text(
|
|
'Actualizar',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget pictureWidget(MyUserState state, BuildContext context) {
|
|
final pictureUrl = state.user?.picture;
|
|
final pathImageFile = _imageFile?.path;
|
|
|
|
ImageProvider<Object>? imageProvider;
|
|
|
|
if (pathImageFile != null && pathImageFile.isNotEmpty) {
|
|
imageProvider = FileImage(File(pathImageFile));
|
|
} else if (pictureUrl != null && pictureUrl.isNotEmpty) {
|
|
imageProvider = NetworkImage(pictureUrl);
|
|
}
|
|
|
|
return GestureDetector(
|
|
onTap: () async {
|
|
final ImagePicker picker = ImagePicker();
|
|
final XFile? image = await picker.pickImage(
|
|
source: ImageSource.gallery,
|
|
maxHeight: 500,
|
|
maxWidth: 500,
|
|
imageQuality: 40,
|
|
);
|
|
|
|
if (image != null) {
|
|
setState(() {
|
|
_imageFile = image;
|
|
});
|
|
}
|
|
},
|
|
child: Hero(
|
|
tag: 'picture-profile',
|
|
child: pictureContainerWidget(imageProvider),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget pictureContainerWidget(ImageProvider<Object>? imageProvider) {
|
|
final image = imageProvider == null
|
|
? null
|
|
: DecorationImage(
|
|
image: imageProvider,
|
|
fit: BoxFit.contain,
|
|
);
|
|
|
|
final widget = image == null
|
|
? Icon(
|
|
CupertinoIcons.person,
|
|
color: Colors.grey.shade400,
|
|
size: 40,
|
|
)
|
|
: null;
|
|
|
|
return Container(
|
|
width: 120,
|
|
height: 120,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey.shade300,
|
|
shape: BoxShape.circle,
|
|
image: image,
|
|
),
|
|
child: widget,
|
|
);
|
|
}
|
|
}
|