FlutterでWebViewを表示

webview_flutterを利用します。

インストール

pubspec.yaml:

dependencies:
  webview_flutter: ^1.0.7

install:

$ flutter pub get

import

import 'package:webview_flutter/webview_flutter.dart';

利用方法

web_screen.dart:

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

class WebScreen extends StatelessWidget {
  final String initialUrl;

  WebScreen({@required this.initialUrl});

  @override
  Widget build(BuildContext context) {
    // Size deviceSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('テキスト'),
      ),
      body: WebView(
        // WebViewプラグインのウィジェット
        //initialUrl: 呼び出すWebサイトのURLを文字列で渡す
        initialUrl: initialUrl,
        // JavaScriptを有効化させます
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

WebViewを他のViewから呼び出す関数例。

main.dart:

  /*
   * WebViewを開く
   */
  void _openWebView(url) {
    Navigator.push(
        context,
        CupertinoPageRoute(
          builder: (context) => WebScreen(initialUrl: url),
        ));
  }