[英]Flutter display image after decode of BASE64
我相信我已经成功地将图像编码为 Base64 并在 JSON 字段中存储为 JSON 字符串。
在我的应用程序中,我检索该字段然后尝试对其进行解码; 而且,如果它在那里,我会尝试显示它。
但是我不断收到错误消息,并且没有图像出现。 我尝试了几件事,但我不断收到来自 Image_provider 或 Framework 的断言错误。
我在调试期间确认我只有一条记录带有图像数据并且它被解码并且断言看起来正确。
有什么想法或想法吗?
@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);
}
},
),
],
);
}
您可能需要考虑检查您在Image.memory(bytes)
中使用的图像字节是否有效。 Flutter 当前的 null-safety 特性应该有助于尽早发现这一点。 如果imgStr
可以为空,则可以在返回Image.memory()
之前添加空检查以进行验证。 如果是null,则返回一个占位符Widget。
至于您关于调整显示的小部件尺寸的其他问题。 除了 BoxDecoration,您还可以将ConstrainedBox
与BoxConstraints
一起使用
ConstrainedBox(
constraints: BoxConstraints(
maxWidth: _maxWidth,
minWidth: _minWidth,
),
child: Image(...)
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.