Deploy a Flutter Web Application Using AWS Amplify

Flutter is a UI toolkit used to create cross-platform applications for mobile, desktop, and web from a single codebase. Since developers can deploy their Flutter applications on the web without extra effort, they are seeking deployment options. With the release of AWS Amplify Gen 2, many new features have been announced for AWS Amplify. One notable feature is the simplified integration with Git workflows for both backend and hosting solutions, enabled by Amplify Console’s new user interface.

In this blog post, you will learn how to host a Flutter web application using Amplify Hosting, with the project code stored on GitHub. This tutorial is compatible with any supported Git provider, so you can also use BitBucket, GitLab, and CodeCommit.

Requirements:

• An AWS account
• Flutter SDK installed on your device
• An account on any supported Git provider, this blog post will be using GitHub

Creating a Flutter Project

Start by creating a Flutter project with web support by running the following command:

flutter create amplify_gen2_website --platform web

This will create a Flutter project with only web support enabled. The next step is to move our code to GitHub. You can do this using any Git tool you prefer. In this example, you will learn how to share it using VSCode.

First, open the project in VSCode and open the Command Palette by pressing Shift + Command + P (Mac) or Ctrl + Shift + P (Windows/Linux). Next, select the “Share on GitHub” option:

Next, choose either a private or public repository based on your preference. Give your repository a name, and then the app will be shared on GitHub.

Once the upload is done, the project can be seen on GitHub.

Afterwards, go to the AWS Amplify in the AWS console and “Create new app” button.

Select GitHub (or your Git provider) as your Git provider.

Once you select the Git provider and continue, you will be prompted to grant AWS Amplify permission to access your repositories.

After granting access to AWS Amplify, you can now select the project and branch you want to deploy.

Once you select your project and branch, the App Settings will be displayed. Update the “Frontend build command” to flutter build web and set the “Build output directory” to /build/web. After making these changes, click "Next" and proceed with the review step. Your initial deployment will then begin.

You will see that your initial build will fail because the Flutter toolchain is not installed on your build system.

To fix this, you will need to update your build configuration file. Go to Hosting/Build settings in the left hand side navigation bar and locate the amplify.yml file.

Update the amplify.yml file with the following. This approach uses WASM (WebAssembly) for Flutter Web to host the app and bring out better and faster performance:

version: 1.0
frontend:
  phases:
    preBuild:
      commands:
        - echo "Installing Flutter SDK"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installing dependencies"
        - flutter pub get
    build:
      commands:
        - echo "Building Flutter web application with WASM support"
        - flutter build web --wasm
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Now, go back to the deployments under your branch and click on the “Redeploy this version” button:

After the deployment, a domain will be automatically assigned to your build. Click on the assigned domain to check your deployment.

Now let’s see how the update through CI/CD mechanism works. Update the code to change the title of the page, the color scheme, and the title of the app, as shown below:

You can see that with every push to Git, the deployment will be triggered automatically:

With these changes, if you run the application again, you will see the updated UI.

Conclusion

In this blog post, you have learned about how to host a Flutter Web project with Amplify Hosting. You can check out the Amplify Gen 2 docs to learn more about AWS Amplify Gen 2 and the Amplify Hosting page to learn about Amplify Hosting.