Flutter Uint8list string from database render as Image

Question

Scenario:

• I have a signature pad and its points (List) saves to SQL server.
• I fetch it from database and display it to another screen.

Flutter Save Code

I will just provide important code that I think are relevant.

// This is save button
onPressed() {
   data = {
     'Signature' : _fbKey.currentState.value['signature'].toString()
   }
}

// trigger _save function
if (_fbKey.currentState.saveAndValidate()) {
  _save(data);
}

// _save function
_save(data) async {
   final response = await http.post('url here..', body: data);
}

Laravel Codes I will provide code that I also think are relevant

Route::middleware('admin')->post('link...', function (Request $request) {
   $user = new User;

   $user->Signature= $request->Signature;

   $user->save();

   return response()->json([
        'message' => 'Success',
        'data' => $user
    ], 200);
});

Flutter Fetch Code

getData() async {
   final response = await http.get('url goes here');

   var signRes = jsonDecode(response.body);
   String rawSign = signRes['data']['Signature'];
   print(rawSign); // output [137, ....so on]

   List<int> list = rawSign.codeUnits;
   print(list); // the output that I expected suddenly change to [91, ..... so on]

   Uint8List signature = Uint8List.fromList(list); 

}

@override
Widget build(BuildContext context) {
   return Scaffold(
   .......
   .......
      child: Container(
         child: Image.memory(signature);         
      )
   )
}

SQL Server

column : Signature
datatype: nvarchar(max)

Exception I got:

could not instantiate image codec

Question

• As you can see, the point(List) that I got from Signature pad is legit points(List) but I convert it to toString() when saving it because Flutter is throwing exception saying cannot cast Uint8Arrat to String. So, is it possible to get Stringed List points from Database and not convert it to .codeUnits? Because when doing that, the value changes from what expected.

Answer 1

I finally get it working thanks to the other SO question.

Basically, I convert my data to base64 first before saving into database.

data = {
  'Signature' : base64Encode(_fbKey.currentState.value['signature'])
}

And then convert it back to its original form

var signRes = jsonDecode(response.body);
String rawSign = signRes['data']['Signature'];
Uint8List signature = base64Decode(rawSign);

And finally, boom. The image successfully renders in the app as expected.