【flutter】 webview_flutterバージョン4以上の使い方

webview_flutterの使い方を調べてもバージョン3*の使い方しか出てこないため、現バージョンの4.0.7の基本的な使い方を載せておきます。

ドキュメントを見ても難しいという方向けです。バージョン4以上の使い方を教えてくれよぉって困ってる人は是非読んでみてください！

使い方

まずはwebview_flutterをインストールしておきます。

flutter pub add webview_flutter

バージョン4.0.7がインストールされていることを確認します。

単純にWebサイトを表示させるだけの場合

class WebViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(
        controller: WebViewController()
          ..loadRequest(Uri.parse("https://example.com/")),
      ),
    );
  }
}

WebViewControllerのloadRequest内にURLを指定することで実装可能です。

読み込み中はローディングアイコンを表示させたい場合

上記の実装だと、Webサイトが表示されるまで画面が真っ白になってしまうため、Webサイトが表示されるまではローディングアイコンを表示させたほうが親切かと思います。
以下はWebViewControllerを設定してローディングアイコンを表示させる方法です。
(StatefullWidgetを使用します)

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;

  bool _isLoading = false;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            setState(() {
              _isLoading = true;
            });
          },
          onPageFinished: (String url) async {
            setState(() {
              _isLoading = false;
            });
          },
        ),
      )
      ..loadRequest(Uri.parse("https://example.com/"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebViewSample'),
      ),
      body: Center(
        (_isLoading) 
	? const CircularProgressIndicator(),
        : child: WebViewWidget(controller: _controller),
      );
  }
}

今回はWebViewControllerをinitState()内で記述します。
WebViewControllerのメソッドであるsetNavigationDelegateを設定します。

onPageStartedではWebサイトを読み込んでいる間の処理を記述します。
onPageFinishedではWebサイトが読み込み終わった後の処理を記述します。

Webサイトを読み込んでいる間はis_Loadingをtrueに、読み込み終わった後はfalseにし、三項演算子でtrueの時はローディングアイコンを表示させるといった実装になります。

Widget内で三項演算子を用いて_isLoadingのboot値によって表示を切り替えるようにしています。

以上がwebview_flutterバージョン4以上の基本的な使い方になります。

また、WebViewをColumnウィジェット内で使いたい場合があるかと思います。
その場合は応用的に、runJavaScriptReturningResultというメソッドを使って読み込んだWebサイトの高さを取得する方法などもありますが、面倒なので気が向いたらまた書きます。