Skip to content
This repository was archived by the owner on Jun 13, 2024. It is now read-only.

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

Merged
guidezpl merged 2 commits into from
Apr 8, 2022
Merged

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

guidezpl merged 2 commits into from
Apr 8, 2022

Conversation

@ditman
Copy link
Member

@ditman ditman commented Apr 1, 2022 •
edited
Loading

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:

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
Copy link
Member Author

ditman commented Apr 1, 2022 •
edited
Loading

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!

@ditman ditman requested a review from guidezpl April 2, 2022 01:37
ditman
ditman commented Apr 2, 2022
View reviewed changes
ditman
ditman commented Apr 2, 2022
View reviewed changes
@guidezpl
Copy link
Member

guidezpl commented Apr 4, 2022

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

guidezpl
guidezpl approved these changes Apr 4, 2022
View reviewed changes
ditman added 2 commits April 6, 2022 17:34
@ditman
Use flutter.js to load the app.
75c1abb
@ditman
Call runApp ASAP.
112d326 
Also:
* Align body styles with flutter's while loading, so the logo doesn't
  jump around too much.
* Document why this needs to wait a few hundred ms before removoing the
  loading indicator (so users can _see_ the zoom animation at all!)
@ditman ditman requested a review from guidezpl April 7, 2022 01:34
@ditman
Copy link
Member Author

ditman commented Apr 8, 2022

@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
Copy link
Member

guidezpl commented Apr 8, 2022

LGTM!

@guidezpl guidezpl merged commit 8803fd5 into flutter:master Apr 8, 2022
@ditman ditman deleted the new-web-loader branch April 8, 2022 18:27
@ditman ditman mentioned this pull request Apr 13, 2022
Closed
@guidezpl guidezpl mentioned this pull request Apr 13, 2022
Closed
@Gustl22 Gustl22 mentioned this pull request Oct 16, 2025
Merged
9 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@guidezpl guidezpl Awaiting requested review from guidezpl

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ditman @guidezpl