Flutter apps with AWS Amplify Backend: Part 1 — Basic Setup
Tags: aws, flutter, amplify, android
Published: 2020-09-10 00:11:25


# Flutter apps with AWS Amplify Backend: Part 1 — Basic Setup

Firebase has become the de-facto backend solution for Flutter applications because of its ease-of-use. However, the new Amplify Flutter provides an alternative for developers who prefer an AWS backend.


In late August, AWS Amplify announced the release of the developer preview for the Flutter framework. The features provided are **not yet ready for production**, so don’t ditch Firebase just yet.

## What is AWS Amplify?

From the [Github repo:](https://github.com/aws-amplify/amplify-flutter)
> AWS Amplify provides a declarative and easy-to-use interface across different categories of cloud operations. Our default implementation works with Amazon Web Services (AWS), but AWS Amplify is designed to be open and pluggable for any custom backend or service.

So basically, it makes it **A LOT easier** to use AWS Amplify as a backend to your Flutter applications.

## What can we do with Amplify (so far)?

1. **Authentication**— Create user authentication experiences with [Amazon Cognito](https://aws.amazon.com/cognito/)

1. **Analytics**— Collect analytics data with [Amazon Pinpoint](https://aws.amazon.com/pinpoint/)

1. **Storage**— Store user content with [Amazon S3](https://aws.amazon.com/s3/)

## How can we set this up?

The prerequisites for this tutorial are as follows:

1. [**Flutter**](https://flutter.dev/docs/get-started/install) version 1.20.0 or higher

1. [**Node.js**](https://nodejs.org/) v10.0 or higher

1. [**npm**](https://www.npmjs.com/)v5.0 or later

1. [**git**](https://git-scm.com/)v2.14.1 or later

The following tutorial series assumes that you are using [Android Studio](https://developer.android.com/studio) as your IDE.

Install the Amplify-Flutter Developer Preview version of the [Amplify CLI](https://docs.amplify.aws/cli) by running:

    npm install -g @aws-amplify/cli@flutter-preview

Next, you must [create an AWS account](https://portal.aws.amazon.com/billing/signup?redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation#/start) and select the ‘free tier’ (unless you are feeling brave).

### Add User to IAM

Before going any further, we need to add a new user to [AWS Identity and Access Management (IAM)](https://aws.amazon.com/iam/) which we will use for the rest of this tutorial.

Navigate to the [IAM Portal](https://console.aws.amazon.com/iam/home?region=ap-northeast-1#/users) and select ‘Add User’. Make sure you have selected the proper region (top right).

![](https://cdn-images-1.medium.com/max/3662/1*uSORmvD5PDQfrdQrjcOljA.png)

You will be guided through a series of steps to create your user:

![Grant yourself programmatic access and name your project.](https://cdn-images-1.medium.com/max/2000/1*05i9DirM0ZnISxEyDmnrTw.png)*Grant yourself programmatic access and name your project.*

![Create a new permissions group](https://cdn-images-1.medium.com/max/2358/1*NufVAWoFDk8Q2y-DNfyhFg.png)*Create a new permissions group*

![Create a group with AdministratorAccess](https://cdn-images-1.medium.com/max/3294/1*mDvAB-T7qMMe_DtGnASzgA.png)*Create a group with AdministratorAccess*

![Review Settings](https://cdn-images-1.medium.com/max/2070/1*E_xiDHUVlsN_VJ5KxQrTbg.png)*Review Settings*

![User creation Success](https://cdn-images-1.medium.com/max/2034/1*_FgiYg_zdWlripi6DElH7w.png)*User creation Success*

Keep these two access keys handy, you will need them soon!

### Create New Flutter Project

Open your Android IDE, and create a new default Flutter app.

![Create a new flutter application](https://cdn-images-1.medium.com/max/2000/1*ueHDOSvOYj-i4_dGajZt9g.png)*Create a new flutter application*

### **Initialize Amplify Project**

From the integrated terminal in Android Studio, initialize your Amplify project:

    amplify init

This command will guide you through a series of steps to initialize your project. It should look something like this (depending on your region and preferred text editor):

![](https://cdn-images-1.medium.com/max/2000/1*yzbfDoSGzpIq48O_uX-YBw.png)

When asked whether you want to set up a new user, select NO since we already did that in the previous step. Use the *accessKeyId *and *SecretAccessKey *you obtained at the end of the user setup to complete this step:

![](https://cdn-images-1.medium.com/max/2000/1*GOAPGAyKOOSlzcsKqmTNjw.png)

When you are finished with the setup, *amplify *should output:

![](https://cdn-images-1.medium.com/max/2000/1*rH03RDaEAq2idXzCGbRbUQ.png)

### Amplify Files

Our local application is now connected to the cloud — great work! If you explore your project directory a little bit, you will notice that Amplify has created a few folders and configuration files that are used to manage your project.

![New Files](https://cdn-images-1.medium.com/max/2000/1*nunNYXV45-iejAGGAJzaaA.png)*New Files*

The first thing you should know is that your **.gitignore** has been modified to exclude some of the files that amplify has created:

    #amplify
    amplify/\#current-cloud-backend
    amplify/.config/local-*
    amplify/mock-data
    amplify/backend/amplify-meta.json
    amplify/backend/awscloudformation
    build/
    dist/
    node_modules/
    aws-exports.js
    awsconfiguration.json
    amplifyconfiguration.json
    amplify-build-config.json
    amplify-gradle-config.json
    amplifytools.xcconfig

* **lib/amplifyconfiguration.dart**: manages identity and authentication to your cloud project. Contains sensitive information.

* **amplify/backend**: contains lots of metadata about your cloud instance and any services you may have enabled (we haven’t enabled anything yet)

In general, you won’t need to modify any of these files yourself — that is the beauty with Amplify — all of the nitty-gritty configurations are done automagically through the amplify cli, pretty cool right?

### Configuring our App

Now that all the boring stuff is out of the way — we can start using Amplify in our app. Let’s start with a simple app that doesn’t include any services (authentication, analytics, etc…) but simply configures itself with our cloud instance.

In your **pubspec.yaml **add:

    amplify_core: '<1.0.0'

This will give us access to the core Amplify packages. Here is a simple main.dart that will launch an app, connect it to your Amplify cloud instance, and output a message indicating success.

```dart
import 'package:amplify_core/amplify_core.dart';
import 'package:flutter/material.dart';

import 'amplifyconfiguration.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
    routes: {},
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // gives our app awareness about whether we are succesfully connected to the cloud
  bool _amplifyConfigured = false;

  // Instantiate Amplify
  Amplify amplifyInstance = Amplify();

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

    // amplify is configured on startup
    _configureAmplify();
  }

  void _configureAmplify() async {
    if (!mounted) return;

    await amplifyInstance.configure(amplifyconfig);
    try {
      setState(() {
        _amplifyConfigured = true;
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Amplify Core example app'),
            ),
            body: ListView(padding: EdgeInsets.all(10.0), children: <Widget>[
              Center(
                child: Column(children: [
                  const Padding(padding: EdgeInsets.all(5.0)),
                  Text(_amplifyConfigured ? "configured" : "not configured"),
                ]),
              )
            ])));
  }
}
```

After running our app on an emulated device, if everything worked we should see the following render on our screen:

![](https://cdn-images-1.medium.com/max/2000/1*4U7IlPZeqC0XSMa-QP-Mng.png)

![](https://cdn-images-1.medium.com/max/2000/1*HomLgkXyZ8aa4h0mejngRg.png)

Congrats! You now have the humble beginnings to a Flutter application with Amplify as a back-end.

If you simply want the code for this tutorial, head over to the [gist](https://gist.github.com/adamfillion/90afab4f46e253c58e648a81935c74ce) I set up.

**Moving Forward**

If you have read this far, thanks! Be sure to follow to get all of the newest information on Amplify Flutter. In the next part of this series, we will be adding [**AWS Cognito**](https://docs.amplify.aws/lib/auth/getting-started/q/platform/flutter) to our project to achieve a nice user sign-up/sign-in experience.

### This Series

**Part 1:** [Basic Setup](https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-1-basic-setup-7e1dd53e9161)

**Part 2:** [Authentication](https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-2-authentication-a66136f23995)

**Part 3:** [Analytics](https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-3-analytics-bdb8b5bad5c0)

**Part 4:** [Storage](https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-4-storage-74ae2dbdc4b5)