webview_flutter WEBサイトを表示するまで（webview_flutter 4.0以上対応版）

webview_flutterの公式パッケージにもサンプルが載ってるのですが、機能マシマシのサンプルで自分のやりたいことに比べてオーバースペックだな、と感じたため必要最低限のWEBサイト表示だけを実現する実装について紹介します。

開発環境：
Android Studio Electric Eel（flutterプラグインインストール済み）
flutter 3.7.8
webview_flutter 4.0.7

プロジェクト作成

New Flutter Project押下

Generatorsで「Flutter」選択してNEXT押下

適当なプロジェクト名を入力してCreate押下

flutter_webview パッケージインストール

AndroidStudioのターミナルにて

flutter pub add webview_flutter

dependenciesに自動的に追記されます。

pubspec.yaml

dependencies:
  webview_flutter: ^4.0.7

実装コード

では一気にWEBサイトを表示するコードです！

main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(
        controller: WebViewController()
          ..loadRequest(Uri.parse("https://flutter.dev")),
      ),
    );
  }
}

はいー、表示されました！

flutter_webview 3.x系とは別物というレベルで破壊的変更が加わっているようです。ググって出てくる記事が3.x系が多かったのでうまくいかず結構焦りましたが、公式パッケージのサンプルを読み解きながら実装して見たらなんとかなりました。webviewのjavascriptからflutterのメソッドを実行する方法なども追って紹介していきたいと思います！