Flutter Open Web URL in App using WebView Example Tutorial

WebView in flutter is used to display online Web URL’s in flutter android iOS mobile apps. Sometimes we have some payment flow or like button already present in our website and we don’t wanted to implement complete payment flow again in our app. So we can use WebView and do all this by opening page in WebView. WebView is one of the most used widget in flutter. Flutter gives us separate widget to use WebView. We can install WebView from pub.dev website of all pub packages in flutter. So in this tutorial we would integrate embed Flutter Open Web URL in App using WebView Android iOS Example Tutorial.

Contents in this project Flutter Open Web URL in App using WebView Android iOS Example Tutorial:

1. Open your flutter project’s pubspec.yaml file in any Text editor.

2. Find dependencies line and put webview_flutter: ^0.3.19+6 just after it.

Complete source code for my pubspec.yaml file after making changes:

3. Open your current folder project Root folder in Command Prompt or Terminal and execute flutter pub get command like i did in below screenshot.

Now your flutter project is ready to use the official flutter WebView plugin. Next step is start coding for app.

4. Open your project’s main.dart file and import material.dart and webview_flutter.dart plugin.

5. Create void main runApp() method and here we would call our main MyApp root class.

6. Create our main Root class named as MyApp extends with State less widget. In this class we would call the WebViewLoad class in body area.

7. Create WebViewLoad class extends StatefulWidget. In this class we would call the createState() method of flutter State management and define the next child class with it.

8. Create our main child class named as WebViewLoadUI extends with State.

9. Creating Widget Build area in WebViewLoadUI class and in the body section we would call the WebView widget.

  • initialUrl : The Web URL which would display when WebView starts.
  • javascriptMode : To enable and disable JavaScript on current displaying URL.

10. Complete source code for main.dart file:

Screenshot:

Leave a Reply

Your email address will not be published. Required fields are marked *