【Flutter】WebView|Webページをアプリ内で表示

今回はWebViewの基本的な使い方を紹介します。

WebViewを使えばWebページをアプリ内で表示できます。

\ 世界最大級のオンライン学習サービス /

目次

事前準備|webview_flutterの導入

flutter pub add webview_flutter
import 'package:webview_flutter/webview_flutter.dart';

WebViewを使用するにはFlutterパッケージwebview_flutterを導入します。

android {
    defaultConfig {
        minSdkVersion 19
    }
}

android>app>build.gradleminSdkVersionが19以上であるか確認します。19より低い場合は修正します。

WebViewの使い方

WebView(
  initialUrl: 'https://www.amazon.com/',
),

initialUrlの引数に表示したいWebページURLをString型で渡します。

onPageStarted|ページをロードした瞬間に現在のURLを取得

WebView(
  initialUrl: 'https://www.amazon.com/',
  onWebViewCreated: (controller) {
    this.controller = controller;
  },
  onPageStarted: (url) {
    print('現在のURL:$url');
  },
),

onPageStartedではページをロードする度に現在のURLを取得します。

上記コードの場合は別のページに移動するたびにコンソール上で新しいURLが出力されます。

Webページの操作・情報取得

コントローラーの作成

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late WebViewController controller; // <- ここ

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlutterZero'),
        ),
        body: WebView(
          initialUrl: 'https://www.amazon.com/',
          onWebViewCreated: (controller) { // <- ここ
            this.controller = controller;
          },
        ),
      ),
    );
  }
}

Webページの画面操作・URLの情報取得などするには、WebViewのコントローラーとなるプロパティをWebViewController定義し、onWebViewCreatedで紐づけます。

上記コードをコピペすればOKです。

loadUrl|指定したURLのWebページをロード

IconButton(
  onPressed: () async {
    controller.loadUrl('https://flutter.dev/');
  },
  icon: Icon(Icons.book),
)

指定したURLのWebページをロードするにはコントローラーのloadUrlメソッドを使用します。

goBack|前のページに戻る

IconButton(
  icon: Icon(Icons.arrow_back_ios),
  onPressed: () async {
    controller.goBack();
  },
),

前のページに戻るにはコントローラーのgoBackメソッドを使用します。

goForward|前のページに進む

leading: IconButton(
  icon: Icon(Icons.arrow_forward_ios),
  onPressed: () async {
    controller.goForward();
  },
),

前のページに進むにはコントローラーのgoForwardメソッドを使用します。

currentUrl|現在のURLを取得

IconButton(
  icon: Icon(Icons.copy_outlined),
  onPressed: () async {
    var url = await controller.currentUrl();
    print('コピーしたURL:$url');
  },
),

任意のタイミングで現在のURLを取得するにはコントローラーのcurrentUrlメソッドを使用します。

reload|現在のページを再読み込み

IconButton(
  icon: Icon(Icons.refresh),
  onPressed: () async {
    controller.reload();
  },
),

現在のページを再読み込みするにはコントローラーのreloadメソッドを使用します。

サンプルコード

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

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('FlutterZero'),
          leading: IconButton(
            icon: Icon(Icons.arrow_back_ios),
            onPressed: () async {
              controller.goBack();
            },
          ),
          actions: [
            IconButton(
              onPressed: () async {
                controller.loadUrl('https://flutter.dev/');
              },
              icon: Icon(Icons.book),
            ),
            IconButton(
              icon: Icon(Icons.copy_outlined),
              onPressed: () async {
                var url = await controller.currentUrl();
                print('コピーしたURL:$url');
              },
            ),
          ],
        ),
        body: WebView(
          initialUrl: 'https://www.amazon.com/',
          onWebViewCreated: (controller) {
            this.controller = controller;
          },
          onPageStarted: (url) {
            print('現在のURL:$url');
          },
        ),
      ),
    );
  }
}

参考

  • URLをコピーしました!
目次