How to convert image(url format) to Base64 from Api response - api

Question

I am trying to convert image(url format) from Api into BASE64 string but i don't know how to do it.Api response look like this
{
"albumId": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
},
i tried like this
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
Future<List> getJson() async {
String apiUrl = 'https://jsonplaceholder.typicode.com/photos';
http.Response response = await http
.get(apiUrl);
return json.decode(response.body);
}
void main() async {
List _data = await getJson();
String _body = "${_data[0]['url']}";
String data = base64.encode(_body.bodyBytes); Error here ..The getter 'bodyBytes' isn't defined for the class 'String'.
print("$data");
runApp(
new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: new Text('Json parse'),
centerTitle: true,
backgroundColor: Colors.orangeAccent,
),
body: new Center(
child: new Text("khan ${_data[0]['url']}"),
),
),
),
);
}
i know i am doing it wrong, i am new to flutter. it will be great if someone also tell me how to show that string to image again.
Note : I am storing that image string for Ecommerece cart purpose.

Answer 1

You can copy paste run full code below
Step 1: You can parse json string with
Future<List<Payload>> getJson() async {
String apiUrl = 'https://jsonplaceholder.typicode.com/photos';
http.Response response = await http.get(apiUrl);
return payloadFromJson(response.body);
}
Step 2: get base64 string
payloadList = await getJson();
http.Response imageResponse = await http.get(
payloadList[0].url,
);
base64String = base64.encode(imageResponse.bodyBytes);
Step 3: show image with
base64String == null
? Container()
: Image.memory(base64Decode(base64String)),
payloadList == null
? Container()
: Image.network(payloadList[0].url),
working demo
full code
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
List<Payload> payloadFromJson(String str) =>
List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));
String payloadToJson(List<Payload> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class Payload {
int albumId;
String title;
String url;
Payload({
this.albumId,
this.title,
this.url,
});
factory Payload.fromJson(Map<String, dynamic> json) => Payload(
albumId: json["albumId"],
title: json["title"],
url: json["url"],
);
Map<String, dynamic> toJson() => {
"albumId": albumId,
"title": title,
"url": url,
};
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
String base64String;
List<Payload> payloadList;
Future<List<Payload>> getJson() async {
String apiUrl = 'https://jsonplaceholder.typicode.com/photos';
http.Response response = await http.get(apiUrl);
return payloadFromJson(response.body);
}
void _incrementCounter() async {
payloadList = await getJson();
http.Response imageResponse = await http.get(
payloadList[0].url,
);
base64String = base64.encode(imageResponse.bodyBytes);
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
base64String == null
? Container()
: Image.memory(base64Decode(base64String)),
payloadList == null
? Container()
: Image.network(payloadList[0].url),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}