【Flutter】アプリ内にWEBページを表示する【webview_flutter】

Flutterでwebview_flutterを使ってアプリ内にWEBページを表示したい！

implicit_this_reference_in_initializer

概要

今回の記事では、Flutterでwebview_flutterを使ってアプリ内にWEBページを表示する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2022.3.1
Flutter 3.13.5
webview_flutter 4.7.0

手順書

インストール編とコード編の2部構成です。

インストール編

ターミナルでコマンドを実行するか

flutter pub add webview_flutter

pubspec.yamlのdependencies:に下記のような感じで追加して

dependencies:
  webview_flutter: ^4.7.0

ターミナルでflutter pub getする。

flutter pub get

コード編

アプリ内でAmazonのサイトを表示する例。

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const WebViewSample()
      )
    )
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SafeArea(
        child: WebViewWidget(
          controller: WebViewController()
            ..setBackgroundColor(const Color(0xffffffff))
            ..setJavaScriptMode(JavaScriptMode.unrestricted)
            ..loadRequest(Uri.parse("https://www.amazon.co.jp/")),
        ),
      ),
    );
  }
}

まとめ（感想文）

Flutterでの機能の実装を最低限にして、WEBサーバー側で殆どの機能を実装するやり方もできそうな感じ。