Flutter - Save network image to sqflite

Question

Hello guys i want to safe an image in my sqflite database i tried many thing but i only get errors like invalid image data or something else.

class HomeScreen extends StatelessWidget {

String _base64 ="";

@override
Widget build(BuildContext context) {

() async {
  http.Response response = await http.get(Uri.parse(
      "https://www.mera-petfood.com/files/_processed_/a/4/csm_iStock-521697453_69acb65057.jpg"));

  _base64 = base64Encode(response.bodyBytes);
  
};


Uint8List bytes = base64Decode(_base64);


return Scaffold(
  appBar: null,
  body: SizedBox(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          child: const Text("open database"),
          onPressed: () async {},
        ),

        Image.memory(bytes),
        Text(model.base64String(bytes)),
      ],
    ),
  ),
);
}
}

thats my actual code but i only get this Exception:

════════ Exception caught by image resource service ════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

Why is it not working i cant solve it?

In my experience I do not like to save images in the database, I prefer to save the path of the image in the database and that image then store it in a folder of the app itself — Elvis Salabarria Aquino, Jan 20 '22 at 15:34

score 1 · Answer 1 · answered Jan 20 '22 at 18:13

There are 2 ways you can do this.

Store it as a file
Store it as a blob

For second one, You need to read about blob first. So the way you are going to do this is Make a blob of the image and then save it in the database. Now you may ask what is a blob?

Blob stands for binary large object which is a collection of binary data stored as a single entity. Blobs are typically images, audio or other multimedia objects, though sometimes binary executable code is stored as a blob.

Please read the following articles:

Saving images: files or blobs?

How to save image data to sqflite database in flutter for persistence

score 0 · Accepted Answer · answered Jan 21 '22 at 01:32

Your main problem is not saving to sqflite, but your anonymous function is never called. So, the _base64 is always empty string.

First, this not works:

() async {
  http.Response response = await http.get(Uri.parse(
      "https://www.mera-petfood.com/files/_processed_/a/4/csm_iStock-521697453_69acb65057.jpg"));

  _base64 = base64Encode(response.bodyBytes);
  
};

because it never called.

It should be (see the last part with ():

() async {
  http.Response response = await http.get(Uri.parse(
      "https://www.mera-petfood.com/files/_processed_/a/4/csm_iStock-521697453_69acb65057.jpg"));

  _base64 = base64Encode(response.bodyBytes);
  
}();

Second, you should not add the anonymous function to build because it will be called repeatedly. Try moving it as class scope function. Something like this (You need to use stateful widget):

class HomeScreen extends StatefulWidget {
    String _base64 ="";
    
    @override
    Widget build(BuildContext context) {
      ...
    }

    void getImage() async {
      http.Response response = await http.get(Uri.parse(
          "https://www.mera-petfood.com/files/_processed_/a/4/csm_iStock-521697453_69acb65057.jpg"));
    
    
       setState(() {
          _base64 = base64Encode(response.bodyBytes);
       });

    };    
}

then, called it initState:

@override
void initState() {
   super.initState();
   getImage();
}

and, finally, use it to your widget in build method:

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: SizedBox(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text("open database"),
              onPressed: () async {},
            ),
    
            // When _base64 is empty string, then it means
            // image is on the way. 
            _base64.isEmpty? CircularProgressIndicator(): Image.memory(base64Decode(_base64)),
          ],
        ),
      ),
    );

}

Flutter - Save network image to sqflite

2 Answers2