Hackernoon logoCreating Webview Application with Flutter by@shubham-narkhede

Creating Webview Application with Flutter

Author profile picture

@shubham-narkhedeShubham Narkhede

https://github.com/Shubham-Narkhede?tab=repositories

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.

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!