Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load local webpage from assets #349

Open
Babelfisch opened this issue Mar 13, 2019 · 11 comments
Open

Load local webpage from assets #349

Babelfisch opened this issue Mar 13, 2019 · 11 comments

Comments

@Babelfisch
Copy link

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
Copy link

sukaiyi commented Mar 15, 2019

#23 this maybe help ?

@Babelfisch
Copy link
Author

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

@adammesa
Copy link

adammesa commented May 31, 2019

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
  1. 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
Copy link

@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
Copy link
Author

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

@garbirel94
Copy link

can't display images or stylesheets

@wtus
Copy link

wtus commented Aug 7, 2019

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
Copy link

seblaa commented Nov 18, 2019

Any movement on this?

@NimaChamika
Copy link

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
Copy link

AzadCoder commented Jun 12, 2021

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'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants