Repository navigation
[Proposal] Provide a first-frame hook for the web entrypoint initializer #133454
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
Use case
Flutter developers that target the web have the ability to customise the setup of their Flutter entrypoint.
The documentation even provides an excellent example here: https://docs.flutter.dev/platform-integration/web/initialization#example-display-a-progress-indicator
However, the initialization process has one problem: It does not provide a hook for the moment when Flutter draws its first frame.
This leads to a gap between appRunner.runApp(); in the index.html, and when runApp() in the Dart entrypoint actually requests the first frame to be drawn.
An example would be an application where the Dart entrypoint looks like this (using the example from the documentation above)
void main() async {
// Imagine some expensive work, like fetching a user token for a logged-in user
await Future.delayed(const Duration(seconds: 2));
runApp(const MyApp());
}
However, there is an existing mechanism for detecting the first frame, the flutter-first-frame event. This event is not documented on the aforementioned documentation, though. As of Flutter 3.13.1 this event is still fired by the engine so the workaround still works. (I have been using the workaround for over two years, iirc)
Proposal
Add a new hook in _flutter.loader.loadEntrypoint for the first frame of the Flutter app. This can replace the undocumented behavior of the flutter-first-frame event.
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: async function(engineInitializer) {
loading.textContent = "Initializing engine...";
let appRunner = await engineInitializer.initializeEngine();
loading.textContent = "Running app...";
await appRunner.runApp();
},
onFirstFrame: function() {}, // New
});
Activity
[-][Proposal] Provide a first-frame hook for the web entrypoint[/-][+][Proposal] Provide a first-frame hook for the web entrypoint initializer[/+]ditman commentedon Aug 29, 2023
flutter-first-framepredates the flutter JS loading API by a fair amount of time, and originally was meant for benchmarking. This proposal sounds good to me (although I'm not sure that we'd want to add more parameters toloadEntrypoint; this might be better suited as something that's passed to therunAppmethod, for example.)yjbanov commentedon Aug 31, 2023
@ditman Makes sense. The framework is aware of when it's done rendering the first frame, so a framework-side Dart API makes sense here, and it can be available for all platforms. Reassigning to the framework team for evaluation.
goderbauer commentedon Sep 12, 2023
We already have addPostFrameCallback, which fires at the end of a frame. If registered before the first frame, it will inform you when the first frame is done. Can you just use that?
https://master-api.flutter.dev/flutter/scheduler/SchedulerBinding/addPostFrameCallback.html
navaronbracke commentedon Sep 13, 2023
That would work.
github-actions commentedon Sep 27, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.