スマートフォンのメモリに保存されているローカルHTMLファイルを、flutterとDartを使用してwebviewでレンダリングしたい。
私のプラグイン 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) {
},
),
),
),
]))
);
}
}