Issue
I am using using the Perspectives Pageview library in Flutter to implement a horizontal carousel. Everything works fine when I am just rendering regular Containers with images or text, etc.
However, when I embed a WebView, it overflows beyond its parent Container, and resizes upon moving the Widget around:
I am unsure of what causes this and how I may fix it so that it stays inside the parent, like other elements.
My code:
Container(
child: Center(
// Adding Child Widget of Perspective PageView
child: PerspectivePageView(
hasShadow: true, // Enable-Disable Shadow
shadowColor: Colors.black12,
children: <Widget>[
Container(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.black54,
child: Container(
color: Colors.white,
child: Column(
children: [
Expanded(
child: WebViewPlus(
onWebViewCreated: (controller) {
this._controller = controller;
controller
.loadString(_htmlForCardsList[0]);
},
javascriptMode: JavascriptMode.unrestricted,
),
)
],
)),
padding: EdgeInsets.all(2),
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"View Next",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w400,
color: Colors.orange),
),
],
),
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(color: Colors.black54, width: .3),
bottom: BorderSide(color: Colors.black54, width: 1.5),
left: BorderSide(color: Colors.black54, width: 1.5),
right: BorderSide(color: Colors.black54, width: 1.5),
),
),
),
],
),
color: Colors.orange)])))
I have also tried replacing the Expanded parent of the WebView with
Container(
width: 300,
height: 200,
child: WebViewPlus(
...
and I encounter the same issue. Upon horizontally scrolling the carousel, the WebView size changes, unlike other content contained within the Carousel.
Many thanks for any insight.
Solution
You can copy paste run full code below
You can use package https://pub.dev/packages/flutter_inappwebview
code snippet
Expanded(
child: InAppWebView(
initialUrl: url,
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated:
(InAppWebViewController controller) {
webView = controller;
print("onWebViewCreated");
webView.loadData(
data: _htmlForCardsList[0]);
},
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:perspective_pageview/perspective_pageview.dart';
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: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
InAppWebViewController webView;
String url = "about:blank";
double progress = 0;
bool status = false;
@override
dispose() {
webView.stopLoading();
super.dispose();
}
List<String> _htmlForCardsList = [
'''<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>'''
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
child: Center(
// Adding Child Widget of Perspective PageView
child: PerspectivePageView(
hasShadow: true, // Enable-Disable Shadow
shadowColor: Colors.black12,
children: <Widget>[
Container(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.black54,
child: Container(
color: Colors.white,
child: Column(
children: [
Expanded(
child: InAppWebView(
initialUrl: url,
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
),
),
onWebViewCreated:
(InAppWebViewController controller) {
webView = controller;
print("onWebViewCreated");
webView.loadData(
data: _htmlForCardsList[0]);
},
onLoadStart:
(InAppWebViewController controller,
String url) {
print("start $status");
status = false;
},
onLoadStop:
(InAppWebViewController controller,
String url) {
print("stop $status");
status = true;
},
onProgressChanged:
(InAppWebViewController controller,
int progress) {
this.progress = progress / 100;
},
),
)
],
)),
padding: EdgeInsets.all(2),
),
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"View Next",
style: TextStyle(
fontSize: 24.0,
fontWeight: FontWeight.w400,
color: Colors.orange),
),
],
),
height: 60,
decoration: BoxDecoration(
color: Colors.white,
border: Border(
top: BorderSide(color: Colors.black54, width: .3),
bottom: BorderSide(color: Colors.black54, width: 1.5),
left: BorderSide(color: Colors.black54, width: 1.5),
right: BorderSide(color: Colors.black54, width: 1.5),
),
),
),
],
),
color: Colors.orange)
]))),
);
}
}
Answered By – chunhunghan
Answer Checked By – Senaida (FlutterFixes Volunteer)