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の公式ページが表示されるようになります。
![](https://seeds-digital.com/wp-content/uploads/2024/05/0bd93c1bbb2a41f4994c285e376c6b24-509x1024.png)
Comment