GUIDE TO BUILDING FLUTTER WEB APPS WITH APPCIRCLE
Published: 2021-09-08 16:29:06

<a href="https://appcircle.io/blog/guide-to-building-flutter-web-apps-with-appcircle/" link rel="canonical" ><img src="https://appcircle.io/wp-content/uploads/2020/10/Building-Flutter-Web-Apps-With-Appcircle-845x321.png.webp"></a>
=======================================================================================================================================================================================

Reading Time: 2 minutes

Appcircle is a mobile CI/CD platform that provides a fully automated environment to manage mobile app lifecycle end-to-end, transforming DevOps to NoOps with the best practices and the Flutter framework is an open-source user interface toolkit created by Google.

Flutter app development is done with the Dart language and you can develop iOS, Android, and web apps with Flutter.

Appcircle supports the full lifecycle of Flutter apps for all Flutter CI/CD needs. In this article, we will be building a Flutter web app with Appcircle. [For a full overview on mobile CI/CD with Flutter and Appcircle, please refer to this post.](https://appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/)

Build Flutter mobile and web apps with Appcircle

[Start for Free](https://appcircle.io/start)

If your app supports Flutter Web, you can also build the Flutter web app along with the [Flutter iOS or Android build](https://appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/).

Flutter Web Build is available as a workflow step in the workflow marketplace. Just configure your project as you would for iOS or Android and add the Flutter Build for Web step anywhere after the Flutter Install step to include a web build in the workflow.

[![](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png.webp)](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png)

If you want to build your Flutter project only for web, you can [add a Flutter Android project in the standard way](https://appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#creating-a-build-profile-for-a-flutter-project), save your project configuration once, and then remove all the Android-related steps from the build workflow.

In this case, the workflow may look like the following:

[![](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png.webp)](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png)

If you want to deploy your web output automatically, you can use a [Custom Script](https://github.com/appcircleio/appcircle-custom-script-component/) or [upload it to Amazon S3](https://appcircle.io/blog/how-to-deploy-mobile-app-build-artifacts-automatically-to-amazon-s3-with-appcircle/).

Once your build is configured, it can be built [manually or automatically in the same way with other apps](https://appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#starting-a-build-and-after-a-build). Your app will be built in the beta channel to enable web builds.

[![](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png)](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png)

After a build, you can download the web build output manually [from the build artifact list](https://appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#starting-a-build-and-after-a-build) as the `web.zip` file.

[![](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png.webp)](https://appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png)

With Appcircle, you can manage the CI/CD of your Flutter web, iOS and Android apps for free.

[Start Using Appcircle Now](https://appcircle.io/start)