Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 13:58:47 +00:00
Code Issues Releases Wiki Activity

[ng-flutter] migrate to pkg:web (#2173)

Browse Source
This commit is contained in:
Pavel Mazhnik
2024-03-02 11:26:48 +03:00
committed by GitHub
parent b99602847a
commit 4c93f8356f
5 changed files with 14 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web_embedding/ng-flutter/flutter/lib/main.dart
View File

@@ -35,7 +35,7 @@ class _MyAppState extends State<MyApp> {
counter: _counter,
text: _text,
);
final export = createDartExport(_state);
final export = createJSInteropWrapper(_state);
// Emit this through the root object of the flutter app :)
broadcastAppEvent('flutter-initialized', export);

3
web_embedding/ng-flutter/flutter/lib/src/js_interop.dart
View File

@@ -4,5 +4,4 @@ library;
export 'js_interop/counter_state_manager.dart';
export 'js_interop/helper.dart' show broadcastAppEvent;
// Replace with createJSInteropWrapper when updating to Dart 3.3.
export 'dart:js_util' show createDartExport;
export 'dart:js_interop' show createJSInteropWrapper;

56
web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart
View File

@@ -1,56 +0,0 @@
/// This is a little bit of JS-interop code so this Flutter app can dispatch
/// a custom JS event (to be deprecated by package:web)
library;
import 'dart:js_interop';
@JS('CustomEvent')
@staticInterop
class DomCustomEvent {
external factory DomCustomEvent.withType(JSString type);
external factory DomCustomEvent.withOptions(JSString type, JSAny options);
factory DomCustomEvent._(String type, [Object? options]) {
if (options != null) {
return DomCustomEvent.withOptions(type.toJS, options.jsify()!);
}
return DomCustomEvent.withType(type.toJS);
}
}
dispatchCustomEvent(DomElement target, String type, Object data) {
final DomCustomEvent event = DomCustomEvent._(type, <String, Object>{
'bubbles': true,
'composed': true,
'detail': data,
});
target.dispatchEvent(event);
}
@JS()
@staticInterop
class DomEventTarget {}
extension DomEventTargetExtension on DomEventTarget {
@JS('dispatchEvent')
external JSBoolean _dispatchEvent(DomCustomEvent event);
bool dispatchEvent(DomCustomEvent event) => _dispatchEvent(event).toDart;
}
@JS()
@staticInterop
class DomElement extends DomEventTarget {}
extension DomElementExtension on DomElement {
@JS('querySelector')
external DomElement? _querySelector(JSString selectors);
DomElement? querySelector(String selectors) => _querySelector(selectors.toJS);
}
@JS()
@staticInterop
class DomDocument extends DomElement {}
@JS()
@staticInterop
external DomDocument get document;

13
web_embedding/ng-flutter/flutter/lib/src/js_interop/helper.dart
View File

@@ -1,10 +1,15 @@
import 'dom.dart' as dom;
import 'dart:js_interop';
import 'package:web/web.dart';
/// Locates the root of the flutter app (for now, the first element that has
/// a flt-renderer tag), and dispatches a JS event named [name] with [data].
void broadcastAppEvent(String name, Object data) {
final dom.DomElement? root = dom.document.querySelector('[flt-renderer]');
void broadcastAppEvent(String name, JSObject data) {
final HTMLElement? root = document.querySelector('[flt-renderer]') as HTMLElement?;
assert(root != null, 'Flutter root element cannot be found!');
dom.dispatchCustomEvent(root!, name, data);
final eventDetails = CustomEventInit(detail: data);
eventDetails.bubbles = true;
eventDetails.composed = true;
root!.dispatchEvent(CustomEvent(name, eventDetails));
}