CODEWITHSUNDEEP
flutterbase64
Ynpee p.
Ynpee p.

Reputation: 55

Flutter: How to convert base64 to image?

I've sent a message in JSON format and I can show the data as Base64 but I don't know how to convert it to an image and show it.


class _ShowformState extends State<Showform> {
  List data;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Maintenancce Information", style: TextStyle(fontSize: 13)),),
      body: _buildListView(),);}
  Widget _buildListView() {
    return ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (context, index) {
          return _buildColumnInfo(data[index]);
        }); }
  @override
  void initState() {
    super.initState();
    this.getJSONData();}

Future<String> getJSONData() async {
    var url = "http://192.168.1.35:7000/";
    var response = await http.get(url);
    if (response.statusCode == 200) {
      var jsonResponse = json.decode(utf8.decode(response.bodyBytes));
      setState(() {
        data = jsonResponse['data'];});
      var itemCount = jsonResponse['totalItems'];}

  Widget _buildColumnInfo(item) {
    return new Container(
            padding: new EdgeInsets.all(12.0),
            child: new Column(
              children: <Widget>[
                Text("Data Inserted : ${item['photoBase64']}"),], ),)}}

What methods do I need to decode?

Upvotes: 1

Views: 6587

Answers (3)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Simple below code is for convert base64 to Image :

Image.memory(base64.decode(base64String.split(',').last))

Upvotes: 1

Amit Kava
Amit Kava

Reputation: 694

You can't convert direct base64 to Image but you can display image like below.

Uint8List bytes= base64.decode("${item['photoBase64']}");

In UI

Image.memory(
        bytes,
        fit: BoxFit.cover,
   );

Upvotes: 0

Andrii Kovalchuk
Andrii Kovalchuk

Reputation: 1047

You can try this code:

Uint8List convertBase64Image(String base64String) {
  return Base64Decoder().convert(base64String.split(',').last);
}

And add to your UI:

Image.memory(
  convertBase64Image(item['photoBase64']),
  gaplessPlayback: true,
)

Upvotes: 3

Related Questions