It appears that stacking widget on top of a WebViewWidget does not work in the web version.
I have also tested this on Android, and there stacking widgets on top of WebViewWidget does appear to work.
I also tried using another WebView package web_browser, but the same behaviour occurs.
Steps to Reproduce
- Install
webview_flutter_web (0.2.2+1) webview_flutter
- Execute
flutter run on the code sample using Chrome (see "Code sample" section below)
- Click "Webview with icon test" button
- Interact with widgets (back button, visibility icon)
Expected results:
Interactivity with the widgets, such as returning when using the back button, or switching the visibility symbol to a visibility_off symbol.
Actual results:
No interactivity. The back button sometimes show the "hover over" effect.
Code sample
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
// import 'package:web_browser/web_browser.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(
builder: (context) => Scaffold(
body: Center(
child: Card(
child: ListTile(
title: const Text(
'Webview with icon test',
),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
return const WebViewPage();
},
),
);
}),
),
),
),
),
);
}
}
class WebViewPage extends StatefulWidget {
const WebViewPage({Key? key}) : super(key: key);
@override
State<WebViewPage> createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
late final WebViewController _controller;
@override
void initState() {
super.initState();
_controller = WebViewController()
..loadRequest(
Uri.parse('http://flutter.dev'),
);
}
bool visibilityIsPressed = false;
@override
Widget build(BuildContext context) {
final ColorScheme colors = Theme.of(context).colorScheme;
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(
color: colors.primary,
),
backgroundColor: Colors.transparent,
),
body: Stack(
children: [
WebViewWidget(controller: _controller),
// Browser(initialUriString: 'https://flutter.dev/',), //Another package with the same issue
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
IconButton(
iconSize: 30,
icon: (visibilityIsPressed)
? const Icon(Icons.visibility_off_outlined)
: const Icon(Icons.visibility_outlined),
onPressed: () {
setState(() {
visibilityIsPressed = !visibilityIsPressed;
});
},
),
],
),
),
),
],
),
);
}
}
Logs
The verbose log is too long to attach in the text so it is attached as a separate file.
run_verbose.txt
Analyzing flutter_application_1...
No issues found! (ran in 1.0s)
[✓] Flutter (Channel stable, 3.7.6, on Ubuntu 22.10 5.14.0-1034-oem, locale en_US.UTF-8)
• Flutter version 3.7.6 on channel stable at /home/william/snap/flutter/common/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 12cb4eb7a0 (3 weeks ago), 2023-03-01 10:29:26 -0800
• Engine revision ada363ee93
• Dart version 2.19.3
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /home/william/Android/Sdk
• Platform android-33-ext4, build-tools 33.0.2
• Java binary at: /snap/android-studio/125/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
• All Android licenses accepted.
[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = /snap/bin/chromium
[✓] Linux toolchain - develop for Linux desktop
• clang version 10.0.0-4ubuntu1
• cmake version 3.16.3
• ninja version 1.10.0
• pkg-config version 0.29.1
[run_verbose.txt](https://github.com/flutter/flutter/files/11054321/run_verbose.txt)
[✓] Android Studio (version 2021.3)
• Android Studio at /snap/android-studio/125/android-studio
• 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 11.0.13+0-b1751.21-8125866)
[✓] VS Code
• VS Code at /snap/code/current
• Flutter extension version 3.60.0
[✓] Connected device (2 available)
• Linux (desktop) • linux • linux-x64 • Ubuntu 22.10 5.14.0-1034-oem
• Chrome (web) • chrome • web-javascript • Chromium 111.0.5563.64 snap
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found!
It appears that stacking widget on top of a WebViewWidget does not work in the web version.
I have also tested this on Android, and there stacking widgets on top of WebViewWidget does appear to work.
I also tried using another WebView package web_browser, but the same behaviour occurs.
Steps to Reproduce
webview_flutter_web (0.2.2+1)webview_flutterflutter runon the code sample using Chrome (see "Code sample" section below)Expected results:
Interactivity with the widgets, such as returning when using the back button, or switching the visibility symbol to a visibility_off symbol.
Actual results:
No interactivity. The back button sometimes show the "hover over" effect.
Code sample
Logs
The verbose log is too long to attach in the text so it is attached as a separate file.
run_verbose.txt