Create your application

Goal

Setup a skeleton project so that Amplify categories can be added to it

Project Setup

1. Create a new project

Create a new project using Flutter CLI:

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.

From your project root directory, find and modify pubspec.yaml and add required Amplify plugins to the project dependencies. E.g.

1environment:
2  sdk: ">=2.18.0 <4.0.0"
3  flutter: ">=3.3.0"
4
5dependencies:
6  flutter:
7    sdk: flutter
8
9  amplify_flutter: ^1.0.0
10  amplify_auth_cognito: ^1.0.0

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).
```
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:

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:

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:

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.

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:

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>.

1class _MyHomePageState extends State<MyHomePage> {
2
3  @override
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.

Set up Amplify prerequisites

Platform setup