How to display a web page inside my flutter app?

Total
1
Shares

I am trying to display a web page inside my flutter app. I tried the url launcher but when I test it in chrome it creates a new tab. I would like to display the web page with my tabs still visible.

This opens a new tab:

showLink(link) async {

if (await canLaunch(link)) {
  await launch(link, forceSafariVC: true, forceWebView: true);
} else {
  throw "Could not open link (" + link + ").";
}

}

I passed every combination for the boolean parameters I could. I tried the webview, but it fails:

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("TutorialKart - Flutter WebView"),
        ),
        body: Center(
          child: WebView(
            initialUrl: 'https://www.tutorialkart.com/',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller = webViewController;
            },
          ),
        ),
      ),
    );
  }
}

I get:

Unsupported operation: Trying to use the default webview implementation for TargetPlatform.windows but there isn’t a default one

It also provides a link, but the link is quite useless and out of context relative to the error.

How can I get the webview to work, or is there a better option?


Solution

Assuming you are using following package.

webview_flutter: ^2.0.7

It currently doesn’t support the Web Platform and only supports Android and iOS as per their documentation.

One way to achieve a WebView on Flutter Web is by using the IframeElement.

Check this for implementation details.

Leave a Reply

Your email address will not be published. Required fields are marked *