Amplify project setup

Amplify Flutter v0 is now in Maintenance Mode until July 19th, 2024. This means that we will continue to include updates to ensure compatibility with backend services and security. No new features will be introduced in v0.

Please use the latest version (v1) of Amplify Flutter to get started.

If you are currently using v0, follow these instructions to upgrade to v1.

For this section you will set up a skeleton project so that Amplify categories can be added to it.

1. Create a new project

Create a new project using Flutter CLI:

flutter create <your_app_name>
1flutter create <your_app_name>

You now have an empty Flutter project into which you'll add Amplify in the next steps.

2. Install Amplify Libraries

Amplify for Flutter is distributed via pub.dev.

  1. From your project root directory, find and modify pubspec.yaml and add required Amplify plugins to the project dependencies. E.g.
environment: sdk: ">=2.15.0 <3.0.0" dependencies: flutter: sdk: flutter amplify_flutter: ^0.6.0 amplify_auth_cognito: ^0.6.0
1environment:
2 sdk: ">=2.15.0 <3.0.0"
3
4dependencies:
5 flutter:
6 sdk: flutter
7
8 amplify_flutter: ^0.6.0
9 amplify_auth_cognito: ^0.6.0
  1. Install the dependencies by running the following command. Depending on your development environment, you may perform this step via your IDE (or it may even be performed for you automatically).

    flutter pub get
    1flutter pub get

3. Provision the backend with Amplify CLI

To start provisioning resources in the backend, change directories to your project directory and run amplify init:

# Make sure you have Amplify CLI v4.28 and above for Flutter support amplify init
1# Make sure you have Amplify CLI v4.28 and above for Flutter support
2amplify init

Amplify CLI then will suggest you an auto-generated options for you to speed up the process:

Project information | Name: yourprojectname | Environment: dev | Default editor: Visual Studio Code | App type: flutter | Configuration file location: ./lib/ ? Initialize the project with the above configuration?
1Project information
2| Name: yourprojectname
3| Environment: dev
4| Default editor: Visual Studio Code
5| App type: flutter
6| Configuration file location: ./lib/
7
8? Initialize the project with the above configuration?

If any of the following does not work for you, you can say no to the question that is prompted.

After that, Amplify CLI will take you through the installation process. Enter the following when prompted:

? Enter a name for the environment `dev` ? Choose your default editor: `IntelliJ IDEA` ? Choose the type of app that you're building: 'flutter' ? Where do you want to store your configuration file? ./lib/
1? Enter a name for the environment
2 `dev`
3? Choose your default editor:
4 `IntelliJ IDEA`
5? Choose the type of app that you're building:
6 'flutter'
7? Where do you want to store your configuration file?
8 ./lib/

After the project information is filled, you will be prompted to select the AWS profile for you to host your information.

? Select the authentication method you want to use: (Use arrow keys) ❯ AWS profile AWS access keys # This is the profile you created with the `amplify configure` command in the introduction step. Please choose the profile you want to use (Use arrow keys) > default
1? Select the authentication method you want to use: (Use arrow keys)
2❯ AWS profile
3 AWS access keys
4
5# This is the profile you created with the `amplify configure` command in the introduction step.
6Please choose the profile you want to use (Use arrow keys)
7> default

Where possible, the CLI will infer the proper configuration based on the type of project Amplify is being initialized in. In this case, it knew you are using a Flutter app, source, distribution, build, and start options.

Upon successfully running amplify init, you will see a configuration file created in ./lib/ called amplifyconfiguration.dart.

This file will be bundled into your application so that the Amplify libraries know how to reach your provisioned backend resources at runtime.

4. Initialize Amplify in the application

Before using any methods in the Amplify Flutter Library, it's important to add all necessary plugins and to call configure once in your app. The steps below will guide you through configuring Amplify Flutter at the root level of your flutter app.

Add the necessary dart dependencies at the top of main.dart alongside to other imports:

// Amplify Flutter Packages import 'package:amplify_flutter/amplify_flutter.dart'; import 'package:amplify_auth_cognito/amplify_auth_cognito.dart'; // Generated in previous step import 'amplifyconfiguration.dart';
1// Amplify Flutter Packages
2import 'package:amplify_flutter/amplify_flutter.dart';
3import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
4
5// Generated in previous step
6import 'amplifyconfiguration.dart';

Add the following code to your application's root Stateful Widget, for the default Flutter app this should be the class _MyHomePageState extends State<MyHomePage>.

class _MyHomePageState extends State<MyHomePage> { @override initState() { super.initState(); _configureAmplify(); } Future<void> _configureAmplify() async { // Add any Amplify plugins you want to use final authPlugin = AmplifyAuthCognito(); await Amplify.addPlugin(authPlugin); // You can use addPlugins if you are going to be adding multiple plugins // await Amplify.addPlugins([authPlugin, analyticsPlugin]); // Once Plugins are added, configure Amplify // Note: Amplify can only be configured once. try { await Amplify.configure(amplifyconfig); } on AmplifyAlreadyConfiguredException { safePrint("Tried to reconfigure Amplify; this can occur when your app restarts on Android."); } } // customize the rest of your Widget below as you wish...
1class _MyHomePageState extends State<MyHomePage> {
2
3
4 initState() {
5 super.initState();
6 _configureAmplify();
7 }
8
9 Future<void> _configureAmplify() async {
10
11 // Add any Amplify plugins you want to use
12 final authPlugin = AmplifyAuthCognito();
13 await Amplify.addPlugin(authPlugin);
14
15 // You can use addPlugins if you are going to be adding multiple plugins
16 // await Amplify.addPlugins([authPlugin, analyticsPlugin]);
17
18 // Once Plugins are added, configure Amplify
19 // Note: Amplify can only be configured once.
20 try {
21 await Amplify.configure(amplifyconfig);
22 } on AmplifyAlreadyConfiguredException {
23 safePrint("Tried to reconfigure Amplify; this can occur when your app restarts on Android.");
24 }
25 }
26
27 // customize the rest of your Widget below as you wish...

Note that all calls to addPlugin() or addPlugins() are made before Amplify.configure() is called.

Next steps

Congratulations! You've created a skeleton app and are ready to start adding Amplify categories to your application. The following are some categories that you can start to build into your application:

  • Analytics - for logging metrics and understanding your users
  • API (GraphQL) - for adding a GraphQL endpoint to your app
  • API (REST) - for adding a REST endpoint to your app
  • Authentication - for managing your users
  • DataStore - for making it easier to program for a distributed data store for offline and online scenarios
  • Storage - store complex objects like pictures and videos to the cloud.