Shubham Narkhede

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

Creating Webview Application with Flutter

Photo by Jose Gabriel Ortega Castro on Unsplash

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

More by Shubham Narkhede

Topics of interest