[Flutter]webview_flutterを使用するには？

どうも、ちょげ(@chogetarou)です。

webview_flutterパッケージを使用する方法を紹介します。

方法

webview_flutterを使用するには、まず、pubspec.yamlでパッケージを追加します。

dependencies:
  webview_flutter: ^3.0.4

そして、該当ファイルでパッケージをインポートします。

import 'package:webview_flutter/webview_flutter.dart';

Androidを使用する場合は、次に、「project > android > app > build.gradle」で、SDKの最小バージョンを19以上にします。

defaultConfig {
        applicationId "com.example.sample_app"
        minSdkVersion 20
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
}

最後に、WebViewを表示したい場所にWebView()を配置します。

WebViewの引数「initialURL」に表示されるWebページのURLを指定します。

WebView(
  initialUrl: 'url',
),

これでWebViewが配置された場所にWebページが表示されます。

@override
void initState() {
  super.initState();
  //Androidのエミュレータを使う場合
  if (Platform.isAndroid) WebView.platform = AndroidWebView();
}

使用例

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isLoading = false;

  @override
  void initState() {
    super.initState();
    //Androidのエミュレータを使う場合
    if (Platform.isAndroid) WebView.platform = AndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Sample'),
      ),
      body: Stack(
        children: [
          if (_isLoading)
            Align(
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            ),
          WebView(
            initialUrl: 'https://www.choge-blog.com',
            onPageStarted: (url) {
              //Webページのローディング開始時の処理
              setState(() {
                _isLoading = true;
              });
            },
            onPageFinished: (url) {
              //Webページのローディング終了時の処理
              setState(() {
                _isLoading = false;
              });
            },
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ],
      ),
    );
  }
}