Stacking Widgets Over InAppWebView - flutter

Question

I have a page that displays an InAppWebView. I want to stack a widget on top of it. When I open the page, it displays the stacked widget for a split second but once the web view loads, the stacked widget disappears. I opened the flutter inspector and the widget does exist on the page, it just looks like it is hidden underneath the web view. Do I need to take a different approach here when stacking widgets on top of the InAppWebView?
class UnityFormViewPage extends StatefulWidget {
final UnityForm _selectedForm;
UnityFormViewPage(this._selectedForm);
#override
_UnityFormViewPageState createState() => _UnityFormViewPageState();
}
class _UnityFormViewPageState extends State<UnityFormViewPage> {
String currentUrl = '';
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
appBar: AppBar(
title: Text(widget._selectedForm.title),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
),
body: Stack(
children: [
OfflineBar(),
InAppWebView(
initialUrl: widget._selectedForm.formUrl,
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.currentUrl = url;
});
},
),
],
)),
);
}
}

Answer 1

You can copy paste run full code below
You can change sequence and use Positioned to position OfflineBar
code snippet
Stack(
children: [
InAppWebView(
initialUrl: widget._selectedForm.formUrl,
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.currentUrl = url;
});
},
),
Positioned(left: 0, right: 0, top: 20, child: OfflineBar()),
],
)
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class UnityForm {
String title;
String formUrl;
UnityForm({this.title, this.formUrl});
}
class UnityFormViewPage extends StatefulWidget {
final UnityForm _selectedForm;
UnityFormViewPage(this._selectedForm);
#override
_UnityFormViewPageState createState() => _UnityFormViewPageState();
}
class _UnityFormViewPageState extends State<UnityFormViewPage> {
String currentUrl = '';
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
appBar: AppBar(
title: Text(widget._selectedForm.title),
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
}),
),
body: Stack(
children: [
InAppWebView(
initialUrl: widget._selectedForm.formUrl,
onLoadStart: (InAppWebViewController controller, String url) {
setState(() {
this.currentUrl = url;
});
},
),
Positioned(left: 0, right: 0, top: 20, child: OfflineBar()),
],
)),
);
}
}
class OfflineBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(color: Colors.purple, child: Text("OfflineBar"));
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: UnityFormViewPage(
UnityForm(title: "test", formUrl: "https://flutter.dev/")),
);
}
}