¡Este es un tutorial para crear un clon completo de Whatsapp con Flutter, Firebase y Riverpod 2.0! Este tutorial cubre todas las características principales de una aplicación de chat: autenticación de número de teléfono, chat individual y grupal solo con contactos: incluye texto, imagen, gif, video, audio (con grabación), uso compartido de emojis y almacenamiento en caché de imágenes y videos, estado. visible solo para contactos y desaparece después de 24 horas, videollamadas (individuales y grupales), estado en línea/fuera de línea, función de mensaje visto, desplazamiento automático en mensajes nuevos, respuesta a mensajes y mucho más.

Requisito previo: Conceptos básicos de aleteo y dardos

Código de inicio: https://github.com/RivaanRanawat/whatsapp-flutter-ui/tree/main
Código fuente final: https://github.com/RivaanRanawat/flutter-whatsapp-clone
Servidor de discordia: https://discord.gg/Q8Rx8YWFVF

Agradecimiento especial: @aadhiarun2230

Links importantes:
Imagen de fondo: https://github.com/RivaanRanawat/whatsapp-clone-tutorial/blob/master/assets/bg.png
Tutorial para proveedores: https://youtu.be/Mk3nsf3wTIs
Extensión de fragmento de Riverpod: https://marketplace.visualstudio.com/items?itemNamerobert-brunhage.flutter-riverpod-snippets

Marcas de tiempo:
(00:00:00) Introducción y demostración del clon de Whatsapp
(00:00:40) Configuración del proyecto Flutter
(00:04:06) Resumen del proyecto Flutter
(00:07:53) Conexión de la aplicación Flutter a Firebase
(00:15:42) Configuración de iOS de Flutter Firebase
(00:17:47) Configuración de Android de Flutter Firebase
(00:20:37) Interfaz de usuario de la pantalla de inicio
(00:35:25) UI de la pantalla de inicio de sesión
(00:59:51) Autenticación del teléfono Flutter Firebase
(01:14:05) Agregar Riverpod
(01:20:29) Controlador de autenticación
(01:32:42) Acerca de Riverpod
(01:35:20) Resolver el error de la aplicación iOS
(01:38:35) Interfaz de usuario de pantalla OTP
(01:43:30) Verificación de OTP
(01:54:39) UI de la pantalla de información del usuario
(02:10:18) Guardar datos de usuario en Firestore
(02:32:28) Estado de autenticación persistente
(02:42:53) Visualización de contactos en el teléfono del usuario
(03:18:15) Mostrando nombre y estado en línea/fuera de línea
(03:32:16) Modificación de la interfaz de usuario del campo de chat inferior
(03:47:47) Envío de mensaje de texto
(04:37:19) Visualización de contactos de chat
(04:49:40) Mostrando mensajes
(04:59:41) Desplazamiento automático en mensaje nuevo
(05:04:16) Cambio del estado en línea/fuera de línea
(05:13:4) Envío de mensaje de imagen
(05:29:13) Visualización de imagen almacenada en caché
(05:38:19) Envío de mensaje de vídeo
(05:51:28) Envío de emojis
(06:02:34) Compartir GIF
(06:19:02) Grabar y compartir audio en la aplicación Flutter
(06:35:16) Reproducción de audio en la aplicación Flutter
(06:44:47) Responder mensajes
(07:23:45) Característica vista
(07:31:56) Carga de estados/historias
(08:05:20) Visualización de estados/historias
(08:24:35) Creando grupos
(09:00:57) Visualización de grupos
(09:07:38) Obtener chats grupales y chatear en grupo
(09:28:16) Gestión del panel y las credenciales de Agora
(09:32:23) Videollamada
(10:06:46) Desconexión de llamada
(10:11:04) Llamadas grupales
(10:15:58) Refactorización de código
(10:18:43) Nota sobre las funciones de Firebase
(10:21:05) Pruebas en dispositivo físico (Android)
(10:22:47) Conclusión

Únase a este canal para obtener acceso a ventajas:
https://www.youtube.com/channel/UC-1kzHtwBY8n0TY5NhYxNaw/join

Conéctate conmigo aquí:
Instagram: https://instagram.com/optimalcoding
GitHub: https://github.com/rivaanranawat
Linkedin: https://www.linkedin.com/in/rivaan-ranawat
Facebook: https://www.facebook.com/rivaan.ranawat/
Correo: [correo electrónico protegido]
Medio: https://namanrivaan.medium.com
Gorjeo: https://twitter.com/RanawatRivaan

#flutter #firebase #chat

Aproveche la oportunidad para conectarse y compartir este video con sus amigos y familiares si lo encuentra útil.