android – How to add a Webview in Flutter?-ThrowExceptions

Exception or error:

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?

How to solve:

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,
      ),
    );

###

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.

###

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"),
          ),
        ),
      },
    );

###

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

###

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(),)
            ),
          ],
        ));
  }
}

###

You can use my plugin flutter_inappbrowser (EDIT: it has been renamed to flutter_inappwebview), that 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!

###

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);
        },
      ),
    );
  }
}

Leave a Reply

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