Skip to content

Commit 34b9637

Browse files
AhmadreAhmadre
committed
Add PointerInterceptor and note in Readme to solve HTMLElementView for WebGL
1 parent 04dc68d commit 34b9637

File tree

8 files changed

+209
-194
lines changed

8 files changed

+209
-194
lines changed

‎README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -621,6 +621,20 @@ class _MyAppState extends State<MyApp> {
621621
> commandLineArgs.add("--profiler-report")
622622
> commandLineArgs.add("--profiler-output-file=" + workingDir + "/build/il2cpp_"+ abi + "_" + configuration + "/il2cpp_conv.traceevents")
623623
624+
### Web GL
625+
626+
> If you develop and ship Flutter with Unity WebGL then you will first notice, that stacked Widgets over your UnityWidget are not tappable!
627+
628+
This is actually a Flutter related Issue (See: https://github.com/flutter/flutter/issues/72273).
629+
630+
To solve this, Flutter-Team already got a solution for this. Use: [PointerInterceptor](https://pub.dev/packages/pointer_interceptor)!
631+
632+
Example usage:
633+
634+
![PointerInterceptor](https://github.com/juicycleff/flutter-unity-view-widget/blob/master/files/PointerInterceptor.png?raw=true)
635+
636+
Note: We already integrated this into our [Examples](/example/lib/screens/) in the `/example` folder.
637+
624638

625639
#### Sponsors
626640

‎example/lib/screens/api_screen.dart‎

Lines changed: 83 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
3+
import 'package:pointer_interceptor/pointer_interceptor.dart';
34

45
class ApiScreen extends StatefulWidget {
56
ApiScreen({Key key}) : super(key: key);
@@ -47,88 +48,90 @@ class _ApiScreenState extends State<ApiScreen> {
4748
webUrl: 'http://localhost:6080',
4849
),
4950
),
50-
Positioned(
51-
bottom: 20,
52-
left: 20,
53-
right: 20,
54-
child: Card(
55-
elevation: 10,
56-
child: Column(
57-
mainAxisSize: MainAxisSize.min,
58-
children: <Widget>[
59-
Padding(
60-
padding: const EdgeInsets.only(top: 20),
61-
child: Text("Rotation speed:"),
62-
),
63-
Slider(
64-
onChanged: (value) {
65-
setState(() {
66-
_sliderValue = value;
67-
});
68-
setRotationSpeed(value.toString());
69-
},
70-
value: _sliderValue,
71-
min: 0,
72-
max: 20,
73-
),
74-
FittedBox(
75-
child: Row(
76-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
77-
children: [
78-
MaterialButton(
79-
onPressed: () {
80-
_unityWidgetController.quit();
81-
},
82-
child: Text("Quit"),
83-
),
84-
MaterialButton(
85-
onPressed: () {
86-
_unityWidgetController.create();
87-
},
88-
child: Text("Create"),
89-
),
90-
MaterialButton(
91-
onPressed: () {
92-
_unityWidgetController.pause();
93-
},
94-
child: Text("Pause"),
95-
),
96-
MaterialButton(
97-
onPressed: () {
98-
_unityWidgetController.resume();
99-
},
100-
child: Text("Resume"),
101-
),
102-
],
51+
PointerInterceptor(
52+
child: Positioned(
53+
bottom: 20,
54+
left: 20,
55+
right: 20,
56+
child: Card(
57+
elevation: 10,
58+
child: Column(
59+
mainAxisSize: MainAxisSize.min,
60+
children: <Widget>[
61+
Padding(
62+
padding: const EdgeInsets.only(top: 20),
63+
child: Text("Rotation speed:"),
10364
),
104-
),
105-
FittedBox(
106-
child: Row(
107-
mainAxisAlignment: MainAxisAlignment.spaceBetween,
108-
children: [
109-
MaterialButton(
110-
onPressed: () async {
111-
await _unityWidgetController
112-
.openInNativeProcess();
113-
},
114-
child: Text("Open Native"),
115-
),
116-
MaterialButton(
117-
onPressed: () {
118-
_unityWidgetController.unload();
119-
},
120-
child: Text("Unload"),
121-
),
122-
MaterialButton(
123-
onPressed: () {
124-
_unityWidgetController.quit();
125-
},
126-
child: Text("Silent Quit"),
127-
),
128-
],
65+
Slider(
66+
onChanged: (value) {
67+
setState(() {
68+
_sliderValue = value;
69+
});
70+
setRotationSpeed(value.toString());
71+
},
72+
value: _sliderValue,
73+
min: 0,
74+
max: 20,
12975
),
130-
),
131-
],
76+
FittedBox(
77+
child: Row(
78+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
79+
children: [
80+
MaterialButton(
81+
onPressed: () {
82+
_unityWidgetController.quit();
83+
},
84+
child: Text("Quit"),
85+
),
86+
MaterialButton(
87+
onPressed: () {
88+
_unityWidgetController.create();
89+
},
90+
child: Text("Create"),
91+
),
92+
MaterialButton(
93+
onPressed: () {
94+
_unityWidgetController.pause();
95+
},
96+
child: Text("Pause"),
97+
),
98+
MaterialButton(
99+
onPressed: () {
100+
_unityWidgetController.resume();
101+
},
102+
child: Text("Resume"),
103+
),
104+
],
105+
),
106+
),
107+
FittedBox(
108+
child: Row(
109+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
110+
children: [
111+
MaterialButton(
112+
onPressed: () async {
113+
await _unityWidgetController
114+
.openInNativeProcess();
115+
},
116+
child: Text("Open Native"),
117+
),
118+
MaterialButton(
119+
onPressed: () {
120+
_unityWidgetController.unload();
121+
},
122+
child: Text("Unload"),
123+
),
124+
MaterialButton(
125+
onPressed: () {
126+
_unityWidgetController.quit();
127+
},
128+
child: Text("Silent Quit"),
129+
),
130+
],
131+
),
132+
),
133+
],
134+
),
132135
),
133136
),
134137
),

‎example/lib/screens/loader_screen.dart‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
3+
import 'package:pointer_interceptor/pointer_interceptor.dart';
34

45
class LoaderScreen extends StatefulWidget {
56
LoaderScreen({Key key}) : super(key: key);
@@ -37,30 +38,32 @@ class _LoaderScreenState extends State<LoaderScreen> {
3738
webUrl: 'http://localhost:6080',
3839
useAndroidViewSurface: true,
3940
),
40-
Positioned(
41-
bottom: 20,
42-
left: 20,
43-
right: 20,
44-
child: Card(
45-
elevation: 10,
46-
child: Column(
47-
children: <Widget>[
48-
Padding(
49-
padding: const EdgeInsets.only(top: 20),
50-
child: Text("Rotation speed:"),
51-
),
52-
Slider(
53-
onChanged: (value) {
54-
setState(() {
55-
_sliderValue = value;
56-
});
57-
setRotationSpeed(value.toString());
58-
},
59-
value: _sliderValue,
60-
min: 0,
61-
max: 20,
62-
),
63-
],
41+
PointerInterceptor(
42+
child: Positioned(
43+
bottom: 20,
44+
left: 20,
45+
right: 20,
46+
child: Card(
47+
elevation: 10,
48+
child: Column(
49+
children: <Widget>[
50+
Padding(
51+
padding: const EdgeInsets.only(top: 20),
52+
child: Text("Rotation speed:"),
53+
),
54+
Slider(
55+
onChanged: (value) {
56+
setState(() {
57+
_sliderValue = value;
58+
});
59+
setRotationSpeed(value.toString());
60+
},
61+
value: _sliderValue,
62+
min: 0,
63+
max: 20,
64+
),
65+
],
66+
),
6467
),
6568
),
6669
),

‎example/lib/screens/no_interaction_screen.dart‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
3+
import 'package:pointer_interceptor/pointer_interceptor.dart';
34

45
class NoInteractionScreen extends StatefulWidget {
56
NoInteractionScreen({Key key}) : super(key: key);
@@ -48,15 +49,17 @@ class _NoInteractionScreenState extends State<NoInteractionScreen> {
4849
useAndroidViewSurface: true,
4950
borderRadius: BorderRadius.all(Radius.circular(70)),
5051
),
51-
Positioned(
52-
bottom: 20,
53-
left: 20,
54-
right: 20,
55-
child: ElevatedButton(
56-
onPressed: () {
57-
Navigator.of(context).pushNamed('/simple');
58-
},
59-
child: Text('Switch Flutter Screen'),
52+
PointerInterceptor(
53+
child: Positioned(
54+
bottom: 20,
55+
left: 20,
56+
right: 20,
57+
child: ElevatedButton(
58+
onPressed: () {
59+
Navigator.of(context).pushNamed('/simple');
60+
},
61+
child: Text('Switch Flutter Screen'),
62+
),
6063
),
6164
),
6265
],

‎example/lib/screens/orientation_screen.dart‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter/services.dart';
33
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
4+
import 'package:pointer_interceptor/pointer_interceptor.dart';
45

56
class OrientationScreen extends StatefulWidget {
67
OrientationScreen({Key key}) : super(key: key);
@@ -38,46 +39,48 @@ class _LoaderScreenState extends State<OrientationScreen> {
3839
webUrl: 'http://localhost:6080',
3940
useAndroidViewSurface: true,
4041
),
41-
Positioned(
42-
bottom: 20,
43-
left: 20,
44-
right: 20,
45-
child: Card(
46-
elevation: 10,
47-
child: Column(
48-
children: <Widget>[
49-
ElevatedButton(
50-
onPressed: () {
51-
if (MediaQuery.of(context).orientation ==
52-
Orientation.portrait) {
53-
SystemChrome.setPreferredOrientations([
54-
DeviceOrientation.landscapeLeft,
55-
DeviceOrientation.landscapeRight
56-
]);
57-
} else if (MediaQuery.of(context).orientation ==
58-
Orientation.landscape) {
59-
SystemChrome.setPreferredOrientations(
60-
[DeviceOrientation.portraitUp]);
61-
}
62-
},
63-
child: Text("Change Orientation"),
64-
),
65-
Padding(
66-
padding: const EdgeInsets.only(top: 20),
67-
child: Text("Rotation speed:"),
68-
),
69-
Slider(
70-
onChanged: (value) {
71-
setState(() {
72-
_sliderValue = value;
73-
});
74-
setRotationSpeed(value.toString());
75-
},
76-
value: _sliderValue,
77-
min: 0,
78-
max: 20,
79-
),
80-
],
42+
PointerInterceptor(
43+
child: Positioned(
44+
bottom: 20,
45+
left: 20,
46+
right: 20,
47+
child: Card(
48+
elevation: 10,
49+
child: Column(
50+
children: <Widget>[
51+
ElevatedButton(
52+
onPressed: () {
53+
if (MediaQuery.of(context).orientation ==
54+
Orientation.portrait) {
55+
SystemChrome.setPreferredOrientations([
56+
DeviceOrientation.landscapeLeft,
57+
DeviceOrientation.landscapeRight
58+
]);
59+
} else if (MediaQuery.of(context).orientation ==
60+
Orientation.landscape) {
61+
SystemChrome.setPreferredOrientations(
62+
[DeviceOrientation.portraitUp]);
63+
}
64+
},
65+
child: Text("Change Orientation"),
66+
),
67+
Padding(
68+
padding: const EdgeInsets.only(top: 20),
69+
child: Text("Rotation speed:"),
70+
),
71+
Slider(
72+
onChanged: (value) {
73+
setState(() {
74+
_sliderValue = value;
75+
});
76+
setRotationSpeed(value.toString());
77+
},
78+
value: _sliderValue,
79+
min: 0,
80+
max: 20,
81+
),
82+
],
83+
),
8184
),
8285
),
8386
),

0 commit comments

Comments
 (0)