前提・実現したいこと
flutter_webview_pluginを使用して、assets内のhtmlを表示しようとしています。
Androidでは「file:///android_asset/flutter_assets/assets/top.html」でアクセスできます。
iOSだとおそらくassetsへのURLが異なるため表示されませんでした。
###質問
Androidでの「file:///android_asset/flutter_assets/assets/top.html」は、iOSではどのようなURLになるのでしょうか?
発生している問題・エラーメッセージ
該当のソースコード
assetsはプロジェクトフォルダ直下に配置しています。
project_app |-assets |-top.html
pubspec.yaml
yaml
1... 2dependencies: 3 flutter: 4 sdk: flutter 5 6 7 # The following adds the Cupertino Icons font to your application. 8 # Use with the CupertinoIcons class for iOS style icons. 9 cupertino_icons: ^1.0.2 10 flutter_webview_plugin: ^0.4.0 11 12dev_dependencies: 13 flutter_test: 14 sdk: flutter 15 16# For information on the generic Dart part of this file, see the 17# following page: https://dart.dev/tools/pub/pubspec 18 19# The following section is specific to Flutter. 20flutter: 21 22 # The following line ensures that the Material Icons font is 23 # included with your application, so that you can use the icons in 24 # the material Icons class. 25 uses-material-design: true 26 27 # To add assets to your application, add an assets section, like this: 28 # assets: 29 # - images/a_dot_burr.jpeg 30 # - images/a_dot_ham.jpeg 31 assets: 32 - assets/ 33...
main.dart
dart
1import 'package:flutter/material.dart'; 2import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; 3 4String selectedUrl = 'file:///android_asset/flutter_assets/assets/top.html'; 5// ignore: prefer_collection_literals 6final Set<JavascriptChannel> jsChannels = [ 7 JavascriptChannel( 8 name: 'Print', 9 onMessageReceived: (JavascriptMessage message) { 10 print(message.message); 11 }), 12].toSet(); 13 14void main() async { 15 WidgetsFlutterBinding.ensureInitialized(); 16 runApp(MyApp()); 17} 18 19class MyApp extends StatelessWidget { 20 final flutterWebViewPlugin = FlutterWebviewPlugin(); 21 22 23 Widget build(BuildContext context) { 24 return MaterialApp( 25 title: 'Flutter WebView Demo', 26 theme: ThemeData( 27 primarySwatch: Colors.blue, 28 ), 29 routes: { 30 '/': (_) { 31 return WebviewScaffold( 32 url: selectedUrl, 33 javascriptChannels: jsChannels, 34 mediaPlaybackRequiresUserGesture: false, 35 appBar: AppBar( 36 title: const Text('Widget WebView'), 37 ), 38 // withZoom: true, 39 withLocalStorage: true, 40 withLocalUrl: true, 41 allowFileURLs: true, 42 localUrlScope: selectedUrl, 43 ); 44 }, 45 }, 46 ); 47 } 48}
top.html
html
1<!doctype html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8" /> 6 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" /> 7 <title>test</title> 8 <script type="text/javascript"> 9 const CONTENT_PATH = "file:///android_asset/flutter_assets/assets/" 10 </script> 11 <script type="text/javascript" src="js/lib/phaser.js"></script> 12 <script type="text/javascript" src="js/lib/phaser.min.js"></script> 13</head> 14 15<body> 16 <div> 17 <script> 18 console.log(Phaser); 19 </script> 20 </div> 21</body> 22 23</html>
試したこと
「file:///flutter_assets/assets/top.html」や「file:///assets/top.html」は試しました。
補足情報(FW/ツールのバージョンなど)
- Flutter 2.2.3
- flutter_webview_plugin 0.4.0
公式のwebview_flutterやwebview_flutter_plusを試しましたが、html内でのcssやjsのCORSのエラーなどでうまくいきませんでした。
flutter_webview_pluginでfileスキームで試したところうまくいったので、現在に至ります。
あなたの回答
tips
プレビュー