How to render a local HTML file with flutter dart webview

后端未结

关注

 8  1961

孤城傲影

I want to render a local HTML file stored in my phone memory in webview using flutter and dart.

相关标签:

8条回答

情话喂你

2020-12-02 19:20

    Use webviewPlus---->
    
         dependencies:
          webview_flutter_plus: ^0.1.1+10
    
    
         add traffic on android >> app >> src >> main >> AndroidManifest.xml 
        <application
               android:usesCleartextTraffic="true">
        </application>
    
    
        Take these permission also on this Manifest file -------->
            <uses-permission android:name="android.permission.INTERNET" />
            <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
            <uses-permission android:name="android.permission.WAKE_LOCK" />
    
    update ios info.plist----->
    
    location-----------------> ios/Runner/Info.plist
    <key>NSAppTransportSecurity</key>
      <dict>
        <key>NSAllowsArbitraryLoads</key> <true/>
      </dict>
    <key>io.flutter.embedded_views_preview</key> <true/> 


Code like this
WebViewPlus(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      controller.loadString(r"""
           <html lang="en">
            <body>hello world</body>
           </html>
      """);
    },
  )

0 讨论(0)

耶瑟儿～

2020-12-02 19:22
unzip the apk package,I found the reason: path is wrong;

For Android:

"assets/test.html" == "file:///android_asset/flutter_assets/assets/test.html"

so,just like this:
```
WebView(
    initialUrl: "file:///android_asset/flutter_assets/assets/test.html",
    javascriptMode: JavascriptMode.unrestricted,
  )
```
you can load "assets/test.html".
0 讨论(0)
发布评论:

提交评论
- 加载中...
灰色年华

2020-12-02 19:25
@Suragch, your code doesn't work as you posted it, it says localUrl was called on null. _loadHtmlFromAssets needs to be called after assigning the controller :
```
onWebViewCreated: (WebViewController webViewController) {
  _controller = webViewController;
  _loadHtmlFromAssets();
}
```
Then it works fine :)
0 讨论(0)
发布评论:

提交评论
- 加载中...
天命终不由人

2020-12-02 19:27
You can pass a data URI
```
Uri.dataFromString('<html><body>hello world</body></html>', mimeType: 'text/html').toString()
```
or you can launch a web server inside Flutter and pass an URL that points to the IP/port the server serves the file from.

See also the discussion in https://github.com/fluttercommunity/flutter_webview_plugin/issues/23

See https://flutter.io/docs/development/ui/assets-and-images#loading-text-assets about how to load a string from assets.

See https://flutter.io/docs/cookbook/persistence/reading-writing-files for how to read other files.
0 讨论(0)
发布评论:

提交评论
- 加载中...

囚心锁ツ

2020-12-02 19:33

You may use Flutter InAppWebView Plugin. It will create a local server inside the app and it’ll run the HTML app there in the WebView. Start your server:

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  runApp(new MyApp());
}

//... ...

class _MyHomePageState extends State < MyHomePage > {

//... ...

  @override
  void dispose() {
    localhostServer.close();
    super.dispose();
  }
}

And then point your localhost html index file in the WebView.

InAppWebView(
  initialUrl: "http://localhost:8080/assets/index.html",
),

In many cases it doesn't work for many people because they forget to add all the folders as the assets in the pubspec.yaml file. For example, you need to specify all the folders and index file like below:

  assets:
    - assets/index.html
    - assets/css/
    - assets/images/
    - assets/js/
    - assets/others/

You can see this tutorial for further details.

0 讨论(0)

慢半拍i

2020-12-02 19:34

I am using the webview_flutter plugin from the Flutter Team.

Steps

Add the dependency to pubspec.yaml:

dependencies:
  webview_flutter: ^0.3.20+2

Put an html file in the assets folder (see this). I'll call it help.html.

Get the html string in code and add it to the webview.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';


class HelpScreen extends StatefulWidget {
  @override
  HelpScreenState createState() {
    return HelpScreenState();
  }
}

class HelpScreenState extends State<HelpScreen> {
  WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Help')),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _loadHtmlFromAssets();
        },
      ),
    );
  }

  _loadHtmlFromAssets() async {
    String fileText = await rootBundle.loadString('assets/help.html');
    _controller.loadUrl( Uri.dataFromString(
        fileText,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }
}

Notes:

I needed to set the encoding to UTF-8 because I was getting a crash for non-ASCII characters.
In iOS you need to add the key io.flutter.embedded_views_preview as true in the Info.plist file. Check the docs for any update on this requirement.

How to render a local HTML file with flutter dart webview

Steps

Notes:

See also