Accessing AWS S3 from a Flutter app

Published in

Geek Culture

5 min readJul 13, 2021

Overview

AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.

Amplify supports popular web frameworks including JavaScript, React, Angular, Vue, Next.js, and mobile platforms including Android, iOS, React Native, Ionic, Flutter. Get to market faster with AWS Amplify.

I tried to see how to use Amplify for Flutter to access AWS S3. I followed the documentation @ link to add AWS S3 support to Flutter.

#1 Prerequisites

To follow this demo, the Flutter application should already be configured to support Amazon Cognito. Follow this to add Cognito support.

AWS Services used

Though Cognito and S3 are used directly, following are the other AWS services used indirectly.

Cognito — For Authentication
Simple Storage Service (S3) — For Object Storage
Identity and Access Management (IAM) — For Roles/Policies
Security Token Service (STS) — To generate temporary credentials
CloudFormation — To deploy resources using templates

#2 Adding S3 support

From the command line, at the root of the Flutter application, execute the following commands.

➜ cd ~/Desktop/flutter_aws_s3
➜ amplify add storage

S3 bucket name specified is aws-s3-flutter-test. However, AWS adds random string at the end to make sure that the bucket does not already exist.
The access we specified here is create/update, read, delete. This determines the IAM policies that will be created and attached to the roles.

Create resources in the Cloud

This step creates physical resources in the cloud — S3 bucket, updating IAM Roles, creating IAM policies etc.

➜ amplify push

Verification

We are going to use AWS CLI to verify the resources created in the Cloud. Follow this page to install AWS CLI.

List the User pools

List the Identity Pools

List the Roles associated with the Identity Pool

Now, create an environment variable with the Authenticated role name. We will use this to see the policies attached to the role.

➜ auth_role='amplify-flutterawss3-dev-214301-authRole'

Show the policies attached to the role

Show the private policy

Note the Resource name. This policy allows a user to Upload/Download/Delete an object. However, he can perform these actions only on the objects stored in his own space under private/***. The cognito-identity.amazonaws.com:sub is the Identity of the logged in user. sub is for Subject.

Similarly other policies can be seen with the following commands. (Change the policy name based on the above output).

➜ aws iam get-role-policy --role-name "${auth_role}" --policy-name "Protected_policy_3fb921c1"➜ aws iam get-role-policy --role-name "${auth_role}" --policy-name "Public_policy_3fb921c1"➜ aws iam get-role-policy --role-name "${auth_role}" --policy-name "read_policy_3fb921c1"➜ aws iam get-role-policy --role-name "${auth_role}" --policy-name "Uploads_policy_3fb921c1"

Finally, we can verify the S3 bucket.

Once the resources are created, Amplify also updates the lib/amplifyconfiguration.dart . This is how Flutter app knows which User Pool/Identity Pool to use and which S3 bucket to access.

#3 Changes to Flutter app

3.1 Update `pubspec.yaml`

3.2 Initialization

3.3 Upload Objects

3.4 List Objects

3.5 Download Objects

#4 Sample application

I wrote a sample Flutter application using Amplify. It has the functionality to upload Images to S3 from mobile, and to download the Images from S3 to a temporary directory on the mobile.

GitHub — Repo

#5 Observations

The S3 bucket to use is configured in lib/amplifyconfiguration.dart file. Sometimes, we may need to use multiple S3 buckets. I am not sure how and where to configure this.

This is the signature of the function to upload a file. It does not have an option to specify the bucket name.

2. The Folder (Note that S3 does not really have folders/directories. It is a Flat structure. However, by using the forward slashes it shows as if the objects are stored in sub-folders) where the Image is stored in the S3 bucket is determined by the Access chosen when uploading the image.

Guest

Stored in public prefix
Images uploaded by multiple users with Guest access will be stored here. So, it is possible to access other’s public Images.
“Guest” access does not mean that the Images can be accessed by any one on the internet (Assuming they know the path). Guest access is only to the users of this app (By using the default IAM policies created via amplify).

Private

All Images are stored in private prefix.
However, each user has his own space (Directory/Prefix). It is not possible to access others’ private Images. Each authenticated user will have an ID in Identity pool. This ID is used to create user’s space.

Following is an Identity ID of an authenticated user.