title: How can I display image from byte data in Flutter
body: <p>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.</p>
  <p>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.</p>
  <pre><code>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() =&gt; _CameraStreamPage();
  }
  
  class _CameraStreamPage extends State&lt;CameraStreamPage&gt; {
    // 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(&quot;Unable to connect: $e&quot;);
      });
    }
  
    void dataHandler(data) {
      String str = new String.fromCharCodes(data).trim();
      print(str);
  
      vars.picture += str;
      int lim = 640 * 480 * 3;
      if (vars.picture.length &gt;= (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: &lt;Widget&gt;[
              Container(
                width: 900,
                height: 550,
                color: Colors.purple,
                child: img,
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>Also Following is a piece of what I receive:</p>
  <pre><code>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¤¡ §«©ª¨ ¬£ ¬£ ª¢ ª¢¡©¡© ¨§§§¢¥¢¥££¡¤¡¤¢¢¢¢¢¢  ¢¢¢¢¢¢         ¢¢¢¢¢¢   ¢¢£¢¡  ¡¡¡ ¡¢¢¢¢£¢£££££¤¤£¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¤¥¦¦ § § §¦¦ § §¡¨¢ §¡ §¡ §¡ §¡ §¡ §¡¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¡¨¢¢©£¢©£¤ª¤¤ª¤¤ª¤¤ª¤¢©£¡¨¢¢©£¢©£¢©£¤ª¤¥«¦¥«¦¤ª¤¤ª¤¤«£¤«£¤«£¤«£¨ª£¨ª£¨ª£¨ª£¨©¤¨©¤¨©
  
   ¡¡¡ ¡¡    .'/,$,-&amp;..'/0(33+5MGM`Z_OFE&amp;)!,$!*#$+$%.&amp;)/'*/&amp;,.%+*!'*!',$*+&quot;(*!'*!'(&quot;')#()#('!&amp;/).7164.13-0.(+,&amp;),%+)#()&quot;*(!)' ()&quot;**#+.'/3.65085166288286054-31+1.'--&amp;,/&amp;,.%+.%+/&amp;,2)/5,26-38/5:28:28:28=4:=4:&lt;398045-02*.0(+,$(,$(+#'+#'+#'( #'&quot;( #+#'+#')#()#(*$*,%+-)..*/,(-*&amp;+,(-,(-,(--).-(0+&amp;.*%,*%,'&quot;*($+'&quot;*'&quot;**%,+&amp;.+',,(-.'-.'-.'-.'-/).-&amp;,-&amp;,.'-.'-.'-/).-&amp;,,%+,%+.'-.'-/'*+#'*
  </code></pre>