38

I know its possible to add a WebView as a full page but couldn't find any sample code to do it. I assume you could use a PageView as it's base but not sure how to call the native android WebView and add it to the PageView.

Can anyone point me in the right direction?

1

11 Answers 11

43

You can use https://pub.dartlang.org/packages/webview_flutter

example

import 'package:webview_flutter/webview_flutter.dart';

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
2
  • This is probably the one to go for, sadly it´s still in developer preview.
    – 最白目
    Commented Dec 12, 2018 at 19:58
  • 4
    Important: The keyboard will not display on Android (see issue #19718). This is a showstopper if you're trying to use this for OAuth. If you need this functionality, please vote on the issue and perhaps it will be re-prioritized to be fixed sooner than its current milestone of October 2019.
    – Matt
    Commented Mar 17, 2019 at 7:56
15

Flutter doesn't have built-in support for embedded WebViews. Follow issue 730 for updates.

You can still show web content in your app, but you'll have to leave Flutter-land using the plugin system.

If you just want to open a browser, you can use the url_launcher Flutter plugin.

If you want to do something fancier (perhaps you don't want a visible address bar), you could implement a custom UIViewController (iOS example) and Activity (Android example) and use the plugin API to launch into these.

1
8

You can use the below dart plugin to display the Webview.Also, you can find dart plugin from this url: https://pub.dartlang.org/packages/flutter_webview_plugin

new MaterialApp(
      routes: {
        "/": (_) => new WebviewScaffold(
          url: "https://www.google.com",
          appBar: new AppBar(
            title: new Text("Widget webview"),
          ),
        ),
      },
    );
1
  • 2
    This one works better than webview_flutter in my opinion. It does not have problems displaying the keyboard and I did not experienced some crashes that webview_flutter was creating when clicking in, for example, a dropdown menu. Commented Apr 9, 2019 at 8:37
6

As of 2023, there has been an update to the package version (webview_flutter: ^4.0.6) which allows for loading URLs using the WebViewWidget. To do this, you can create an object from the WebView controller and then utilize the 'loadRequest' property in the WebView controller.

there is the example

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});
  @override
  Widget build(BuildContext context) {
    WebViewController webViewController = WebViewController();

    return Scaffold(
        appBar: AppBar(),
        body: WebViewWidget(
            controller: webViewController
              ..loadRequest(Uri.parse('https://flutter.dev'))));
  }
}
5

webview plugin works well, however it will be created over the top of every single bit of your app so you will have to add additional logic to show and hide the plugin. You can show it full screen or as a sized rectangle.

https://pub.dartlang.org/packages/flutter_webview_plugin

4

You can use Flutter webview plugin. Here is the url for the plugin https://pub.dartlang.org/packages/webview_flutter

Webview with CircularProgressIndicator Here are some screenshots. Before After

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

class WebView extends StatefulWidget {
  @override
  _WebViewState createState() => _WebViewState();
}

class _WebViewState extends State<WebView> {

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();

  num _stackToView = 1;

  void _handleLoad(String value) {
    setState(() {
      _stackToView = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: Builder(builder: (BuildContext context) {
            return IconButton(
              icon: Icon(Icons.volume_up, color: Colors.black,),
              onPressed: () {
                Navigator.pop(context);
              },
            );
          }),
          backgroundColor: Colors.white10,
          elevation: 0,
        ),
        body: IndexedStack(
          index: _stackToView,
          children: [
            Column(
              children: <Widget>[
                Expanded(
                    child: WebView(
                  initialUrl: "https://www.google.co.in/",
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageFinished: _handleLoad,
                  onWebViewCreated: (WebViewController webViewController) {
                    _controller.complete(webViewController);
                  },
                )),
              ],
            ),
            Container(
              child: Center(child: CircularProgressIndicator(),)
            ),
          ],
        ));
  }
}
3

In pubspec.yml file add dependency:

webview_flutter: ^0.1.1

For ioS App below keys paste in .plist file inside the ios project folder

<key>io.flutter.embedded_views_preview</key><string>yes</string>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
</dict>

and this is class code:

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

class WebViewClass extends StatefulWidget {
  @override
  _WebViewClassState createState() => _WebViewClassState();
}

class _WebViewClassState extends State<WebViewClass> {
  Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WebView'),
      ),
      body: WebView(
        initialUrl: 'https://google.com',
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
        },
      ),
    );
  }
}
1
  • Hi! Thank you for suggestion, but it still now working: Unsupported operation: Trying to use the default webview implementation for TargetPlatform.macOS but there isn't a default one Commented Apr 8, 2021 at 13:40
3

You can use the flutter_inappwebview plugin, which is a Flutter Plugin that allows you to add inline webviews integrated with the widget tree or open an in-app browser window! It offers a lot of events, methods, and options compared to other webview plugins!

Main Classes:

  • InAppWebView: Flutter Widget for adding an inline native WebView integrated into the flutter widget tree. To use InAppWebView class on iOS you need to opt-in for the embedded views preview by adding a boolean property to the app's Info.plist file, with the key io.flutter.embedded_views_preview and the value YES.
  • ContextMenu: This class represents the WebView context menu.
  • HeadlessInAppWebView: Class that represents a WebView in headless mode. It can be used to run a WebView in background without attaching an InAppWebView to the widget tree.
  • InAppBrowser: In-App Browser using native WebView.
  • ChromeSafariBrowser: In-App Browser using Chrome Custom Tabs on Android / SFSafariViewController on iOS.
  • InAppLocalhostServer: This class allows you to create a simple server on http://localhost:[port]/. The default port value is 8080.
  • CookieManager: This class implements a singleton object (shared instance) which manages the cookies used by WebView instances.
  • HttpAuthCredentialDatabase: This class implements a singleton object (shared instance) which manages the shared HTTP auth credentials cache.
  • WebStorageManager: This class implements a singleton object (shared instance) which manages the web storage used by WebView instances.

Here is an example that shows a WebView as full page:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  InAppWebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child:InAppWebView(
                    initialUrl: "https://flutter.dev/",
                    initialOptions: InAppWebViewGroupOptions(
                        crossPlatform: InAppWebViewOptions(
                          debuggingEnabled: true,
                        )
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      _webViewController = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                ),
              ),
            ])),
      ),
    );
  }
}

Screenshot:

enter image description here

1
  • InAppWebView has 10000 open issues... Commented Jul 11, 2022 at 9:55
1

LIB: https://pub.dev/packages/webview_flutter

My implementation like this:

import 'package:webview_flutter/webview_flutter.dart';
...
return Scaffold(
      appBar: AppBar(toolbarHeight: 0),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev/',
          javascriptMode: JavascriptMode.unrestricted,
          gestureNavigationEnabled: true,
          backgroundColor: const Color(0x00000000),
        );
      }),
    );
0
0

cause 'http' is forbid in Android 9

you can set:

In your android>app>src>main folder navigate to the AndroidManifest.xml

   <application
    android:name="io.flutter.app.FlutterApplication"
    android:icon="@mipmap/ic_launcher"
    android:usesCleartextTraffic="true" />

Flutter WebView Plugin error on android 9

0

Here is the full code, if you are having problems adding it to your app:

Add webview_flutter to your package's pubspec.yaml file, right under dependencies:

pubspec.yaml:

dependencies:
  webview_flutter: 

main.dart:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Flutter'),
        ),
        body: const WebView(
          initialUrl: 'https://flutter.io',
          javascriptMode: JavascriptMode.unrestricted,
        ),
      )
    );
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.