Home > Back-end >  Flutter - Error when using Image.network with external image
Flutter - Error when using Image.network with external image

Time:12-01

I'm new to Flutter, and I'm consuming an API that comes with data and an icon in a String, but this icon doesn't work with Image.newtork

An example of the icon image links I get from the request is this one stored in e.icone:

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABWCAYAAABPao....."

I researched and saw that there is some way to decode the base64, but I didn't find it and I don't know how to display it on screen!

Container(
          padding: EdgeInsets.symmetric(horizontal: 6, vertical: 6),
          decoration: new BoxDecoration(
            color:
                (index   % 2 == 0) ? Color(0xFFE8CFA7) : Color(0xFFA8CCE9),
          ),
          child: Column(
              children: previsao
                  .map((e) => Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Container(
                            width: 104,
                            child: Text("${e.diaSemana}",
                                style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.w500)),
                          ),
                          Image.network(e.icone),
                          Text("${e.tempMin}°",
                              style: TextStyle(fontSize: 18)),
                          Text("${e.tempMax}°",
                              style: TextStyle(fontSize: 18)),
                        ],
                      ))
                  .toList()))

CodePudding user response:

As you said, you need to convert it as bytes to use it with Image.memory(), first add this on top of your file :

import 'dart:convert';

then you can show it as a widget with this :

Image.memory(Base64Decoder().convert("here the data:image/..."))

replace "here the data:image/..." with your image URL got from your API.

  • Related