{"id":4883,"date":"2022-11-30T11:51:26","date_gmt":"2022-11-30T11:51:26","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=4883"},"modified":"2022-12-01T04:04:24","modified_gmt":"2022-12-01T04:04:24","slug":"render-webpages-using-flutter-webview","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/","title":{"rendered":"Render webpages using Flutter WebView"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The creation of applications has become simpler after Google released Flutter for mobile or web app development, making it convenient for developers to deploy apps on multiple platforms that too without the need for rewriting code separately which again helps in developing error-free apps.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, because each native operating system has a distinct feature, doing this is no simple task. Google is unable to support them all very well. Therefore, it made Flutter customizable to enable third-party developers to create plugins.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The WebView widget is one of the most prevalent widgets that we offer. We are able to load web pages using this WebView widget.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When necessary, how can we operate the same widget in Flutter? The problem was fixed for us by <\/span><a href=\"https:\/\/pub.dev\/publishers\/flutter.dev\/packages\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Flutter.dev<\/span><\/a><span style=\"font-weight: 400;\">. They created the<\/span><span style=\"font-weight: 400;\"> webview_flutter<\/span><span style=\"font-weight: 400;\"> Flutter plugin to do that. This lesson will explain <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\">, show you how to use it, and provide you with a practical <a href=\"https:\/\/dianapps.com\/flutter-app-development\">Flutter app development services<\/a> example.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"What-is-Flutter-WebView\"><\/span><span style=\"font-weight: 400;\">What is Flutter WebView?\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The Flutter plugin<\/span><span style=\"font-weight: 400;\"> webview_flutter<\/span><span style=\"font-weight: 400;\">\u00a0 offers an Android and iOS WebView widget. Both Android and iOS smartphones can show websites thanks to this plugin. We will learn how to load websites from a local source or from their URL using the<\/span><span style=\"font-weight: 400;\"> webview_flutter<\/span><span style=\"font-weight: 400;\">\u00a0 plugin.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Requirements-for-using-Flutter-WebView\"><\/span><span style=\"font-weight: 400;\">Requirements for using Flutter WebView.<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">In order to build a Flutter project, there are certain tools that need to be installed on your machine:\u00a0<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Flutter\"><\/span><span style=\"font-weight: 400;\">Flutter\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">This Flutter SDK is used to execute and put together Flutter programs. To choose the Flutter SDK for your operating system, go to the <\/span><span style=\"font-weight: 400;\">Flutter documentation<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Windows\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">macOS<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Linux<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Chrome OS<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">How to install the Flutter SDK on your computer is described in the links. Make sure <\/span><span style=\"font-weight: 400;\">flutter<\/span><span style=\"font-weight: 400;\"> is in your global path after installation. Test that the Flutter SDK is installed and accessible globally on your computer by running the command <\/span><span style=\"font-weight: 400;\">flutter \u2014help<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"VS-Code\"><\/span><span style=\"font-weight: 400;\">VS Code<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">VS Code is an empowering modern code editor introduced by Microsoft. It provides a plugin that makes using Flutter from VS Code simple. <\/span><span style=\"font-weight: 400;\">Install the Flutter plugin<\/span><span style=\"font-weight: 400;\"> in Visual Studio Code.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Android-Studio\"><\/span><span style=\"font-weight: 400;\">Android Studio<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Android Studio must be installed on your computer if you want to run and test your apps in Android. Then, we must set up the plugins for Flutter and Dart:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Dart plugins\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"https:\/\/plugins.jetbrains.com\/plugin\/9212-flutter\" rel=\"nofollow\"><span style=\"font-weight: 400;\">Flutter plugins<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Verify that everything is setup and operational. We&#8217;ll set up a Flutter project in the next part.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Setting-up-a-Flutter-project\"><\/span><span style=\"font-weight: 400;\">Setting up a Flutter project<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We&#8217;ll make a Flutter project right away. To do this, we&#8217;ll utilize the <\/span><span style=\"font-weight: 400;\">flutter<\/span><span style=\"font-weight: 400;\"> CLI tool. <\/span><span style=\"font-weight: 400;\">Webviewprj <\/span><span style=\"font-weight: 400;\">will be the name of our Flutter project. Run the command below:<\/span><\/p>\n<ul>\n<li><strong>Flutter create webviewrj<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">After installing dependencies, Flutter will build a project in the <\/span><span style=\"font-weight: 400;\">webviewprj<\/span><span style=\"font-weight: 400;\">folder. Start VS Code and open this project. Everything can be done from the terminal if you don&#8217;t use VS Code, but you&#8217;ll need to open the project in your favorite code editor first:<\/span><\/p>\n<ul>\n<li><strong>cd webviewrj<\/strong><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">There won&#8217;t be a need to do the aforementioned steps if you are using VS Code. To launch the integrated terminal in VS Code, just select View from the top menu and click on <\/span><b>Terminal<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Adding-the-webview-flutter-dependency\"><\/span><span style=\"font-weight: 400;\">Adding the <\/span><span style=\"font-weight: 400;\">\u00a0webview_flutter<\/span><span style=\"font-weight: 400;\"> dependency\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Further to this, we\u2019ll include <\/span><span style=\"font-weight: 400;\">\u00a0webview_flutter<\/span><span style=\"font-weight: 400;\"> dependency in the project. Add the following lines to the <\/span><span style=\"font-weight: 400;\">pubspec.yaml<\/span><span style=\"font-weight: 400;\"> file in the project&#8217;s root directory:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4891 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140456.png\" alt=\"webview_flutter\" width=\"582\" height=\"105\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140456.png 582w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140456-400x72.png 400w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The dependency will be installed by VS Code when you save the pubspec.yaml file. Run the following line in your console to install the <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\"> requirement if you&#8217;re not using Visual Studio Code:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For managing Flutter packages, use the flutter pub commands.<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4890 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140524.png\" alt=\" webview_flutter\" width=\"586\" height=\"36\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140524.png 586w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140524-400x25.png 400w\" sizes=\"(max-width: 586px) 100vw, 586px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">In a Flutter project,<\/span><span style=\"font-weight: 400;\"> flutter pub get <\/span><span style=\"font-weight: 400;\">retrieves packages. In this instance, our Flutter project includes the <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\">\u00a0 package.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The minimum SDK version required for the\u00a0 <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\"> plugin is then configured. Open your project&#8217;s <\/span><span style=\"font-weight: 400;\">android\/app\/build.gradle<\/span><span style=\"font-weight: 400;\"> and add the configuration code listed below to the <\/span><span style=\"font-weight: 400;\">android defaultConfig<\/span><span style=\"font-weight: 400;\"> section:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4889 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140801.png\" alt=\" webview_flutter plugin\" width=\"583\" height=\"127\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140801.png 583w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140801-400x87.png 400w\" sizes=\"(max-width: 583px) 100vw, 583px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-webview-flutter\"><\/span><span style=\"font-weight: 400;\">Using <\/span><span style=\"font-weight: 400;\">\u00a0webview_flutter<\/span><span style=\"font-weight: 400;\">\u00a0\u00a0<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">A <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> class is exported by\u00a0 <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\">. The specified webpage (through its URL) is rendered inside the WebView widget by this class, which also launches and builds a new web view. A <\/span><span style=\"font-weight: 400;\">WebViewController<\/span><span style=\"font-weight: 400;\"> that is supplied to the <\/span><span style=\"font-weight: 400;\">onWebViewCreated<\/span><span style=\"font-weight: 400;\"> function after the WebView is formed can be used to control it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We must import the\u00a0 <\/span><span style=\"font-weight: 400;\">webview_flutter<\/span><span style=\"font-weight: 400;\">\u00a0 package in order to render the <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> widget:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4888 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140831.png\" alt=\" webview_flutter package\" width=\"585\" height=\"34\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140831.png 585w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140831-400x23.png 400w\" sizes=\"(max-width: 585px) 100vw, 585px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">After that, we render the WebView widget like the below-given code example:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4887 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140853.png\" alt=\"WebView widget\" width=\"590\" height=\"80\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140853.png 590w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-140853-400x54.png 400w\" sizes=\"(max-width: 590px) 100vw, 590px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">This will render the page<\/span><span style=\"font-weight: 400;\"> https:\/\/medium.com <\/span><span style=\"font-weight: 400;\">in the <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> widget after loading it. The <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> widget will display <\/span><span style=\"font-weight: 400;\">\u00a0https:\/\/medium.com <\/span><span style=\"font-weight: 400;\">\u00a0in the same way as a browser would. The URL of the website to load and render is specified in the <\/span><span style=\"font-weight: 400;\">initialUrl <\/span><span style=\"font-weight: 400;\">parameter supplied to the <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Using-WebViewController-methods\"><\/span><span style=\"font-weight: 400;\">Using <\/span><span style=\"font-weight: 400;\">WebViewController<\/span><span style=\"font-weight: 400;\"> methods<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">WebViewController <\/span><span style=\"font-weight: 400;\">is passed as an instance to the\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When a <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> object is created, <\/span><span style=\"font-weight: 400;\">WebViewController<\/span><span style=\"font-weight: 400;\"> is supplied as an instance of the <\/span><span style=\"font-weight: 400;\">WebView.onWebViewCreated<\/span><span style=\"font-weight: 400;\"> method. A<\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> is controlled by a <\/span><span style=\"font-weight: 400;\">WebViewController<\/span><span style=\"font-weight: 400;\">, which contains a number of methods we can use to manage <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\"> in various ways. Below, we shall see them:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">canGoBack<\/span><span style=\"font-weight: 400;\"> function determines if any earlier URLs can be retrieved from the history list.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">canGoForward <\/span><span style=\"font-weight: 400;\">determines if the history list has any URLs that might be popped next.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">clearing the WebView&#8217;s cache with the command <\/span><span style=\"font-weight: 400;\">clearCache<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">currentUrl<\/span><span style=\"font-weight: 400;\">: provides the URL that the WebView is now seeing.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">getScrollX:<\/span><span style=\"font-weight: 400;\"> returns the scroll bar&#8217;s current x-axis position.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">getScrollY<\/span><span style=\"font-weight: 400;\"> retrieves the WebView&#8217;s y-current axis&#8217;s location of the scroll bar.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">getTitle:<\/span><span style=\"font-weight: 400;\"> This function retrieves the page&#8217;s title that is presently loaded in the WebView.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The history list&#8217;s <\/span><span style=\"font-weight: 400;\">&#8220;goBack<\/span><span style=\"font-weight: 400;\">&#8221; button fetches the previous URL.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">goForward<\/span><span style=\"font-weight: 400;\"> loads the following URL from the currently-loaded URL in the history list.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">This method,<\/span> <span style=\"font-weight: 400;\">loadFile<\/span><span style=\"font-weight: 400;\">,<\/span><span style=\"font-weight: 400;\"> inserts a file into the WebView.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">From the <\/span><span style=\"font-weight: 400;\">pubspec.yaml <\/span><span style=\"font-weight: 400;\">file,<\/span><span style=\"font-weight: 400;\"> loadFlutterAsset<\/span><span style=\"font-weight: 400;\"> loads an asset into the WebView.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">loadUrl<\/span><span style=\"font-weight: 400;\">: Using a provided URL, this function loads a webpage.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">reload: <\/span><span style=\"font-weight: 400;\">Reloads the currently open WebView page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">runJavaScript<\/span><span style=\"font-weight: 400;\">: Runs the JavaScript code that has been supplied to it in the context of the current WebView page.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">runJavascriptReturningResult:<\/span><span style=\"font-weight: 400;\"> This function runs the JavaScript code supplied to it on the currently-viewed webpage in the WebView and then informs the caller of the results of the execution.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">scrollBy<\/span><span style=\"font-weight: 400;\">: moves the website&#8217;s x- and y-axes to the given positions.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">scrollTo<\/span><span style=\"font-weight: 400;\">: This moves the webpage&#8217;s WebView axis to a certain set.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Creating-widget-pages\"><\/span><span style=\"font-weight: 400;\">Creating widget pages<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The <\/span><span style=\"font-weight: 400;\">HomePage<\/span><span style=\"font-weight: 400;\"> and<\/span><span style=\"font-weight: 400;\"> WebViewPage<\/span><span style=\"font-weight: 400;\"> widget pages will now be added to our app. There will be two buttons on the\u00a0 <\/span><span style=\"font-weight: 400;\">HomePage<\/span><span style=\"font-weight: 400;\">. When a button is clicked, the <\/span><span style=\"font-weight: 400;\">\u00a0WebViewPage<\/span><span style=\"font-weight: 400;\"> page is shown. With the webpage URL sent to the <\/span><span style=\"font-weight: 400;\">WebView <\/span><span style=\"font-weight: 400;\">widget, this <\/span><span style=\"font-weight: 400;\">\u00a0WebViewPage<\/span><span style=\"font-weight: 400;\"> page will render a <\/span><span style=\"font-weight: 400;\">WebView<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create them now. Flutter has already produced some code for us. All widgets other than the <\/span><span style=\"font-weight: 400;\">MyApp <\/span><span style=\"font-weight: 400;\">widget will be removed.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Open the<\/span><span style=\"font-weight: 400;\"> lib\/main.dart<\/span><span style=\"font-weight: 400;\"> file and change the code as follows:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4886 size-full\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-142207.png\" alt=\"Open the lib\/main.dart file and change the code\" width=\"611\" height=\"419\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-142207.png 611w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-30-142207-400x274.png 400w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Check out how we display the HomePage in the MyApp widget. When the app is launched, this renders the HomePage.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Code the HomePage widget now:<\/span><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4896 size-large\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code2-617x1024.jpg\" alt=\"\" width=\"617\" height=\"1024\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code2-617x1024.jpg 617w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code2-400x664.jpg 400w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Check out the two MaterialButton buttons that this HomePage produces. When a button is pressed, it is programmed to invoke the method _handleURLButtonPress.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Open pub.dev, the first button, executes the _handleURLButtonPress function while passing &#8220;https:\/\/pub.dev&#8221; and &#8220;pub.dev&#8221; through the context. The URL of the website that WebView loaded and displayed is &#8220;https:\/\/pub.dev&#8221;. The title of the WebViewPage&#8217;s AppBar will be &#8220;pub.dev.&#8221;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With the context of the parameters, https:\/\/medium.com.com (the website URL that the WebView widget will load and render), and Medium.com, the second button, Open Medium.com, will invoke the method _handleURLButtonPress (title of the WebViewPage page).<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The WebViewPage widget page is launched by the method _handleURLButtonPress. The WebViewPage will receive the URL and page title from it.<\/span><\/p>\n<p><strong>The WebViewPage widget will now be coded:<\/strong><\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-4895 size-large\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code1-617x1024.jpg\" alt=\"\" width=\"617\" height=\"1024\" srcset=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code1-617x1024.jpg 617w, https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/code1-400x664.jpg 400w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">The logic and internal state of the WebViewPage, a stateful widget, are stored in WebPageState.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Url and title are inputs for the WebViewPage function Object() { [native code] }. In the createState function, it provides it to WebViewPageState.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When the WebViewPageState produces the WebView, it gives initialUrl, with this.url as its value, to the WebView.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><span style=\"font-weight: 400;\">Conclusion<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">We provided a brief overview of the plugin in this article with a focus on the InAppWebView widget. Since this plugin is always being updated (the most recent release is 4.0.0 as of the time of writing), we advise you to look at the API Reference to learn about all the capabilities. Use the repository&#8217;s issue section for any new feature requests or bug fixes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We hope this blog had given you some fresh ideas for your Flutter app development needs. For more information, our best bet is to consult a <a href=\"https:\/\/dianapps.com\/website-development\">top website development company<\/a> that can make you understand all the functionalities of using Fluter WebView.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The creation of applications has become simpler after Google released Flutter for mobile or web app development, making it convenient for developers to deploy apps on multiple platforms that too without the need for rewriting code separately which again helps in developing error-free apps.\u00a0 However, because each native operating system has a distinct feature, doing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":4893,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[124,59,127],"class_list":["post-4883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-flutter-app-development-company","tag-flutter-app-development-services","tag-webpages-using-flutter-webview"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading-300x150.png",300,150,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading.png",6000,3000,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Render webpages using Flutter WebView<\/title>\n<meta name=\"description\" content=\"WebViews provide a much easier way to render your web pages into your app. Learn how to embed web pages inside your Flutter mobile apps using the WebView plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Render webpages using Flutter WebView\" \/>\n<meta property=\"og:description\" content=\"WebViews provide a much easier way to render your web pages into your app. Learn how to embed web pages inside your Flutter mobile apps using the WebView plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-30T11:51:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-01T04:04:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6000\" \/>\n\t<meta property=\"og:image:height\" content=\"3000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Render webpages using Flutter WebView","description":"WebViews provide a much easier way to render your web pages into your app. Learn how to embed web pages inside your Flutter mobile apps using the WebView plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/","og_locale":"en_US","og_type":"article","og_title":"Render webpages using Flutter WebView","og_description":"WebViews provide a much easier way to render your web pages into your app. Learn how to embed web pages inside your Flutter mobile apps using the WebView plugin.","og_url":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2022-11-30T11:51:26+00:00","article_modified_time":"2022-12-01T04:04:24+00:00","og_image":[{"width":6000,"height":3000,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/11\/Add-a-heading.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/","url":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/","name":"Render webpages using Flutter WebView","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2022-11-30T11:51:26+00:00","dateModified":"2022-12-01T04:04:24+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"WebViews provide a much easier way to render your web pages into your app. Learn how to embed web pages inside your Flutter mobile apps using the WebView plugin.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/render-webpages-using-flutter-webview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Render webpages using Flutter WebView"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/4883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=4883"}],"version-history":[{"count":9,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions"}],"predecessor-version":[{"id":4903,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/4883\/revisions\/4903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/4893"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=4883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=4883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=4883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}