How to put online image strings into SQLite database and retrive them in offline in Flutter?

Question

I have response from an get API and the response is an array of oject. In response object,there is an image property which have online image string. I am fetching data from API and inserting then into SQLite database so that I have that data while I am offline. I don't want to store or download the image files in local folder because the number of data is around 2k. If I store that much image in asset folder, my app size will be very big. How can I get the image from database while i am offline? Should I convert the image string into BASE64 string and use Image.memory? Is it the way to do so? Below is the response I am getting from API.

{
"name": "Kamal",
"image": "https://drive.google.com/file/d/1y1yYO0X8warJliizAo5ghKRP6cFdYvb9/view?usp=sharing",
"age": 25,
"phoneNo": 156789798
}

Update: When starting up my app, I want to fetch the image string from the database and load the in cache or any local directory for offline use. I have used CachedNetworkImageProvider and cached_network_image package. It gives me the following error

Exception: Could not instantiate image codec.

The image string which I have saved in sqlite from API is given below

"image": "https://drive.google.com/file/d/1y1yYO0X8warJliizAo5ghKRP6cFdYvb9/view?usp=sharing",

SQLite can store the binary data as-is. You can download the image file and store it in a BLOB column without modification. Alternatively, store it in the local file system and save the path in SQLite. You could also download it, convert it to base64 and store it in a TEXT column, but this seems like a lot of extra work for very little benefit. There are many ways to do this, pick one. — Tomalak, Jul 17 '20 at 16:36
@Tomalak, is there any way I can do it without storing or downloading the image file ? — Juthi Sarker Aka, Jul 17 '20 at 16:44
If you want to have the image available offline? Make a guess. — Tomalak, Jul 17 '20 at 17:16

Tanvir Arafat · Answer 1 · 2020-07-18T17:20:07.010

0

I have faced the same issue,and came up with a solution,the concept is to fetch the image url and saving the url on your local db and then while you are fetching the image for the 1st time you can save it in your root path directory.There is a configuration for this system.So that from the next time when the app requires to fetch the image it looks into It's offline directory 1st and then the online if image is not found.here is the code.

import 'package:path/path.dart' as p;   
    class ImageCashUtil {
      ImageCashUtil() {
        init();
      }
      init() async {
        WidgetsFlutterBinding.ensureInitialized();
        _appDocsDir = await getApplicationDocumentsDirectory();
        return _appDocsDir;
      }
    
      File fileFromDocsDir(String filename) {
        String pathName = p.join(_appDocsDir.path, filename);
        return File(pathName);
      }
    }
    
         Image(
                image: NetworkToFileImage(
                  url: imageUrl,
                  file: imageCashUtil.fileFromDocsDir(id),
                  debug: true,
                ),
                fit: BoxFit.cover,
              )

edited Jul 18 '20 at 17:20

answered Jul 18 '20 at 12:57

Tanvir Arafat

41
1
8

how do you configure the system? I wanted to save it in the cache for that I used cached_image_network but failed. Do you use PathProvider and file system to configure the system? – Juthi Sarker Aka Jul 18 '20 at 13:11
child: Image( image: NetworkToFileImage( url: imageUrl, file: imageCashUtil.fileFromDocsDir(id), debug: true, ), fit: BoxFit.cover, ) – Tanvir Arafat Jul 18 '20 at 13:27
class ImageCashUtil { ImageCashUtil() { init(); } init() async { WidgetsFlutterBinding.ensureInitialized(); _appDocsDir = await getApplicationDocumentsDirectory(); return _appDocsDir; } File fileFromDocsDir(String filename) { String pathName = p.join(_appDocsDir.path, filename); return File(pathName); } } – Tanvir Arafat Jul 18 '20 at 13:28
this the full code ,just copy and paste it on any dart file – Tanvir Arafat Jul 18 '20 at 13:53
I do that. But, it shows some error in the file. From where the reference p comes ? – Juthi Sarker Aka Jul 18 '20 at 14:11
add this import to your pubspec.yaml under depedecy path_provider: ^1.6.9 – Tanvir Arafat Jul 18 '20 at 15:45

How to put online image strings into SQLite database and retrive them in offline in Flutter?

1 Answers1