Build a Flutter Mobile App Using AWS Amplify - Part 1

Create a trip planner app for iOS and Android

INTRODUCTION
CREATE A FLUTTER APP
ADD AUTHENTICATION
ADD API
ADD STORAGE

Module 1: Create a Flutter app

Overview

In this module, we will start by creating a new Flutter mobile app. Then we will add the Amplify packages and other dependencies to the app. Next, we will structure the app’s folders based on the Feature-First approach. Then, we will create the constants the app will use to define its routes and colors. And finally, we will use the Amplify CLI to provision a cloud backend for the app

What you will accomplish

  • Create a Flutter app
  • Add the app dependencies 
  • Create the app folder structure
  • Define the constants for the app’s routes and colors
  • Create an Amplify backend for the app

 Minimum time to complete

15 minutes

Implementation

Create a new Flutter app

Step 1: Create a Flutter app by running the command below in your terminal.

flutter create amplify_trips_planner --platforms=ios,android

Step 2: Open the newly created Flutter application using VSCode. You can do that by running the commands below in your terminal. 

cd amplify_trips_planner
code . -r

Add the app dependencies

Step 1: Update the file pubspec.yaml in the application root directory to add the following Amplify packages.

  amplify_api: ^1.0.0
  amplify_auth_cognito: ^1.0.0
  amplify_authenticator: ^1.0.0
  amplify_flutter: ^1.0.0
  amplify_storage_s3: ^1.0.0

Step 2: The app will use additional dependencies for its functionality, such as State Management, Image Picker, and Navigation. Update the file pubspec.yaml in the application root directory to add the following packages as dependencies.

  cached_network_image: ^3.2.3
  cupertino_icons: ^1.0.5
  flutter_riverpod: ^2.1.3
  go_router: ^7.0.0
  image_picker: ^0.8.0
  intl: ^0.18.0
  path: ^1.8.3
  riverpod_annotation: ^2.0.1
  uuid: ^3.0.7

Step 3: To improve the coding experience, we will use a set of development dependencies, such as code lint packages, which encourage good coding practices, and code generation packages to simplify the State Management implementation. Update the file pubspec.yaml in the application root directory to add the following packages as dev_dependencies.

  amplify_lints: ^3.0.0
  build_runner:
  custom_lint:
  flutter_test:
    sdk: flutter
  riverpod_generator: ^2.1.3
  riverpod_lint: ^1.1.5

Step 4: The app will use a placeholder image (amplify.png) when creating a new trip. After downloading the image, create a new folder in the app root directory, name it images, and then add the image to it.

Step 5: Update the file pubspec.yaml to add it to the assets section.

flutter:
  uses-material-design: true
  assets:
    - images/amplify.png

The pubspec.yaml file should look like the this:

name: amplify_trips_planner
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=3.0.2 <4.0.0"

dependencies:
  amplify_api: ^1.0.0
  amplify_auth_cognito: ^1.0.0
  amplify_authenticator: ^1.0.0
  amplify_flutter: ^1.0.0
  amplify_storage_s3: ^1.0.0
  cached_network_image: ^3.2.3
  cupertino_icons: ^1.0.5
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.1.3
  go_router: ^7.0.0
  image_picker: ^0.8.0
  intl: ^0.18.0
  path: ^1.8.3
  riverpod_annotation: ^2.0.1
  uuid: ^3.0.7


dev_dependencies:
  amplify_lints: ^3.0.0
  build_runner:
  custom_lint:
  flutter_test:
    sdk: flutter
  riverpod_generator: ^2.1.3
  riverpod_lint: ^1.1.5

flutter:
  uses-material-design: true
  assets:
    - images/amplify.png

Step 6: Run the following command in your terminal to install the dependencies you added to the pubspec.yaml file.

flutter pub get

Step 7: Update the target iOS platform by navigating to the ios/ folder and change the Podfile to target iOS platform 13.5 or higher.

platform :ios, '13.5'

Step 8: Update the target Android SDK by navigating to the android/app/ folder and modifying the build.gradle file to update the target Android SDK version to 24 or higher.

minSdkVersion 24

Create the app folder structure

This guide will use the Feature-First approach to structure the app. We will create a folder for every app feature, and inside that folder, we can add the layers as sub-folders.

Step 1: Create a new folder inside the lib folder, name it features, create a folder inside it, and name it trip.

Step 2: Create the following new folders inside the trip folder: 

  • service: The layer to connect with the Amplify backend.
  • data: This will be the repository layer that abstracts away the networking code, specifically service.
  • controller: This is an abstract layer to connect the UI with the repository.
  • ui: Here, we will create the widgets and the pages that the app will present to the user.

Step 3: Create a new folder inside the lib folder and name it common. We will use this folder for the code shared across the app features.

Step 4: Create the following new folders inside the common folder: 

  • ui: Here, we will create the widgets and the pages that the app will present to the user.
  • navigation: We will use this folder to define the app routes.
  • services: This is where we will create the services to connect with the Amplify backend.
  • utils: This folder will contain constants, such as colors, that the app will frequently use.

Define the constants for the routes and colors

Step 1: Create a folder inside the lib/common/navigation folder and call it router, and then create a new dart file inside it and call it routes.dart.

Step 2: Open the routes.dart file and update it with the following code. We will use this enum to create the routing of the app.


enum AppRoute {
  home,
  trip,
  editTrip,
}

Step 3: Create a new dart file inside the lib/common/utils folder and name it colors.dart.

Step 4: Open the colors.dart file and update it with the following code to create constant variables to set the app’s colors.

import 'package:flutter/material.dart';
const Map<int, Color> primarySwatch = {
  50: Color.fromRGBO(255, 207, 68, .1),
  100: Color.fromRGBO(255, 207, 68, .2),
  200: Color.fromRGBO(255, 207, 68, .3),
  300: Color.fromRGBO(255, 207, 68, .4),
  400: Color.fromRGBO(255, 207, 68, .5),
  500: Color.fromRGBO(255, 207, 68, .6),
  600: Color.fromRGBO(255, 207, 68, .7),
  700: Color.fromRGBO(255, 207, 68, .8),
  800: Color.fromRGBO(255, 207, 68, .9),
  900: Color.fromRGBO(255, 207, 68, 1),
};
const MaterialColor primaryColor = MaterialColor(0xFFFFCF44, primarySwatch);
const int primaryColorDark = 0xFFFD9725;

Create an Amplify backend for the app

Step 1: Navigate to the app's root folder, and provision the Amplify backend for the app by running the following command in your terminal.

amplify init

Step 2: Enter a name for the Amplify project or accept the suggested name, then press Enter.

? Enter a name for the project amplifytripsplanner
The following configuration will be applied:

Project information
| Name: amplifytripsplanner
| Environment: dev
| Default editor: Visual Studio Code
| App type: flutter
| Configuration file location: ./lib/

? Initialize the project with the above configuration? (Y/n)

Step 3: Press Enter again to accept the auto-generated options and select the AWS Authentication method. In this example, we are using an AWS profile. Amplify CLI will initialize the backend and connect the project to the cloud.

The Amplify CLI will add a new folder named amplify to the app's root folder, which contains the amplify project and backend details. It will also add a new dart file (amplifyconfiguration.dart) to the lib/ folder. The app will use this file to know how to reach your provisioned backend resources at runtime.

Conclusion

In this module, you learned how to create a Flutter app. You also learned how to set its folder structure using the Feature-First approach. Additionally, you created constant variables for the app to use to set its routes and colors. Finally, you used the Amplify CLI to provision a cloud backend for the app.

Was this page helpful?

 Feedback
Start Module Two

Add Amplify authentication