0

Soy nuevo en Flutter y estoy practicando un poco... Pero estoy teniendo un problemita. Estoy haciendo un chat que recibe los mensajes desde un Api, pero necesito que los mensajes que se envian y se reciban se muestren en tiempo real. Los mensajes se insertan correctamente pero para ver los mensajes nuevos debo salir del chat y volver a entrar para que se actualicen y se agreguen los nuevos. Lo que quiero es que el widget que muestre los mensajes se actualice por si solo cada x segundo.

Esto me estaba funcionando en un primer momento, pero dejo de funcionar.

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        _createFloating(); //este es el metodo que quiero que se actualice cada segundo
        print('reload');
      });
    });
  }

 

Widget _createFloating() {
  return TimerBuilder.periodic(Duration(seconds: 10), builder: ((context) {
    return Scaffold(
        body: SingleChildScrollView(
          reverse: true,
          child: Column(
            children: [
              Text('${DateTime.now()}'),
              Container(
                margin: EdgeInsets.only(left: 5, right: 5, top: 24),
                child: Column(
                  children: List.generate(
                    textt.length,
                    (index) {
                      if (chatNivel[index].toString() == 'Cliente') {
                        return Padding(
                          padding: EdgeInsets.only(bottom: 10.0),
                          child: Align(
                            alignment: Alignment.topRight,
                            child: Container(
                              constraints: const BoxConstraints(
                                  minHeight: 30, minWidth: 100),
                              child: Card(
                                clipBehavior: Clip.antiAliasWithSaveLayer,
                                semanticContainer: true,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(10),
                                        topRight: Radius.circular(10),
                                        bottomLeft: Radius.circular(10))),
                                elevation: 0,
                                color: AppColor.primary,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.all(5),
                                    ),
                                    Text(
                                      textt[index].toString(),
                                      style: TextStyle(
                                        fontSize: 14,
                                        color: Colors.white,
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.all(
                                        5,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      } else {
                        return Padding(
                          padding: EdgeInsets.only(bottom: 10.0),
                          child: Align(
                            alignment: Alignment.topLeft,
                            child: Container(
                              constraints: const BoxConstraints(
                                  minHeight: 30, minWidth: 100),
                              child: Card(
                                clipBehavior: Clip.antiAliasWithSaveLayer,
                                semanticContainer: true,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(10),
                                        topRight: Radius.circular(10),
                                        bottomLeft: Radius.circular(10))),
                                elevation: 0,
                                color: AppColor.primary,
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    Padding(
                                      padding: const EdgeInsets.all(5),
                                    ),
                                    Text(
                                      textt[index].toString(),
                                      style: TextStyle(
                                        fontSize: 14,
                                        color: Colors.white,
                                      ),
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.all(
                                        5,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      }
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: _buildCommentBox());
  }));
}
2
  • Buenas. ¿Podría por favor no abrir dos preguntas iguales? Sí tienes que aportar algo más de información, edita la primera. Deberías eliminar está pregunta y editar la anterior.
    – Manuel
    Commented el 30 oct. 2022 a las 10:27
  • Micio, tienes que implementar un Listener en tu API que escuche los cambios en tu base de datos. Te invito a mostrar más acerca de la API que utilizas para ayudarte a implementarlo. Commented el 30 oct. 2022 a las 13:00

1 respuesta 1

0

Puedes hacerlo de 2 maneras:

  • Hacer un longpoll a la API cada x tiempo para comprobar los mensajes (aunque es poco eficiente).
  • En tu API implementar algo como socket.io, que esté constantemente enviando cambios cuando llegue un nuevo mensaje, de esta forma en la App solo debes crear un listener de ese servicio o darle manejo con el gestor de estados que estes usando.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.