mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Publish web_embedding (#1777)
## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/wiki/Chat [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com> Co-authored-by: David Iglesias <ditman@gmail.com> Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com> Co-authored-by: David Iglesias <ditman@gmail.com>
This commit is contained in:
Brett Morgan
GitHub
73
web_embedding/ng-flutter/flutter/lib/main.dart
Normal file
73
web_embedding/ng-flutter/flutter/lib/main.dart
Normal file
@@ -0,0 +1,73 @@
|
||||
// ignore_for_file: avoid_web_libraries_in_flutter
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'pages/counter.dart';
|
||||
import 'pages/dash.dart';
|
||||
import 'pages/text.dart';
|
||||
|
||||
import 'src/js_interop.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const MyApp());
|
||||
}
|
||||
|
||||
class MyApp extends StatefulWidget {
|
||||
const MyApp({super.key});
|
||||
|
||||
@override
|
||||
State<MyApp> createState() => _MyAppState();
|
||||
}
|
||||
|
||||
class _MyAppState extends State<MyApp> {
|
||||
final ValueNotifier<DemoScreen> _screen = ValueNotifier<DemoScreen>(DemoScreen.counter);
|
||||
final ValueNotifier<int> _counter = ValueNotifier<int>(0);
|
||||
final ValueNotifier<String> _text = ValueNotifier<String>('');
|
||||
|
||||
late final DemoAppStateManager _state;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_state = DemoAppStateManager(
|
||||
screen: _screen,
|
||||
counter: _counter,
|
||||
text: _text,
|
||||
);
|
||||
final export = createDartExport(_state);
|
||||
|
||||
// Emit this through the root object of the flutter app :)
|
||||
broadcastAppEvent('flutter-initialized', export);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
title: 'Element embedding',
|
||||
theme: ThemeData(
|
||||
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
|
||||
useMaterial3: true,
|
||||
),
|
||||
home: ValueListenableBuilder<DemoScreen>(
|
||||
valueListenable: _screen,
|
||||
builder: (context, value, child) => demoScreenRouter(value),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget demoScreenRouter(DemoScreen which) {
|
||||
switch (which) {
|
||||
case DemoScreen.counter:
|
||||
return CounterDemo(counter: _counter);
|
||||
case DemoScreen.text:
|
||||
return TextFieldDemo(text: _text);
|
||||
case DemoScreen.dash:
|
||||
return DashDemo(text: _text);
|
||||
}
|
||||
}
|
||||
}
|
||||
47
web_embedding/ng-flutter/flutter/lib/pages/counter.dart
Normal file
47
web_embedding/ng-flutter/flutter/lib/pages/counter.dart
Normal file
@@ -0,0 +1,47 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class CounterDemo extends StatefulWidget {
|
||||
final ValueNotifier<int> counter;
|
||||
|
||||
const CounterDemo({
|
||||
super.key,
|
||||
required this.counter,
|
||||
});
|
||||
|
||||
@override
|
||||
State<CounterDemo> createState() => _CounterDemoState();
|
||||
}
|
||||
|
||||
class _CounterDemoState extends State<CounterDemo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
||||
title: const Text('Counter'),
|
||||
),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
const Text(
|
||||
'You have pushed the button this many times:',
|
||||
),
|
||||
ValueListenableBuilder(
|
||||
valueListenable: widget.counter,
|
||||
builder: (context, value, child) => Text(
|
||||
'$value',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
floatingActionButton: FloatingActionButton(
|
||||
onPressed: () { widget.counter.value++; },
|
||||
tooltip: 'Increment',
|
||||
child: const Icon(Icons.add),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
150
web_embedding/ng-flutter/flutter/lib/pages/dash.dart
Normal file
150
web_embedding/ng-flutter/flutter/lib/pages/dash.dart
Normal file
@@ -0,0 +1,150 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class DashDemo extends StatefulWidget {
|
||||
final ValueNotifier<String> text;
|
||||
|
||||
const DashDemo({super.key, required this.text});
|
||||
|
||||
@override
|
||||
State<DashDemo> createState() => _DashDemoState();
|
||||
}
|
||||
|
||||
class _DashDemoState extends State<DashDemo> {
|
||||
final double textFieldHeight = 80;
|
||||
final Color colorPrimary = Colors.blue.shade700;
|
||||
late TextEditingController textController;
|
||||
|
||||
int totalCharCount = 0;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Initial value of the text box
|
||||
totalCharCount = widget.text.value.length;
|
||||
textController = TextEditingController.fromValue(
|
||||
TextEditingValue(
|
||||
text: widget.text.value,
|
||||
selection: TextSelection.collapsed(offset: widget.text.value.length)
|
||||
)
|
||||
);
|
||||
// Report changes
|
||||
textController.addListener(_onTextControllerChange);
|
||||
// Listen to changes from the outside
|
||||
widget.text.addListener(_onTextStateChanged);
|
||||
}
|
||||
|
||||
void _onTextControllerChange() {
|
||||
widget.text.value = textController.text;
|
||||
setState(() {
|
||||
totalCharCount = textController.text.length;
|
||||
});
|
||||
}
|
||||
|
||||
void _onTextStateChanged() {
|
||||
textController.value = TextEditingValue(
|
||||
text: widget.text.value,
|
||||
selection: TextSelection.collapsed(offset: widget.text.value.length),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
textController.dispose();
|
||||
widget.text.removeListener(_onTextStateChanged);
|
||||
}
|
||||
|
||||
void _handleClear() {
|
||||
textController.value = TextEditingValue(
|
||||
text: '',
|
||||
selection: TextSelection.collapsed(offset: widget.text.value.length),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: Column(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
color: colorPrimary,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
'COUNT WITH DASH!',
|
||||
style: Theme.of(context).textTheme.titleLarge!.copyWith(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
// Bordered dash avatar
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: ClipOval(
|
||||
child: Container(
|
||||
color: Colors.white,
|
||||
padding: const EdgeInsets.all(2),
|
||||
child: ClipOval(
|
||||
child: Container(
|
||||
color: colorPrimary,
|
||||
padding: const EdgeInsets.all(2),
|
||||
child: const CircleAvatar(
|
||||
radius: 45,
|
||||
backgroundColor: Colors.white,
|
||||
foregroundImage: AssetImage('assets/dash.png'),
|
||||
)
|
||||
),
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
'$totalCharCount',
|
||||
style: Theme.of(context).textTheme.displayLarge!.copyWith(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(12),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
autofocus: true,
|
||||
controller: textController,
|
||||
maxLines: 1,
|
||||
decoration: const InputDecoration(
|
||||
border: OutlineInputBorder(),
|
||||
hintText: 'Type something!',
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 12),
|
||||
child: Ink(
|
||||
decoration: ShapeDecoration(
|
||||
color: colorPrimary,
|
||||
shape: const CircleBorder(),
|
||||
),
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
color: Colors.white,
|
||||
onPressed: _handleClear,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
70
web_embedding/ng-flutter/flutter/lib/pages/text.dart
Normal file
70
web_embedding/ng-flutter/flutter/lib/pages/text.dart
Normal file
@@ -0,0 +1,70 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class TextFieldDemo extends StatefulWidget {
|
||||
const TextFieldDemo({super.key, required this.text});
|
||||
final ValueNotifier<String> text;
|
||||
|
||||
@override
|
||||
State<TextFieldDemo> createState() => _TextFieldDemoState();
|
||||
}
|
||||
|
||||
class _TextFieldDemoState extends State<TextFieldDemo> {
|
||||
late TextEditingController textController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
// Initial value of the text box
|
||||
textController = TextEditingController.fromValue(
|
||||
TextEditingValue(
|
||||
text: widget.text.value,
|
||||
selection: TextSelection.collapsed(offset: widget.text.value.length)
|
||||
)
|
||||
);
|
||||
// Report changes
|
||||
textController.addListener(_onTextControllerChange);
|
||||
// Listen to changes from the outside
|
||||
widget.text.addListener(_onTextStateChanged);
|
||||
}
|
||||
|
||||
void _onTextControllerChange() {
|
||||
widget.text.value = textController.text;
|
||||
}
|
||||
|
||||
void _onTextStateChanged() {
|
||||
textController.value = TextEditingValue(
|
||||
text: widget.text.value,
|
||||
selection: TextSelection.collapsed(offset: widget.text.value.length),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
super.dispose();
|
||||
textController.dispose();
|
||||
widget.text.removeListener(_onTextStateChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
|
||||
title: const Text('Text Field'),
|
||||
),
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(14.0),
|
||||
child: TextField(
|
||||
controller: textController,
|
||||
maxLines: null,
|
||||
decoration: const InputDecoration(
|
||||
border: OutlineInputBorder(),
|
||||
hintText: 'Type something!',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
8
web_embedding/ng-flutter/flutter/lib/src/js_interop.dart
Normal file
8
web_embedding/ng-flutter/flutter/lib/src/js_interop.dart
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
/// Exposes useful functions to interop with JS from our Flutter app.
|
||||
library example_js_interop;
|
||||
|
||||
export 'js_interop/counter_state_manager.dart';
|
||||
export 'js_interop/helper.dart' show broadcastAppEvent;
|
||||
|
||||
export 'package:js/js_util.dart' show createDartExport;
|
||||
@@ -0,0 +1,77 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:js/js.dart';
|
||||
|
||||
enum DemoScreen {
|
||||
counter('counter'),
|
||||
text('text'),
|
||||
dash('dash');
|
||||
|
||||
const DemoScreen(String screen) : _screen = screen;
|
||||
final String _screen;
|
||||
|
||||
@override
|
||||
String toString() => _screen;
|
||||
}
|
||||
|
||||
/// This is the bit of state that JS is able to see.
|
||||
///
|
||||
/// It contains getters/setters/operations and a mechanism to
|
||||
/// subscribe to change notifications from an incoming [notifier].
|
||||
@JSExport()
|
||||
class DemoAppStateManager {
|
||||
// Creates a DemoAppStateManager wrapping a ValueNotifier.
|
||||
DemoAppStateManager({
|
||||
required ValueNotifier<DemoScreen> screen,
|
||||
required ValueNotifier<int> counter,
|
||||
required ValueNotifier<String> text,
|
||||
}) : _counter = counter, _text = text, _screen = screen;
|
||||
|
||||
final ValueNotifier<DemoScreen> _screen;
|
||||
final ValueNotifier<int> _counter;
|
||||
final ValueNotifier<String> _text;
|
||||
|
||||
// _counter
|
||||
int getClicks() {
|
||||
return _counter.value;
|
||||
}
|
||||
void setClicks(int value) {
|
||||
_counter.value = value;
|
||||
}
|
||||
void incrementClicks() {
|
||||
_counter.value++;
|
||||
}
|
||||
void decrementClicks() {
|
||||
_counter.value--;
|
||||
}
|
||||
|
||||
// _text
|
||||
void setText(String text) {
|
||||
_text.value = text;
|
||||
}
|
||||
|
||||
String getText() {
|
||||
return _text.value;
|
||||
}
|
||||
|
||||
// _screen
|
||||
void setScreen(String screen) {
|
||||
_screen.value = DemoScreen.values.byName(screen);
|
||||
}
|
||||
|
||||
String getScreen() {
|
||||
return _screen.value.toString();
|
||||
}
|
||||
|
||||
// Allows clients to subscribe to changes to the wrapped value.
|
||||
void onClicksChanged(VoidCallback f) {
|
||||
_counter.addListener(f);
|
||||
}
|
||||
|
||||
void onTextChanged(VoidCallback f) {
|
||||
_text.addListener(f);
|
||||
}
|
||||
|
||||
void onScreenChanged(VoidCallback f) {
|
||||
_screen.addListener(f);
|
||||
}
|
||||
}
|
||||
55
web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart
Normal file
55
web_embedding/ng-flutter/flutter/lib/src/js_interop/dom.dart
Normal file
@@ -0,0 +1,55 @@
|
||||
import 'dart:js_interop';
|
||||
import 'package:js/js.dart';
|
||||
import 'package:js/js_util.dart' as js_util;
|
||||
|
||||
/// 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)
|
||||
|
||||
@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, js_util.jsify(options) as JSAny);
|
||||
}
|
||||
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;
|
||||
@@ -0,0 +1,10 @@
|
||||
import 'dom.dart' as dom;
|
||||
|
||||
/// 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]');
|
||||
assert(root != null, 'Flutter root element cannot be found!');
|
||||
|
||||
dom.dispatchCustomEvent(root!, name, data);
|
||||
}
|
||||
Reference in New Issue
Block a user