Load local webpage from assets

[Babelfisch]

I try to load a local webpage from my assets:

new WebviewScaffold(
  url: "file:///assets/web/loesungen.html",
  allowFileURLs: true,
…

But if I open the view in Android emulator I get the error message:

The webpage as file:///assets/web/loesungen.html could not be loaded because: net::ERR_FILE_NOT_FOUND

The assets webpage is correct included in pubspec.yaml and I can load the webpage with:

final htmlData = await rootBundle.loadString('assets/web/loesungen.html');

I user Flutter 1.2.1, Dart 2.1.2 and flutter_webview_plugin 0.3.0

Any ideas why it’s not work?

[sukaiyi]

#23 this maybe help ?

[Babelfisch]

No, I'm afraid that doesn't help. There is no solution there.

[adammesa]

I encountered this same challenge, and used a rather hack-y solution to the problem (at least until native functionality is added).

For anyone else who comes across this same challenge, here's what worked for me:

1. In pubspec.yml, ensure flutter has your file listed as an asset

flutter:
  assets:
    - lib/web/localview.html

2. Whenever you want to load the file, run the following function:

  final flutterWebViewPlugin = FlutterWebviewPlugin();

  // Example call 
  void yourFunction() {
    loadHTML("localview.html");
  }

  // Loads the given HTML file into the WebView
  Future<String> loadHTML(String name) async {
    var givenAsset = await rootBundle.loadString('lib/web/$name');
    flutterWebViewPlugin
        .reloadUrl(Uri.dataFromString(givenAsset, mimeType: 'text/html').toString());
    return givenAsset;
  }

This solution is based on URI loading capability mentioned in #23.

[adammesa]

@Babelfisch If you can't use rootBUndle for whatever reason, it just looks like your URL is wrong... I have no idea where you can find the assets URL, but I did come across some code that lets you copy your local file into a new file which you do know URL of. Probably not something you want to do in production, but maybe it'll help you:

  Future<String> loadHTML(String name) async {
    var givenAsset = rootBundle.loadString('lib/web/$name');
    return givenAsset.then((String fileString) async {
      String directory = (await getApplicationDocumentsDirectory()).path;
      String filePath = '$directory/$name';
      var file = new File('$filePath')
          .writeAsString(fileString).then((File file) {
        print(file.uri); // ← Your URL, use this wherever
        flutterWebViewPlugin.reloadUrl(file.uri.toString());
      });
    });
  }

[Babelfisch]

Thanks! But I’m afraid that embedded resources like images or stylesheets (also as assets) will not be loaded with this solution. Correct?

[garbirel94]

can't display images or stylesheets

[wtus]

Thanks! But I’m afraid that embedded resources like images or stylesheets (also as assets) will not be loaded with this solution. Correct?

same problem , any solution now ? i use webview in this way:

[seblaa]

Any movement on this?

[NimaChamika]

This path worked for me url : 'file:///android_asset/flutter_assets/{$relative path}'

[SocietyYourBerotherMing]

flutter_assets

此路径对我 有用：url：'file：/// android_asset / flutter_assets / {$ relative path}'

It works for IOS?

[AzadCoder]

This path worked for me url : 'file:///android_asset/flutter_assets/{$relative path}'

Worked for me too. My URL looks like this now. 'file:///android_asset/flutter_assets/assets/filename.html'