Flutter 显示 BASE64 解码后的图像

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(...)
)