MENU

【Flutter】WebViewの使い方

Flutter
記事内に商品プロモーションが含まれる場合があります

Flutterアプリ内でWebコンテンツを表示するためにはWebViewを使います。

このページでは、そのWebViewを実装する方法を紹介します。

目次

必要パッケージのインストール

pubspec.yaml で webview_flutter パッケージを追加します。

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.7.0

pubspec.yaml ファイルを保存したら、ターミナルで flutter pub get を実行して依存関係を更新します。

WebViewの使い方

WebViewを使いたいDartファイルで、webview_flutter パッケージをインポートします。

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

WebViewは次のようにして実装します。

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted) // JavaScriptを有効したい場合はこの記述
      ..loadRequest(
        // 画面に表示したいページのURL
        Uri.parse("https://flutter.dev")
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(
        controller: _controller,
      ),
    );
  }
}

initStateで、WebViewのコントローラーを初期化し、JavaScriptを有効にして指定のURLをロードしています。

そして、buildメソッドでWebViewWidgetを使い、Webページを表示しています。

実行結果

プログラムを実行すると、画面にFlutterの公式ページが表示されるようになります。

Flutter
Share

Comment

コメントする

目次