WebView without height inside Scroll not working

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

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

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)\}\),&nbsp;<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

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