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>
Build Flutter mobile and web apps with Appcircle 
<button class="call-to-action"><a href="https://appcircle.io/start" target="_blank" rel="noopener">Start for Free</a></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/">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 size-full wp-image-1663" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-1.png" alt="" 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://ac.appcircle.io/blog/guide-to-automated-mobile-ci-cd-for-flutter-projects-with-appcircle/#creating-a-build-profile-for-a-flutter-project">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 size-full wp-image-1664" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-2.png" alt="" 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/">Custom Script</a> or <a href="https://blog.appcircle.io/how-to-deploy-mobile-app-build-artifacts-automatically-to-amazon-s3-with-appcircle/">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 size-full wp-image-1665" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-3.png" alt="" 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 size-full wp-image-1666" src="https://ac.appcircle.io/wp-content/uploads/2020/10/Flutter-Web-4.png" alt="" 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.
<button class="call-to-action"><a href="https://appcircle.io/start" rel="noopener" target="_blank">Start Using Appcircle Now!</a></button>

Guide to Building Flutter Web Apps with Appcircle

Related Posts

Automatic Code Signing for iOS is Now Available

Mobile CI/CD Benchmark Report

Introduction to Testing React Native Apps

Guide to Building Flutter Web Apps with Appcircle

Related Posts

Automatic Code Signing for iOS is Now Available

Mobile CI/CD Benchmark Report

Introduction to Testing React Native Apps

Subscribe to Appcircle Circle