Web regression: HtmlElementView onPlatformViewCreated fires before HTML element created #143922
Description
Prior to 3.19, when using HtmlElementView's onPlatformViewCreated callback, you could access the HTML element within the callback:
HtmlElementView(
viewType: 'myView',
onPlatformViewCreated: (viewId) async {
// Should be able to access the created view here
window.document.getElementById('myViewId');
}
)This is failing in Flutter 3.19, as the HTML element has not yet been added to the DOM at the time onPlatformViewCreated is called.
This has broken production code for me, and I believe it will have broken two projects I've previously worked on.
Steps to reproduce
Run this code sample on Flutter web with 3.19.
Expected results: shows a red box (screenshot from 3.16.9):
Actual results: throws Error: TypeError: null: type 'Null' is not a subtype of type 'DivElement' because the div has not yet been added to the DOM.
import 'package:flutter/material.dart';
import 'dart:ui_web' as ui_web;
import 'dart:html' as html;
void main() {
ui_web.platformViewRegistry.registerViewFactory(
'myView',
(int viewId, {Object? params}) {
return html.DivElement()
..id = 'myDivId'
..style.width = '100px'
..style.height = '100px';
},
);
runApp(
MaterialApp(
home: Scaffold(
body: HtmlElementView(
viewType: 'myView',
onPlatformViewCreated: (viewId) async {
final div = html.window.document.getElementById('myDivId')
as html.DivElement;
div.style.backgroundColor = 'red';
},
),
),
),
);
}Logs
Launching lib/main.dart on Chrome in debug mode...
This app is linked to the debug service: ws://127.0.0.1:53778/20k_NPLe51o=/ws
Debug service listening on ws://127.0.0.1:53778/20k_NPLe51o=/ws
Connecting to VM Service at ws://127.0.0.1:53778/20k_NPLe51o=/ws
Error: TypeError: null: type 'Null' is not a subtype of type 'DivElement'
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3 throw_
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1385:3 _failedAsCheck
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1363:3 _generalAsCheckImplementation
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1258:30 _installSpecializedAsCheck
packages/web_platform_view/main.dart 23:17 <fn>
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 127:5 _async
packages/web_platform_view/main.dart 21:35 <fn>
packages/flutter/src/widgets/_html_element_view_web.dart 65:30 <fn>
dart-sdk/lib/async/zone.dart 1661:54 runUnary
dart-sdk/lib/async/future_impl.dart 162:18 handleValue
dart-sdk/lib/async/future_impl.dart 838:44 handleValueCallback
dart-sdk/lib/async/future_impl.dart 867:13 _propagateToListeners
dart-sdk/lib/async/future_impl.dart 643:5 [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 713:7 callback
dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7 <fn>Doctor output
[✓] Flutter (Channel stable, 3.19.1, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB)
• Flutter version 3.19.1 on channel stable at /Users/tom/.puro/envs/stable/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision abb292a07e (33 hours ago), 2024-02-20 14:35:05 -0800
• Engine revision 04817c99c9
• Dart version 3.3.0
• DevTools version 2.31.1
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/tom/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/tom/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.86.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.80.0
[✓] Connected device (4 available)
• Tom’s iTelephone (mobile) • 00008130-000A4D8820A1401C • ios • iOS 17.3.1 21D61
• iPhone 15 Pro Max (mobile) • 2904497E-B3E2-450A-B364-A5A0B0D0901A • ios •
com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome 121.0.6167.184
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listEmbedding Android/iOS views in Flutter appsIt was better in the past than it is nowIssues with https://api.flutter.dev/Found to occur in 3.19Found to occur in 3.20The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team