Trusted answers to developer questions

Selecting multiple images and sending to the backend in Flutter

Good day everyone, today we will learn how to select multiple images in flutter, convert it to base64, and send it to our backend. So, for the past week, I have been having difficulty getting the right plugin to select images. I tried about four different plugins, but all the ones I tried either didn’t work well or made my app buggy. Luckily, I found a nice plugin called multi_image_picker.

How to

I read their documentation and went to implement it in the app I am working on. Here’s how you can do the same:

The first step is to add the plugin to your pubspec.yaml file. You can add the latest plugin at the time of your usage and then run the command flutter pub in your terminal:

Then, open a new dart file and create a stateful widget and name it anything you like.

Next, create three list variables in an empty array and name it anything you want.

We also need to create another empty array, where the list of the selected assets from our plugin will be stored, before adding to our files array.

Lastly, we need a reslutList array:

List<Asset> images = List<Asset>();

List files = [];

List<Asset> resultList;

Here, I named my empty array files, which we will pass to our parameter during our post request.

We can then create a grid view where we can view our selected images.

You can use a list view builder for this step if that’s what you are comfortable with.

Later on we can add our grid view to our scaffold or anything that you are using to build that particular page.

We also need to create another function and await the multi-image picker so that we can use async/await like so:

In our loadAsset function, we can specify different things like the number of images we need to pick and if we want to enable the camera and different colors.

So, the next thing to do is to create a function that converts the image asset from the image picker into a file.

You can send either a file or convert the file to base64 depending on your backend needs.

Our getimagefilefromasset() functions finally send the images to the backend. We then create another function, and use an async/await. This way, inside the function, we can use a for loop to loop through the images selected, convert each image to base64, and add each image to the list files variable we created above. Our submit function would look like this:

_submit() async {
    for (int i = 0; i < images.length; i++) {
        var path2 = await FlutterAbsolutePath.getAbsolutePath(images[i].identifier);
        var file = await getImageFileFromAsset(path2);
        var base64Image = base64Encode(file.readAsBytesSync());
        files.add(base64Image);
        var data = {
        "files": files,
        };
        try {
            var response = await http.post(data, 'url')
            var body = jsonDecode(response.body);
            print(body);
            if (body['msg'] == "Success!") {
            print('posted successfully!');
        } else {
            _showToast(context, body['msg']);
        }
        } catch (e) {
           return e.message;
        }
    }
}