How can I display image from byte data in Flutter

Question

I have two sides for my projects. One is a camera, with which we use OpenCV, to capture frames, in 8 bit 3 channel (R,G,B), format and write it to socket to be streamed. Image is 640 x 480 resolution, so 640x480x3 bytes are written to the socket.

On the other end, I have a Flutter app which is listening to this socket. I am able to successfully gather the bytes, but I am not able to restructure an image using them. How can I do this? I am sharing what I have so far, but I am not able to display any visual.

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:ferenova_flutter_app/plan_display_page/plan_display_page.dart';
import 'package:ferenova_flutter_app/vars.dart' as vars;

import 'dart:io';

// ignore: must_be_immutable
class CameraStreamPage extends StatefulWidget {
  PlanDisplayPageState pdps;
  Socket socket;
  String title;

  CameraStreamPage(
    String title,
    PlanDisplayPageState pdps,
  ) {
    this.title = title;
    this.pdps = pdps;
  }

  @override
  _CameraStreamPage createState() => _CameraStreamPage();
}

class _CameraStreamPage extends State<CameraStreamPage> {
  // VlcPlayerController _vlcViewController;
  PlanDisplayPageState pdps;
  Socket socket;
  Image img;
  Uint8List bytes;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    pdps = widget.pdps;
    this.socket = widget.socket;

    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    Socket.connect(vars.streamIP, int.parse(vars.streamPORT))
        .then((Socket sock) {
      socket = sock;
      socket.listen(dataHandler,
          onError: errorHandler, onDone: doneHandler, cancelOnError: false);
    }).catchError((Object e) {
      print("Unable to connect: $e");
    });
  }

  void dataHandler(data) {
    String str = new String.fromCharCodes(data).trim();
    print(str);

    vars.picture += str;
    int lim = 640 * 480 * 3;
    if (vars.picture.length >= (640 * 480 * 3)) {
      bytes = Uint8List.fromList(vars.picture.codeUnits);
      print('BBBBBBBBBBBBBBBBB: ' + bytes.length.toString());
      setState(() {
        img = new Image.memory(
          bytes,
          width: 640,
          height: 480,
          scale: 1,
          fit: BoxFit.contain,
        );
        vars.picture = vars.picture.substring(lim);
      });
    }
  }

  void errorHandler(error, StackTrace trace) {
    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    print('ERRORORORORORORORROROROR');

    print(error);
  }

  void doneHandler() {
    img = Image.network(
        'https://am23.mediaite.com/tms/cnt/uploads/2020/01/babyyoda.jpg');
    print('DONEDONEDONEDONEDONEDONE');
    vars.picture = '';
    socket.destroy();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      // child: SingleChildScrollView(
      child: Container(
        width: 1000,
        height: 600,
        color: Colors.green[400],
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          // mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: 900,
              height: 550,
              color: Colors.purple,
              child: img,
            ),
          ],
        ),
      ),
    );
  }
}

Also Following is a piece of what I receive:

P]rP]rT\rU^sX^tY_uYcvXbuVcsTaqP^lP^lR_mP^lR_mR_mU^jU^jS]iR\hQYjS[lR\oT]pT]pT]pR]mR]mR]mR]mU_pU_pU`nU`nYar[ctZd{]hYiaqhzw¤¡ §«©ª¨ ¬£ ¬£ ª¢ ª¢¡©¡© ¨§§§¢¥¢¥££¡¤¡¤¢¢¢¢¢¢  ¢¢¢¢¢¢         ¢¢¢¢¢¢   ¢¢£¢¡  ¡¡¡ ¡¢¢¢¢£¢£££££¤¤£¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¥¦¦ § § §¦¦ § §¡¨¢ §¡ §¡ §¡ §¡ §¡ §¡¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¢©£¢©£¤ª¤¤ª¤¤ª¤¤ª¤¢©£¡¨¢¢©£¢©£¢©£¤ª¤¥«¦¥«¦¤ª¤¤ª¤¤«£¤«£¤«£¤«£¨ª£¨ª£¨ª£¨ª£¨©¤¨©¤¨©

 ¡¡¡ ¡¡    .'/,$,-&..'/0(33+5MGM`Z_OFE&)!,$!*#$+$%.&)/'*/&,.%+*!'*!',$*+"(*!'*!'("')#()#('!&/).7164.13-0.(+,&),%+)#()"*(!)' ()"**#+.'/3.65085166288286054-31+1.'--&,/&,.%+.%+/&,2)/5,26-38/5:28:28:28=4:=4:<398045-02*.0(+,$(,$(+#'+#'+#'( #'"( #+#'+#')#()#(*$*,%+-)..*/,(-*&+,(-,(-,(--).-(0+&.*%,*%,'"*($+'"*'"**%,+&.+',,(-.'-.'-.'-.'-/).-&,-&,.'-.'-.'-/).-&,,%+,%+.'-.'-/'*+#'*

Answer 1

You can try this

Image.memory(Uint8List.fromList(YOUR_BYTES));