Creating Webview Application with Flutter

Source code of this article https://github.com/Shubham-Narkhede/flutter_webviews_app

Let’s Begin… for webview in flutter

import webview_flutter into the pubspec.yaml of your project.

Next…

‘https://fluttercentral.com' this is my url and i want to call this url as webview in my app.

Create home.dart…

our home.dart page shows single button and some text for notice which url is open as webview.

This screen contains one button for sending url to webview page and one method for Navigate to another page.

Important part is understanding the _urlHandleButton below, which will navigate to our web view, presented by a custom widget we'll create next called WebViewContainer

Widget _button(BuildContext context, String url) {
    return Container(
        padding: EdgeInsets.all(20.0),
        child: FlatButton(
          color: Colors.black,
          padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 15.0),          child: Text(
            "Call Webview",
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () => _urlHandleButton(context, url),
        ));
  }

  void _urlHandleButton(BuildContext context, String url) {     Navigator.push(context,
        MaterialPageRoute(builder: (context) => WebViewContainer(url)));
  }

This is our home.dart

Now it’s time show our webview

How to use?

The basic structure of webview contains mainly three parameters

Parameters :

• key : Keys, from the flutter framework.
• javascriptMode : Whether Javascript execution is enabled.
• initialUrl : URL which you want to load.

This is basic structure of webview.

Now we create our webview container. We passed a simply constructer WebViewContainer(this.url); for getting an url from home.dart to web_view_container.dart

WebView(
key: _key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: _url);

finally we are done with webview.