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!