Flutter : Save and Fetch ImageNetwork from API using SQFlite - flutter

Question

I have problem with Insert and Fetch Image From API to local Directory.
So i have code to save image like this :
Save Image Code
Future saveImage(String imgUrl, String imgUrl2) async {
var response = await http.get("$baseURLimage/berita/$imgUrl");
var documentDirectory = await getApplicationDocumentsDirectory();
File file = File(join(documentDirectory.path, imgUrl2));
file.writeAsBytesSync(response.bodyBytes);
print(response);
print(response.bodyBytes);
print(documentDirectory);
print(file);
return file;
}
Button Code
void _saveImage() async {
var saveImage =
await api.saveImage(widget.gambarBerita, widget.gambarBerita);
print(saveImage);
}
In Console give me this :
I/flutter (23336): Instance of 'Response'
I/flutter (23336): [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 255, 219, 0, 132, 0, 13, 13, 13, 13, 14, 13, 14, 16, 16, 14, 20, 22, 19, 22, 20, 30, 27, 25, 25, 27, 30, 45, 32, 34, 32, 34, 32, 45, 68, 42, 50, 42, 42, 50, 42, 68, 60, 73, 59, 55, 59, 73, 60, 108, 85, 75, 75, 85, 108, 125, 105, 99, 105, 125, 151, 135, 135, 151, 190, 181, 190, 249, 249, 255, 1, 13, 13, 13, 13, 14, 13, 14, 16, 16, 14, 20, 22, 19, 22, 20, 30, 27, 25, 25, 27, 30, 45, 32, 34, 32, 34, 32, 45, 68, 42, 50, 42, 42, 50, 42, 68, 60, 73, 59, 55, 59, 73, 60, 108, 85, 75, 75, 85, 108, 125, 105, 99, 105, 125, 151, 135, 135, 151, 190, 181, 190, 249, 249, 255, 255, 192, 0, 17, 8, 11, 244, 8, 88, 3, 1, 34, 0, 2, 17, 1, 3, 17, 1, 255, 196, 0, 156, 0, 0, 2, 3, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 4, 5, 3, 6, 7, 16, 0, 2, 2, 1, 4, 1, 3, 3, 2, 4, 5, 5, 0, 0, 1, 13, 0, 1, 2, 3, 17, 4, 18, 33, 49, 5, 19, 65, 81, 34, 50, 97, 20, 113, 6, 35, 66, 82, 21, 51, 129, 145, 161, 36, 52, 98, 114, 177, 67, 83, 37, 53, 115, 22, 68, 99, 193, 8
I/flutter (23336): Directory: '/data/user/0/com.example.flutter_news/app_flutter'
I/flutter (23336): File: '/data/user/0/com.example.flutter_news/app_flutter/92dae9b51087d930a32aff53eaded163.jpg'
I/flutter (23336): File: '/data/user/0/com.example.flutter_news/app_flutter/92dae9b51087d930a32aff53eaded163.jpg'
But my images still not saved in my device.
can you help me ?

Answer 1

You can use package https://pub.dev/packages/network_to_file_image
In demo, it download image and show it, so you can see success or not directly
From official introduction
This is a mixture of FileImage and NetworkImage. It will download the image from the url once, save it locally in the file system, and then use it from there in the future.
full example code
import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:network_to_file_image/network_to_file_image.dart';
import 'package:path/path.dart' as p;
import 'package:path_provider/path_provider.dart';
String flutterLogoUrl =
"https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png";
String flutterLogoFileName = "flutter.png";
void main() async {
runApp(
MaterialApp(
home: Demo(
url: flutterLogoUrl,
file: await file(flutterLogoFileName),
),
),
);
}
Future<File> file(String filename) async {
Directory dir = await getApplicationDocumentsDirectory();
String pathName = p.join(dir.path, filename);
return File(pathName);
}
class Demo extends StatelessWidget {
final String url;
final File file;
const Demo({Key key, this.url, this.file}) : super(key: key);
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text('Network to file image example')),
body: Padding(
padding: const EdgeInsets.all(30.0),
child: Image(image: NetworkToFileImage(url: url, file: file, debug: true)),
),
);
}
In demo picture, you can see it print image url and saved file path