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:

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

dependencies:
  flutter:
    sdk: flutter

  amplify_flutter: ^2.0.0
  amplify_auth_cognito: ^2.0.0

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

   Copy code example

   flutter 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

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?

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/

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

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';

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

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.