my purpose is trying to put a widget above the video(e.g. youtube) full screen mode, now a solution is using OverlayEntry. But still video full screen will overlay everything else when onEnterFullscreen, is it possible to let OverlayEntry widget has higher priority?
If this way does not work, here is another solution I may try later, use another page above this youtube page... I am learning flutter, please let me know if there is a better solution, thank you! How to make a full screen dialog in flutter?
Here is code:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
await SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
runApp(MyApp());
}
class MyApp extends StatefulWidget {
static final String title = 'Overlay test';
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) => MaterialApp(
debugShowCheckedModeBanner: false,
title: MyApp.title,
theme: ThemeData(primarySwatch: Colors.blue),
home: MainPage(),
);
}
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
late InAppWebViewController webViewController;
OverlayEntry? entry;
final focusNode = FocusNode();
void showOverlay() {
print('+++++++++showOverlay On+++++++++');
final overlay = Overlay.of(context)!;
final renderBox = context.findRenderObject() as RenderBox;
final size = renderBox.size;
entry = OverlayEntry(
builder: (context) => Positioned(
width: size.width,
child: buildOverlay(),
),
);
overlay.insert(entry!);
}
Widget buildOverlay() {
return Material(
elevation: 8,
child: Column(
children: <Widget>[
ListTile(
leading: Image.network(
'https://images.unsplash.com/photo-1554151228-14d9def656e4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=333&q=80',
fit: BoxFit.cover,
),
title: Text('Sarah Abs'),
subtitle: Text('OverlayEntry test'),
onTap: () {},
),
],
),
);
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text(MyApp.title),
centerTitle: true,
),
body: Container(
width: double.maxFinite,
height: double.maxFinite,
child: InAppWebView(
initialUrlRequest:
URLRequest(url: Uri.parse('https://www.youtube.com/watch?v=_kbWfoRQ-BY&ab_channel=ArminvanBuuren')),
onEnterFullscreen: (controller) async {
WidgetsBinding.instance!.addPostFrameCallback((_) => showOverlay());
},
),
),
);
}
--------------- update ----------------
Hi Олег Давиденко thanks a lot for the clue, I added this code but when I click fullscreen from youtube, still nothing above the screen as before, could you please let me know how to use this injection? thanks a lot!
onEnterFullscreen: (controller) async{
print('------------------');
controller.evaluateJavascript(source: """
var button = document.createElement("Button");
button.innerHTML = "Title";
button.style = "top:0;right:0;position:absolute;z-index: 9999"
document.body.appendChild(button);
""");
},
