【Flutter】WebViewを使ってWEBページを表示する方法

最終更新日

この記事では、FlutterでWebページをスマホアプリのように表示することができるWebViewについて解説します。

WebViewとは

WebViewとは、スマホアプリのようにwebページを表示させることができるパッケージです。

公式サイト

https://pub.dev/packages/webview_flutter

使い方

このパッケージを使用するには

  1. yamlファイルで読み込む
  2. importする

必要があります。

yamlファイルで読み込む

パッケージを使用するには、始めにyamlファイルで下記のようにしてください。(特に理由がない場合は最新バージョンを使うことをおすすめします!)

yamlファイルに書く際はスペースに注意してください。

dependencies:
  webview_flutter: ^最新のバージョン

importする

パッケージを使用するファイルの先頭で以下のようにしてください。

import 'package:webview_flutter/webview_flutter.dart';

実践

import 'dart:io';

 import 'package:webview_flutter/webview_flutter.dart';

 class WebViewExample extends StatefulWidget {
   @override
   WebViewExampleState createState() => WebViewExampleState();
 }

 class WebViewExampleState extends State<WebViewExample> {
   @override
   void initState() {
     super.initState();
     // Enable virtual display.
     if (Platform.isAndroid) WebView.platform = AndroidWebView();
   }

   @override
   Widget build(BuildContext context) {
     return WebView(
       initialUrl: 'https://flutter.dev',
     );
   }
 }

使い方

WebView(
initialUrl:'表示したいURL'
);

fem