WebView without height inside Scroll not working - flutter

Question

On Flutter...I tried to add Webview inside all the available containers that support scroll but it didn't work on Android.
ListView(
shrinkWrap: true,
children: <Widget>[
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
Expanded(
child: WebView(
key: Key("webview1"),
debuggingEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://flutter.dev/")),
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
],
)

Answer 1

If you want to put your scrollable WebView between other widget's and WebView will be scrollable, other's widget's are not, then just change your ListView for Column like that:
Column(
children: <Widget>[
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
Container(
height: 300,
child: WebView(
key: Key("webview1"),
debuggingEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://flutter.dev/")
),
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
)
But if u want to have some scrollable widgets on top of WebView, then try
CustomScrollView or SliverList.
Can you tell what exact logic you are trying to make?
additions:
If you want to have scrollable area and some WebView inside, you can have to know height of WebView:
ListView(
physics: ClampingScrollPhysics(),
children: <Widget>[
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 10000),
child: WebView(
gestureRecognizers: Set()
..add(
Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer(),
), // or null
),
key: Key("webview1"),
debuggingEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://flutter.dev/")),
Text("hiiiiiiiiiiiii "),
Text("hiiiiiiiiiiiii "),
],
);
Height of WebView you could get dynamically, inspiration is here:
https://gist.github.com/PonnamKarthik/877a90917a576ecff613d5169680d02c

Answer 2

Thank you dubace for your solution gist.github.com/PonnamKarthik/877a90917a576ecff613d5169680d02c
The issue solved and now we can add Webview inside parent scrollable container.
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Code Sample',
builder: (BuildContext context, Widget navigator) {
return MyStatelessWidget();
},
);
}
}
class MyStatelessWidget extends StatefulWidget {
MyStatelessWidget({Key key}) : super(key: key);
#override
_MyStatelessWidgetState createState() => _MyStatelessWidgetState();
}
class _MyStatelessWidgetState extends State<MyStatelessWidget> {
List<WebViewController> _listController = List();
List<double> _heights =
List<double>.generate(htmlStrings.length, (int index) => 20.0);
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
shrinkWrap: true,
itemCount: htmlStrings.length,
itemBuilder: (context, index) {
return Container(
height: _heights[index] ?? 100.0,
child: WebView(
initialUrl:
'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlStrings[index]))}',
onPageFinished: (some) async {
double height = double.parse(await _listController[index]
.evaluateJavascript(
"document.documentElement.scrollHeight;"));
setState(() {
_heights[index] = height;
});
},
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) async {
_listController.add(controller);
},
),
);
},
),
);
}
}
final List<String> htmlStrings = [
'''<p>Table shows some compounds and the name of their manufacturing process</p>
<table style="border-collapse: collapse; width: 100%; height: 85px;" border="1">
<tbody>
<tr style="height: 17px;">
<td style="width: 50%; text-align: center; height: 17px;">Compounds/Elements</td>
<td style="width: 50%; text-align: center; height: 17px;">Manufacture process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Nitric acid</td>
<td style="width: 50%; height: 17px;">Ostwald's process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Ammonia</td>
<td style="width: 50%; height: 17px;">Haber's process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Sulphuric acid</td>
<td style="width: 50%; height: 17px;">Contact process</td>
</tr>
<tr style="height: 17px;">
<td style="width: 50%; height: 17px;">Sodium</td>
<td style="width: 50%; height: 17px;">Down's process</td>
</tr>
</tbody>
</table>''',
'''<p>\(L=[M{L }^{2 }{T }^{-2 }{A }^{-2 }]\)</p>
<p>\(C=[{M }^{-1 }{L }^{-2 }{T }^{4 }{A }^{2 }]\)</p>
<p>\(R=[M{L }^{2 }{T }^{-3 }{A }^{-2 }]\)</p>
<p>\(\therefore \frac {R}{L}=\frac{[M{L }^{2 }{T }^{-2 }{A }^{-2 }]}{[M{L }^{2 }{T }^{-3 }{A }^{-2 }]}=[T]\)</p>''',
'''<p>Displacement(s)\(=\left(13.8\pm0.2\right)m\)</p>
<p>Time(t)\(=\left(4.0\pm0.3\right)s\)</p>
<p>Velocity(v)\(=\frac{13.8}{4.0}=3.45m{s}^{-1}\)</p>
<p>\(\frac{\delta v}{v}=\pm\left(\frac{\delta s}{s}+\frac{\delta t}{t}\right)=\pm\left(\frac{0.2}{13.8}+\frac{0.3}{4.0}\right)=\pm0.0895\)</p>
<p>\(\delta v =\pm0.0895*3.45=\pm0.3\)(rounding off to one place of decimal)</p>
<p>\(v=\left(3.45\pm0.3\right)m{s}^{-1}\)</p>''',
'''<p>The only real numbers satisfying \(x^2=4\) are 2 and -2. But none of them satisfy the final condition, \(x+2=3\). So, there is no real number such that these conditions are met. Hence this is null set.</p>
<p>Note that, for \(x\) to be a memner of \(\{x:p(x),q(x)\}\), <em><strong>both</strong></em> \(p(x)\) and \(q(x)\) should be true.</p>''',
];

Answer 3

First Method :-
Make a full scrollable Widget contains WebView (with dynamic height) and other containers above and below it. all should scroll inside the parent Widget
be sure flutter package:webview_flutter: any are properly install.
1.create Future fxn
String hight;
double webHight =400; //default some value
Future funcThatMakesAsyncCall() async{
var result =
await controller.evaluateJavascript('document.body.scrollHeight');
//here we call javascript for get browser data
setState(() {
hight = result;
},);}
2.we use SingleChildScrollView
scrollDirection: Axis.vertical,
3.Inside use Column
4.finally we use Conatiner
inside Container we use WebView
here Container Code
Container(
height: webHight+20,
child: WebView(
initialUrl: widget.url,
onPageFinished: (webhight)async{
await funcThatMakesAsyncCall();
setState((){
webHight= double.parse(hight);
});
},
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
controller = webViewController;
},
),
),
second method :-
plugin vesion :> webview_flutter: ^3.0.4
Column(
children: [
Container(
height: Get.height * 0.1,
color: Colors.amber,
),
Expanded(
// height: 200,
child: WebView(
gestureNavigationEnabled: true,
gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{
Factory<OneSequenceGestureRecognizer>(
() => EagerGestureRecognizer(),
),
},
onWebViewCreated: (WebViewController webViewController) {
bscontroller.webcontroller = webViewController;
},
initialUrl: 'https://flutter.dev',
),
)
],
),
when i stuck another time than in same problem and try my old answer but this not work this time for me so, than i figure out another way
and this second answer to same problem

Answer 4

I had the same issue in the beginning. You can specify which gestures get passed
on to the webView widget with the gestureRecognizers parameter. Bellow code helps to capture the vertical scroll event.
WebView(
initialUrl: someUrl,
gestureRecognizers: Set()
..add(Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer())),
)
I found this post also very useful for webview
The Power of WebViews in Flutter