[web] Migrate index.html to use flutter.js

[ditman]

We have just landed flutter.js in Flutter master channel, which greatly simplifies the index.html file, and adds a JS API that lets programmers initialize their apps however they see fit. See this.

As a "demo" of the new flexibility, I created a small loading animation with 3 steps:

• "breathing", 50% opacity: main.dart.js is being downloaded.
• "breathing", 100% opacity: canvaskit and other assets needed by the framework being downloaded.
• "zooooom": when the app is ready to start (we delayed this a few ms so people can perceive the zoom effect!).

I've deployed a demo here:

• https://dit-tests.web.app (remember to empty your cache, or throttle your network to better see the different steps!)

Tests:

Manually tested in Chrome/Firefox on Linux and MacOS. (Couldn't find tests for the index.html file?)

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read the Flutter Style Guide recently, and have followed its advice.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[ditman]

First of all, apologies for the unprompted PR and "feature".

I am not a designer, so of course the whole "loader" (animation, image...) can be changed to best fit the direction in which the Gallery app wants to go. It can even be removed altogether very easily, and just keep a behavior very similar to the current one, with the dark background only.

This change is also optional. The old index.html should continue to work Just Fine™ with the new Flutter, but the new style of index is what's going to start showing up on people's new apps, so migrating this to flutter.js keeps the Gallery app in sync with the current/future development of flutter web, and as a current "example" of a flutter web app.

PS: this requires flutter master for now, I'm not sure in which channel does the Gallery operate!

[guidezpl]

Thanks for this, looks great! The gallery is effectively community owned so these sorts of improvements are welcome! The gallery does run off the master channel

[ditman]

@guidezpl shall I click "Squash and merge" or do you want to take another look? I think the latest revision is clearer (and it doesn't delay the start of the app!)

Thanks!

[guidezpl]

LGTM!