Web Publishing in FlutterFlow

Web publishing in FlutterFlow is an innovative and powerful way to create and deploy web applications without the need for extensive coding or web development experience. FlutterFlow is a visual development platform that leverages the Flutter framework to enable the creation of cross-platform applications, including web applications.

FlutterFlow's web publishing capabilities allow developers and designers to build beautiful and responsive web applications using a drag-and-drop interface. It eliminates the need for writing HTML, CSS, or JavaScript code from scratch, making it accessible to a wider range of users.

To publish a web application using FlutterFlow, you start by designing the user interface using the visual editor. The editor provides a wide range of pre-built widgets and components that can be easily customized to match your desired design. You can add buttons, text fields, images, lists, and more, and arrange them on the canvas to create the desired layout.

Once the UI is designed, you can add functionality to your web application by connecting different widgets to actions and events. FlutterFlow supports integrations with various APIs and services, allowing you to incorporate features such as authentication, database access, and third-party services into your application.

After designing and adding functionality to your web application, you can preview it within the FlutterFlow editor to see how it looks and behaves. This preview feature allows you to test your application on different screen sizes and devices, ensuring a responsive design.

Once you are satisfied with your web application, you can publish it with a single click. FlutterFlow generates the necessary code and assets, and deploys the application to a web hosting service. You can choose to use FlutterFlow's built-in hosting service or export the code and host it on your preferred platform.

The web applications created with FlutterFlow are built using Flutter, which is known for its high-performance, fast rendering, and beautiful UIs. This means that the web applications created with FlutterFlow not only look great but also provide a smooth user experience.

In addition to the ease of development, FlutterFlow offers collaboration features that enable multiple team members to work on a project simultaneously. You can invite others to join your project, assign tasks, and leave comments, making it a suitable choice for teams working on web application development.

Overall, web publishing in FlutterFlow provides a streamlined and efficient way to create and deploy web applications. Whether you are a seasoned developer or a designer with limited coding experience, FlutterFlow empowers you to bring your web application ideas to life without compromising on quality or functionality.

Method to publish web project in FlutterFlow hosting. Internal on subdomain or 1 own domain per account.

Make design adjustments


Own method for publishing on Firebase

Build on local machine 
  • Fetch via git FlutterFlow project 
  • Build web version on local computer
    • https://docs.flutter.dev/deployment/web 
    • flutter build web --release


      │ A new version of Flutter is available!                 


      │ To update to the latest version, run "flutter upgrade". │


      💪 Building with sound null safety 💪

      Upgrading .gitignore

      Compiling lib/main.dart for the Web...                             60,5s

    • autov.be/FlutterFlow/autovbe/build/web

    • ls

      assets flutter.js index.html

      canvaskit flutter_service_worker.js main.dart.js

      favicon.png icons version.json

    • Check icons. 

  • Copy web version in www folder of Firebase 
    • cp -r  web ../../../firebase/public/webapp

  • Link application from Info pages
  • Firebase serve / deploy 
    • firebase login ✔ Success! Logged in
      firebase serve 
    • open browser  http://localhost:5002/webapp


main.dart.js:1 Uncaught SyntaxError: Unexpected token '<'
localhost/:1 Error while trying to use the following icon from the Manifest: http://localhost:5002/icon.png (Download error or resource isn't a valid image)
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received

vim webapp/index.html  

Starting from release 1.20, the Flutter template for web apps incorporates essential features to enable the creation of installable and offline-capable Progressive Web Apps (PWAs). Flutter-based PWAs can be installed just like any other web-based PWA. The necessary settings indicating that your Flutter app is a PWA are generated by the manifest.json file, which is created by the "flutter create" command in the web directory.

It's important to note that PWA support in Flutter is an ongoing endeavor, and we welcome your feedback if you encounter any issues or inconsistencies in the implementation. Your input is valuable in helping us improve the functionality of Flutter PWAs.

Resolving dependencies... (1.6s)

Note: web is pinned to version 0.1.4-beta by flutter_test from the flutter SDK.
See https://dart.dev/go/sdk-version-pinning for details.

Because http >=1.1.2 <1.2.1 depends on web >=0.3.0 <0.5.0 and every version of flutter_test from sdk depends on web
  0.1.4-beta, http >=1.1.2 <1.2.1 is incompatible with flutter_test from sdk.
So, because auto_v_b_e depends on both flutter_test from sdk and http 1.2.0, version solving failed. 
flutter upgrade
flutter pub upgrade --major-versions
flutter pub get 
flutter pub outdated
flutter pub add intl:^0.18.1
To upgrade the `flutter_test` package, you typically need to upgrade your Flutter SDK because `flutter_test` is tied to the SDK version. Run `flutter upgrade` in your terminal to update Flutter to the latest version. This command updates both the Flutter SDK and your project's packages, including `flutter_test`, to the versions compatible with the new SDK. Always check the Flutter release notes for any specific steps or requirements for upgrading. 

The message indicates that your Flutter project's dependencies have been successfully resolved, but several packages have newer versions available that are not compatible with the version constraints specified in your `pubspec.yaml` file. To update these dependencies, you may need to adjust the version constraints in your `pubspec.yaml` file for each package mentioned. Running `flutter pub outdated` can help identify which dependencies can be safely updated and suggest the latest versions compatible with your current setup. For packages with overridden versions (`http`, `uuid`), consider removing the override if it's no longer necessary.

Showing outdated packages.
[*] indicates versions that are not the latest available.

Package Name            Current    Upgradable  Resolvable  Latest  

direct dependencies:   
flutter_native_splash   *2.3.10    *2.3.10     *2.3.10     2.3.13  
google_sign_in_web      *0.12.3+3  *0.12.3+3   *0.12.3+3   0.12.4  
image_picker_for_web    *3.0.2     *3.0.2      *3.0.2      3.0.3   
intl                    *0.18.1    *0.18.1     *0.18.1     0.19.0  
shared_preferences_web  *2.2.2     *2.2.2      *2.2.2      2.3.0   
video_player_web        *2.2.0     *2.2.0      *2.2.0      2.3.0   

dev_dependencies: all up-to-date.
You are already using the newest resolvable versions listed in the 'Resolvable' column.
Newer versions, listed in 'Latest', may not be mutually compatible.