Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Skip to main content

Getting Started Resource Center

Tutorial

Build a Flutter Mobile App Using AWS Amplify - Part 1

Create a trip planner app for iOS and Android

Introduction

Overview

In this how-to guide, the first part of a two-part series, you will create a cross-platform Flutter mobile app using AWS Amplify. The app is a trip planner where users can create a trip and set its name, destination, and dates. Additionally, they can upload a banner image for the trip.

In the second guide of this series, you will add new features to the app, such as adding activities for the trips using a nested data model and creating the user's profile data using an Amplify function.

What you will accomplish

This how-to guide will walk you through the steps to create an app to help users plan trips. You will:

  • Create a Flutter app using the terminal and structure its folders using the Feature-First approach where you will create a folder for every app’s feature.

  • Use the Amplify CLI to create the Amplify backend for this app

  • Add Amplify authentication capabilities to your app and use the Amplify Authenticator UI library

  • Create a data model for the trips and use the GraphQL API to synchronize to the Amplify backend

  • Add Amplify storage to your app to enable users to upload an image for their trips

Prerequisites

  • An AWS account: If you don't already have an account, follow the Setting Up Your AWS Environment tutorial for a quick overview.

  • Install and configure the Amplify CLI.

  • Install and configure Flutter.

  • A text editor combined with Flutter’s command-line tools. For this guide we will use VSCode, but you can use your preferred IDE.

Implementation

Modules

This how-to guide is divided into the following short modules. You must complete each module before moving to the next one.

  1. Create a Flutter app (15 minutes): Create a Flutter app, add its dependencies, and create its folder structure. Additionally, you will also define the app colors and the routing constants.

  2. Add authentication (10 minutes): Create the Amplify backend for the app and implement authentication using the Amplify authenticator UI library. 

  3. Add API (20 minutes): Create the Amplify GraphQL API for the app and implement the CRUD operation for the trip feature.

  4. Add storage (15 minutes): Create the Amazon S3 bucket for the app and implement the ability to upload an image for the trip.

Create a Flutter app

Start Module One