Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
37
Help us understand the problem. What is going on with this article?
@rydein

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の上に表示することができます。

flutter-webview.gif

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

37
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
rydein

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
37
Help us understand the problem. What is going on with this article?