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

Introduction: Build a Flutter mobile app using AWS Amplify

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.

 AWS experience

Beginner

 Time to complete

60 minutes

 Cost to complete

Free Tier eligible

 Requires

  • 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 tutorial, we will use VSCode, but you can use your preferred IDE.

 Services used

AWS Amplify

 Last updated

August 23, 2023

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.

Was this page helpful?

 Feedback
Start Module One

Create a Flutter app