[Flutter] iOS で WebView の Scrollbar の位置がずれる問題を修正する

Flutter で Web ページを表示する

webview_flutter を使いますが iOS デバイスで表示すると Scrollbar の位置が変なところに出るという報告があります。

普通に WebView を表示すると、

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: WebView(
            initialUrl: "https://www.google.com/",
            javascriptMode: JavascriptMode.unrestricted,
          )
       );
  }

確かに位置がずれます。

スレッドをみてみたら「ClipRect で包むととりあえず回避できる」とコメントがあったので試してみました。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: ClipRect(
          child: WebView(
            initialUrl: "https://www.google.com/",
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ));
  }

確かに直ってますね。

元の原因を追ってはいないのですが WebView を使う場合はとりあえずこの方法で回避できそうです。