質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

Q&A

0回答

869閲覧

flutter_webview_pluginでiOSのassetsへのURLを教えてください

nsgo

総合スコア0

Flutter

Flutterは、iOSとAndroidのアプリを同じコードで開発するためのフレームワークです。オープンソースで開発言語はDart。双方のプラットフォームにおける高度な実行パフォーマンスと開発効率を提供することを目的としています。

0グッド

0クリップ

投稿2021/07/21 07:33

前提・実現したいこと

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スキームで試したところうまくいったので、現在に至ります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問