Flutter Web App Initialization Logic with CSS Loader

Did you know?

Apps created with Flutter 3.22 use a new, faster web bootstrap process.

The easiest way to upgrade your existing apps is to delete the web folder and recreate it again with the Flutter CLI:

rm -rf web/ flutter create . --platforms web

The updated index.html file contains a new script that loads flutter_bootstrap.js:

<!DOCTYPE html> <html> <head> <base href="$FLUTTER_BASE_HREF"> ... </head> <body> <script src="flutter_bootstrap.js" async></script> </body> </html>

Note: if you recreate the Flutter web project from scratch, remember to update your index.html, icons, and manifest files with whatever customizations you had before.

Adding a CSS loader

The new bootstrap process is quite customizable, and you can even display a CSS progress indicator before the Flutter app is ready to take over:

This gist shows how to accomplish this:

Read the official docs for all the details about the new app initialization process:

Happy coding!

Want More?

Invest in yourself with my high-quality Flutter courses.

Flutter Foundations Course

Flutter Foundations Course

Learn about State Management, App Architecture, Navigation, Testing, and much more by building a Flutter eCommerce app on iOS, Android, and web.

Flutter & Firebase Masterclass

Flutter & Firebase Masterclass

Learn about Firebase Auth, Cloud Firestore, Cloud Functions, Stripe payments, and much more by building a full-stack eCommerce app with Flutter & Firebase.

The Complete Dart Developer Guide

The Complete Dart Developer Guide

Learn Dart Programming in depth. Includes: basic to advanced topics, exercises, and projects. Fully updated to Dart 2.15.

Flutter Animations Masterclass

Flutter Animations Masterclass

Master Flutter animations and build a completely custom habit tracking application.