Flutter display image after decode of BASE64 - flutter

Question

I believe I have successfully encoded an image to Base64 and stored as a JSON string in a JSON field.
In my app, I retrieve the field and then try to decode it; and, if it's there, I try to display it.
But I keep getting errors and no image appears. I have tried several things, but I keep getting assertion errors, either from Image_provider or Framework.
I have confirmed during debugging that I only have one record coming in with image data and it gets decoded and the assertions look correct.
Any thoughts or ideas?
#override
Widget build(BuildContext context) {
_key = new PageStorageKey('${widget.datediv.toString()}');
return new Column(
children: <Widget>[
new Container(
child: new Text(
mydate,
textAlign: TextAlign.left,
style: new TextStyle( color: Colors.grey, fontWeight: FontWeight.bold,),
),
alignment: Alignment.centerLeft,
padding: new EdgeInsets.only(left: 10.0),
),
new Container(
child: new Divider(
height: 5.0,
color: Colors.grey,
),
padding: new EdgeInsets.only(left: 10.0, right: 10.0),
),
/**/
new FutureBuilder(
future: _responseFuture,
builder:
(BuildContext context, AsyncSnapshot<http.Response> response) {
if (!response.hasData) {
return const Center(
child: const Text('Loading Messages...'),
);
} else if (response.data.statusCode != 200) {
return const Center(
child: const Text('Error loading data'),
);
} else {
List<dynamic> json = JSON.decode(response.data.body);
messagelist = [];
json.forEach((element) {
DateTime submitdate =
DateTime.parse(element['submitdate']).toLocal();
if (element['image'] != null) {
imgStr = element['image'];
Uint8List mybytes = BASE64.decode(imgStr);
}
_addImage() {
assert(imgStr != null);
new Container(
width: 150.0,
child: new Image.memory(mybytes),
);
}
_addNoImage() {
assert(imgStr == null);
new Text('');
}
messagelist.add(new Container(
//width: 300.0,
padding: new EdgeInsets.all(10.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
padding: new EdgeInsets.only(bottom: 5.0),
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new CircleAvatar(
child: new Text(element['sendname'][0], style: new TextStyle(fontSize: 15.0),),
radius: 12.0,
),
new Text(' '),
new Text(
element['sendname'],
style: new TextStyle(
fontSize: 15.0, fontWeight: FontWeight.bold),
),
new Text(' '),
new Text(new DateFormat.Hm().format(submitdate), style: new TextStyle(color: Colors.grey, fontSize: 12.0),),
],
),
),
new Row(
children: <Widget>[
new Text(' '),
new Flexible(
child: new Text('${element['message']}'),
)
],
),
imgStr != null ? _addImage(): _addNoImage(),
],
),
),
);
});
return new Column(children: messagelist);
}
},
),
],
);
}

Answer 1

You may want to consider checking if the image bytes that you're using in Image.memory(bytes) is valid. Flutter's current null-safety feature should help catch this early on. If imgStr is nullable, you can add a null-check for verification before returning Image.memory(). If null, then return a placeholder Widget.
As for your other question on adjusting the dimensions of the widget displayed. Aside from BoxDecoration, you can also use ConstrainedBox with BoxConstraints
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: _maxWidth,
minWidth: _minWidth,
),
child: Image(...)
)