Flutter Dart WebViewでローカルHTMLファイルをレンダリングする方法

スマートフォンのメモリに保存されているローカルHTMLファイルを、flutterとDartを使用してwebviewでレンダリングしたい。

2018/12/18Abdoulaye Barry

私のプラグイン flutter_inappwebview を使用できます。これには、他のプラグインと比較して、多くのイベント、メソッド、オプションがあります！

アセットフォルダーからhtmlファイルを読み込むには、使用する前にpubspec.yamlファイルで宣言する必要があります（詳細はこちらを参照）。

pubspec.yamlファイルの例：

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  assets:
    - assets/index.html

...

その後、initialFileウィジェットのInAppWebViewパラメータを使用して、index.htmlをWebViewにロードできます。

import 'Dart:async';

import 'package:flutter/material.Dart';

import 'package:flutter_inappwebview/flutter_inappwebview.Dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialFile: "assets/index.html",
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

2019/11/30Lorenzo Pichilli