Uploading images to AWS S3 with Flutter — Part 2

Welcome to this tutorial for uploading images to AWS S3 — part 2

Part 1 is available here.

You can connect with me on Instagram

Let’s start by seeing our end goal

Let’s get a refresh of problems-

• Handle photos permission
• Open image picker, select and load image
• Upload image to AWS S3 bucket
• Show loading and error
• Open image
• Save images
• Delete image

We already solved problem 1, 2, and 3 in part 1.

Make sure you check part 1 here.

Let’s solve problem 4 now

Problem 4: Show loading and error uploading image

What did we do?

• Added library flutter_spinkit: 4.1.2 to pubspec.yaml.

• Created a PhotoStatus enum which can be LOADING, ERROR and LOADED
• Created a list to keep the status of each photo
• On selecting a photo, image status will be LOADING, then we see a loading spinner on image
• If an image is successfully uploaded, we change the status to LOADED
• If any error while uploading, we change the status to ERROR

Let’s check the output-

For Android-

For IOS-

Problem 4 solved.

Let’s solve problem 5 now

Problem 5: Open image

main.dart

gallery_photo_wrapper.dart

What did we do?

• Added library photo_view: ^0.9.1 to pubspec.yaml.

• Added click listener on photo click
• If photo is not uploaded, we show using file system
• If photo is uploaded, we show using the network from S3
• If there is an error uploading photo, we will not show a photo.
• Added a back button, to allow a user to exit photo view

Let’s check the output-

For Android-

For IOS-

Problem 5 solved.

Let’s solve problem 6 now

Problem 6: Save images locally

What did we do?

• Added library photo_view: ^0.9.1 to pubspec.yaml.

• When the app is opened, we load all the images from shared preferences or local storage
• All loaded images will be shown using AWS S3 download links, because if the same image might not be available in the file system and we only stored the S3 url locally
• When the save button is clicked, we save the list in shared preferences or local storage
• We can also store in an online database

Let’s check the output-

For Android-

For IOS-

Problem 6 solved.

Let’s solve problem 7 now

Problem 7: Delete image

What did we do?

• Add a delete widget on all images
• Adding a click listener on delete widget

Let’s check the output-

For Android-

For IOS-

Problem 7 solved.

We did it 🙂

Check the full project here.

Thank you for staying till the end

More flutter spinner blogs

I will be posting more about flutter, so stay tuned 🙂