webview_flutterのVersion4以上を初めて使う際に気を付けること

2023年12月29日

最近Flutterアプリ上で動作するブラウザウィジェットを使用する機会がありました。
webview_flutterを使おうと調べながら実装をしていたのですが、なかなかうまく動作しませんでした。

それもそのはず。Version3.X以下とVersion4.Xで全然使い方が全然違うじゃないか！？
ネット上で調べるとだいたいはVersion3.X以下の使い方を紹介されていて、Version4.Xの使い方があまりありませんでした。。。。（新しめな情報なので仕方ないですが泣）

そこで私が最低限行った実装例を忘備録的に残しておこうと思います。

この記事はこんな人向け

・webview_flutterを初めて使おうと思っている
・webview_flutterについて何も知らない
・webview_flutterを最低限てっとり早く動かしたい

webview_flutterの使用例

2022年12月にwebview_flutterはVersion4.0となりました。
それに伴って、使い方が大きく変更となっています。
（Version3→4への詳細な変化点は公式サイトリンクをご参照ください）

webview_flutterを簡単に実装した際のサンプルコードは下記になります。

・Windows10
・Flutter 3.10.2
・webview_flutter 4.2.0

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:io';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'webview_flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text("webview_flutter Demo"),
        ),
        body: WebViewWidget(
          controller: WebViewController()
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..loadRequest(Uri.parse("https://google.com")),
        ),
      ),
    );
  }
}

実際にwebview_flutterを使用しているのは、body部分になります。
表示するサイトのjavascriptを有効にしたい場合は、”..setJavaScriptMode(JavaScriptMode.unrestricted)”と記載します。また、表示するサイトのURLは、”..loadRequest(Uri.parse(“https://google.com”))”のように記載します。