Good day everyone, today we will learn how to select multiple images in flutter and convert it to base64 and sending it to our backend. For the past week i have been having difficulty in getting the right plugin for selecting the images. I tried about 4 different plugins but all the ones i tried either didn't work well or they were making the app buggy until i found a nice plugin called multi_image_picker I read their documentation and thought to my self that this was well thought out and written well. I went on to implement in the app i am working on. 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 get in your terminal. Then open a new dart file and create a stateful widget and name it anything you like , we then create three list variables an empty array and name it anything you want and we also create a another empty array where the list of the selected assets from our plugin will be stored before adding to our files array and lastly a reslutlist array.

List images = List(); List files = []; List resultList;

Here i named my empty array as files that’s what we will pass to our parameter during our post request We then create a grid view where we are able to view our selected images you can also use a listview builder if thats what you are comfortable with

later on we can add our gridview to our scaffold or anything you are using to build that particular page. We also need to create another function which will be a future and we also have to await the multi image picker so we would use async/await , in this our loadAsset function we can specify different things like the number images we need to pick and if we want to enable camera and different colors.

The next thing to do is to create a function that converts the image asset from the image picker into a file. we could also send either a file or convert the file to base64 depending on what our backend needs.

Finally to send the images to the backend, we would create another function that is also a future so we use an async/await here, inside the function we will use a for loop to loop through the images selected then convert each image to base64 and add each image to our 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, ‘Your 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; } } }

Thanks for your time and i hope this article would help another flutter developer.