WebViewプラグインを使用してWebページをFlutterに埋め込む方法
序章
WebViewプラグインを使用すると、Flutterアプリケーション内にWebページを表示できます。
このチュートリアルでは、アプリケーション全体で使用できるカスタムWidget
を作成し、どこからでもWebView
を起動します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Flutterをダウンロードしてインストールするには。
- Android StudioまたはVisual StudioCodeをダウンロードしてインストールするには。
- コードエディタ用のプラグインをインストールすることをお勧めします。
AndroidStudio用にインストールされたFlutterおよびDartプラグイン。 VisualStudioCode用にインストールされたFlutter拡張機能。
このチュートリアルは、Flutter v1.22.2、Android SDK v30.0.2、およびAndroidStudiov4.1で検証されました。
ステップ1—プロジェクトの設定
Flutter用に環境を設定したら、次のコマンドを実行して新しいアプリケーションを作成できます。
- flutter create flutter_webview_example
新しいプロジェクトディレクトリに移動します。
- cd flutter_webview_example
flutter create
を使用すると、ボタンがクリックされた回数を表示するデモアプリケーションが作成されます。
コードエディタでpubspec.yaml
を開き、次のプラグインを追加します。
dependencies:
flutter:
sdk: flutter
webview_flutter: ^1.0.5
このセットアップが完了すると、WebView
をトリガーして表示するウィジェットを作成できます。
ステップ2—プロジェクトの足場
次に、main.dart
ファイルを更新し、新しいhome_page.dart
ファイルを作成する必要があります。
コードエディタでmain.dart
を開き、home_page.dart
をインポートして、home
をMyHomePage
からHomePage
に変更します。
import 'package:flutter/material.dart';
import 'home_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(),
);
}
}
次に、新しいhome_page.dart
ファイルを作成し、次のコードを追加します。
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {},
),
),
);
}
}
コードをコンパイルして、エミュレーターで実行します。 このコードは、メッセージ"Open Webpage"
を含むFlatButton
を作成します。
ステップ3—WebView
プラグインを使用する
次のステップは、MyWebView
という名前のStatelessWidget
を作成して、WebView
データを表示することです。
新しいmy_webview.dart
ファイルを作成し、次のコードを追加します。
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class MyWebView extends StatelessWidget {
final String title;
final String selectedUrl;
final Completer<WebViewController> _controller = Completer<WebViewController>();
MyWebView({
this.title,
this.selectedUrl,
});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: WebView(
initialUrl: selectedUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
));
}
}
このチュートリアルでは、ユーザーをhttps://www.digitalocean.com/
に移動します。 selectedUrl
を"https://www.digitalocean.com/"
に設定してNavigator.push
を使用します。
home_page.dart
に再度アクセスし、MyWebView
を追加します。
import 'package:flutter/material.dart';
import my_webview.dart;
class HomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Home Page"),
),
body: Center(
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => MyWebView(
title: "DigitalOcean",
selectedUrl: "https://www.digitalocean.com",
)
));
},
),
),
);
}
}
コードをコンパイルして、エミュレーターで実行します。
Webページを開くボタンを操作すると、FlutterアプリケーションにDigitalOceanWebサイトが表示されます。
結論
このチュートリアルでは、WebView
パッケージを使用して、FlutterアプリケーションにWebページを表示しました。
Flutterについて詳しく知りたい場合は、Flutterトピックページで演習とプログラミングプロジェクトを確認してください。