[Flutter]WebViewを実装する方法

はじめに
環境
実装方法
さいごに
おすすめ参考書

はじめに

アプリを作成しているとウェブブラウザに遷移することなく、アプリ内にウェブビューを表示したいことがあります。

そこで今回はWebViewを実装する方法を紹介しようと思います。

環境

Flutter 3.29.3
webview_flutter 4.11.0

実装方法

プラグインの最新バージョンを確認

下記のサイトにアクセスし、バージョンを確認します。

webview_flutter | Flutter package

A Flutter plugin that provides a WebView widget backed by the system webview.

記事作成の時点では4.11.0が最新バージョンでした。

プラグインのインストール

プロジェクトのルートフォルダ内で以下のコマンドを実行し、プラグインをインストールします。

flutter pub add webview_flutter

webview_flutterのプラグインはAndroidでAPI Level 19以上にする必要があります。以下のようにminSdkVersionを書き換えます。

/android/app/build.gradle.kts

android {

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId = "com.example.sample"
        // You can update the following values to match your application needs.
        // For more information, see: https://flutter.dev/to/review-gradle-config.
-        minSdk = flutter.minSdkVersion
+        minSdk = 19
        targetSdk = flutter.targetSdkVersion

これでプラグインのインストールは完了です。

サンプルコード

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late WebViewController controller;

  @override
  void initState() {
    super.initState();

    controller =
        WebViewController()
          ..setJavaScriptMode(JavaScriptMode.unrestricted)
          ..setBackgroundColor(const Color(0x00000000))
          ..loadRequest(Uri.parse('https://www.google.com/'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('WebView')),
      body: SafeArea(child: WebViewWidget(controller: controller)),
    );
  }
}

実行結果

簡単に実装できました！

さいごに

WebViewまでもこんなに簡単に実装出来てしまうなんてFlutter素敵すぎます。

またもう少し踏み入ったWebViewの実装方法は以下の記事を参考にしてください。