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. <a href="https://blog.appcircle.io/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/" target="_blank" rel="noopener noreferrer">For a full overview on mobile CI/CD with Flutter and Appcircle, please refer to this post.</a><button class="call-to-action"></button>
If your app supports Flutter Web, you can also build the Flutter web app along with the <a href="https://blog.appcircle.io/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/" target="_blank" rel="noopener">Flutter iOS or Android build</a>.
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.
<a href="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png"><img class="alignnone wp-image-1663 size-full" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png" alt="flutter build" width="1440" height="800" srcset="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png 1440w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1-300x167.png 300w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1-1030x572.png 1030w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1-768x427.png 768w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1-705x392.png 705w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1-450x250.png 450w" sizes="(max-width: 1440px) 100vw, 1440px" /></a>
If you want to build your Flutter project only for web, you can <a href="https://blog.appcircle.io/article/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle" target="_blank" rel="noopener">add a Flutter Android project in the standard way</a>, 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:
<a href="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png"><img class="alignnone wp-image-1664 size-full" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png" alt="ready to step integrasions - workflows" width="1440" height="800" srcset="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png 1440w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2-300x167.png 300w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2-1030x572.png 1030w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2-768x427.png 768w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2-705x392.png 705w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2-450x250.png 450w" sizes="(max-width: 1440px) 100vw, 1440px" /></a>
If you want to deploy your web output automatically, you can use a <a href="https://github.com/appcircleio/appcircle-custom-script-component/" target="_blank" rel="noopener">Custom Script</a> or <a href="https://blog.appcircle.io/how-to-deploy-mobile-app-build-artifacts-automatically-to-amazon-s3-with-appcircle/" target="_blank" rel="noopener">upload it to Amazon S3</a>.
Once your build is configured, it can be built <a href="https://blog.appcircle.io/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#starting-a-build-and-after-a-build" target="_blank" rel="noopener noreferrer">manually or automatically in the same way with other apps</a>. Your app will be built in the beta channel to enable web builds.
<a href="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png"><img class="alignnone wp-image-1665 size-full" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png" alt="build logs" width="1440" height="800" srcset="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png 1440w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3-300x167.png 300w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3-1030x572.png 1030w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3-768x427.png 768w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3-705x392.png 705w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3-450x250.png 450w" sizes="(max-width: 1440px) 100vw, 1440px" /></a>
After a build, you can download the web build output manually <a href="https://blog.appcircle.io/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#starting-a-build-and-after-a-build">from the build artifact list</a> as the <code>web.zip</code> file.
<a href="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png"><img class="alignnone wp-image-1666 size-full" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png" alt="downloading artifacts" width="1440" height="800" srcset="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png 1440w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4-300x167.png 300w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4-1030x572.png 1030w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4-768x427.png 768w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4-705x392.png 705w, https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4-450x250.png 450w" sizes="(max-width: 1440px) 100vw, 1440px" /></a>
With Appcircle, you can manage the CI/CD of your Flutter web, iOS and Android apps for free.

Guide to Building Flutter Web Apps with Appcircle

Related Posts

10 Operational and Business Benefits of Mobile CI/CD

Best Mobile Continuous Integration and Continuous Delivery (CI/CD) Tools

Is Azure DevOps a Good Fit for Mobile CI/CD?

Unlisted App Distribution on the App Store

Guide to Building Flutter Web Apps with Appcircle

Related Posts

10 Operational and Business Benefits of Mobile CI/CD

Best Mobile Continuous Integration and Continuous Delivery (CI/CD) Tools

Is Azure DevOps a Good Fit for Mobile CI/CD?

Unlisted App Distribution on the App Store

Subscribe to Appcircle Circle