-->

Source Code Template Web View Platflom Flutter Dart

Plugin that allows Flutter to communicate with native WebView.


Warning: The web display is not integrated in the widget tree, this is the original display above the vibrate display. You will not be able to see snackbars, dialogs, or other vibrating widgets that will overlap the screen area taken by the web display.

The getSafeAcceptedType () function is only available for the minimum SDK 21. The eval () function only supports SDK 19 or greater for evaluating Javascript.

Getting Started


iOS

In order for plugin to work correctly, you need to add new key to ios/Runner/Info.plist


NSAppTransportSecurity
    NSAllowsArbitraryLoads
   
    NSAllowsArbitraryLoadsInWebContent
   

NSAllowsArbitraryLoadsInWebContent is for iOS 10+ and NSAllowsArbitraryLoads for iOS 9

How it works Launch WebView Fullscreen with Flutter navigation

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.google.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );

Optional parameters are hidden and initialChild is available so you can display other things while waiting for the page to load. If you set hidden to true it will display the default CircularProgressIndicator. If you also specify Widgets for initialChild, you can display them as you like until the page loads.

Source Code Template Web View Platflom Flutter Dart


e.g. The following will show a read screen with the text 'waiting

return new MaterialApp(
  title: 'Flutter WebView Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  routes: {
    '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'),
    '/widget': (_) => new WebviewScaffold(
      url: selectedUrl,
      appBar: new AppBar(
        title: const Text('Widget webview'),
      ),
      withZoom: true,
      withLocalStorage: true,
      hidden: true,
      initialChild: Container(
        color: Colors.redAccent,
        child: const Center(
          child: Text('Waiting.....'),
        ),
      ),
    ),
  },
);


Access local files in the file system

Set the withLocalUrl option to true in the launch function or in the Webview scaffold to enable support for local URLs.

Note that, on iOS, the localUrlScope option also needs to be set to path to the directory. All files in this folder (or subfolders) will be allowed access. If removed, only local files opened will have permitted access, so no sub-sources are loaded. This option is ignored on Android.

Ignoring SSL Errors

Set the ignSSLErrors option to true to display content from the server with certificates that Webview does not normally trust such as self-signed certificates.

Warning: Don't use this in production.

Note that on iOS you you need to add new key to ios/Runner/Info.plist


NSAppTransportSecurity
    NSAllowsArbitraryLoads
   
    NSAllowsArbitraryLoadsInWebContent
   

NSAllowsArbitraryLoadsInWebContent is for iOS 10+ and NSAllowsArbitraryLoads for iOS 9. Otherwise you'll still not be able to display content from pages with untrusted certificates.

Webview Events

  • Stream onDestroy
  • Stream onUrlChanged
  • Stream onStateChanged
  • Stream onScrollXChanged
  • Stream onScrollYChanged
  • Stream onError
Don't forget to dispose webview flutterWebviewPlugin.dispose()

Webview Functions

Future launch(String url, {
    Map headers: null,
    Set javascriptChannels: null,
    bool withJavascript: true,
    bool clearCache: false,
    bool clearCookies: false,
    bool hidden: false,
    bool enableAppScheme: true,
    Rect rect: null,
    String userAgent: null,
    bool withZoom: false,
    bool displayZoomControls: false,
    bool withLocalStorage: true,
    bool withLocalUrl: true,
    String localUrlScope: null,
    bool withOverviewMode: false,
    bool scrollBar: true,
    bool supportMultipleWindows: false,
    bool appCacheEnabled: false,
    bool allowFileURLs: false,
    bool useWideViewPort: false,
    String invalidUrlRegex: null,
    bool geolocationEnabled: false,
    bool debuggingEnabled: false,
    bool ignoreSSLErrors: false,
});

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner

-->