ウェブビュー WebviewScaffold を使って、ウェブページを表示します。

プラグインのインストール

pubspec.yamldependencies ブロックの中に、 flutter_webview_plugin: ^0.1.5 を記述します。

例えば、

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.0
  flutter_webview_plugin: ^0.1.5

のようになります。

0.1.5 はプラグインのバージョンです。 こちら に最新のバージョンが載っていますので確認してください。

そして、ターミナルを開き、

$ flutter packages get

とします。これでインストールは完了です。

使い方

まず、 .dart ファイルの一番上の方に、

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

と書き、ウェブビュー表示用のウィジット WebviewScaffold を使えるようにします。

そして、

WebviewScaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  url: 'https://www.google.co.jp',
)

などとすることで、引数 url に指定したウェブサイトを表示することができます。

コードの例

例えば、コードは以下のようになります。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      url: 'https://www.google.co.jp',
    );
  }
}

スクリーンショット

参考リンク