FlutterでWebviewを表示する

webview_flutterがpublishされたのでwebviewを表示してみたいと思います。
versionは v0.0.1

導入

pubspec.yamlに下記を追加

  webview_flutter: ^0.3.0

ios/Runner/Info.plistに下記を追加

	<key>io.flutter.embedded_views_preview</key>
	<true/>

実装例

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

void main() => runApp(MaterialApp(home:WebViewExample()));

class WebViewExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Webview Demo'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.refresh),
              onPressed: () {
                _controller.loadUrl('https://www.twitch.tv/');
              },
            ),
            IconButton(
              icon: Icon(Icons.add_comment),
              onPressed: () {
                showDialog(context: context, builder: (context) {
                  return AlertDialog(title: Text('webviewの上に表示'),);
                });
              },
            ),
          ],
        ),
        body: WebView(
          initialUrl: 'https://youtube.com',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController controller) {
            _controller = controller;
          },
        ),
    );
  }
}

Webviewでページを表示する

initialUrlで設定したページを表示することができます。
また、JavaScriptを有効にする場合にはunrestrictedを設定します。
デフォルトだと無効になっているので注意。

initialUrl: 'https://youtube.com',
javaScriptMode: JavaScriptMode.unrestricted,

任意のページを読み込む

webviewを作成した際にwebviewを操作するControllerを受け取ることができます。

onWebViewCreated: (WebViewController controller) {
  _controller = controller;
},

このControllerを利用してボタンをタップした際にページを読み込むようにしてみます。

            IconButton(
              icon: Icon(Icons.refresh),
              onPressed: () {
                _controller.loadUrl('https://www.twitch.tv/');
              },
            ),

Webviewの上にWidgetを表示する

おそらくflutterではメジャーなこちらのflutter_webview_pluginだとwebviewが最前面のレイヤーに表示されるため、
webviewの上にwidgetを表示することができませんでした。
webview_flutterを使えばダイアログもwebviewの上に表示することができます。

まだちょっと機能不足ではありますがwebviewを使う場合は選択肢に入れてもいいかなと思います。