I have implemented an image streaming player with tcp socket in flutter.
c++ server from which flutter socket gets image data sends images.
size of images is about 200KB ~ 1MB.
In Flutter, I'm trying to maintain 4 frames per sec.
Both of sockets in C++(server) and Dart(client) can deal with that amount of data.
However, when I display those data through Image.memory(data) widget, it flickered.
(The reason of the flicker is, first as I think, that n+1th data gets in during nth data is being rendered by Image widget. Second, the size of image is so big that app cannot render images without blank. )
So I want to implement double buffering.
Now, My Flutter app gets data and send it to multiple streams alternately.
Then multiple stream builders in Stack widget get those data and display by Image.memory() widget.
The flicker has been reduced considerably, but it is still flickering.
Even, It is not a real double buffering method.
The order of widgets in stack cannot be changed without rendering again.
Is there any way or plug-ins?
Thank you.
UPDATE
There is a way to make it be not flickering. gapless playback option.
_image = Image.memory(data, gaplessPlayback: true)
Flutter does not offer access to the actual graphics libraries (probably OpenGL ES) on the device, so there is no true double buffering.
The widget for video playback is video_player you can add it via packages.
If you cannot bring your data into a format compatible with that package, you can always draw your data yourself by using a canvas and the drawImage method. All of this probably through a custom painter.
Both of the above methods should easily support the 4 fps you ask for.