Creating Webview Application with Flutter

Source code of this article //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…

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

Create home.dart…

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

Now it’s time show our webview

How to use?

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

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.