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.

dependencies:
  webview_flutter: ^0.3.19+6
  flutter:
    sdk: flutter

dependencies:

webview_flutter: ^0.3.19+6

flutter:

sdk: flutter

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

name: myapp
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  webview_flutter: ^0.3.19+6
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

dev_dependencies:
  flutter_test:
    sdk: flutter


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

name: myapp

description: A new Flutter project.

version: 1.0.0+1

environment:

sdk: ">=2.1.0 <3.0.0"

dependencies:

webview_flutter: ^0.3.19+6

flutter:

sdk: flutter

# The following adds the Cupertino Icons font to your application.

# Use with the CupertinoIcons class for iOS style icons.

cupertino_icons: ^0.1.2

dev_dependencies:

flutter_test:

sdk: flutter

# For information on the generic Dart part of this file, see the

# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.

flutter:

# The following line ensures that the Material Icons font is

# included with your application, so that you can use the icons in

# the material Icons class.

uses-material-design: true

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.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

1 2	import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart';

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

void main() => runApp(MyApp());

1	void main() => runApp(MyApp());

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.

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
        body: WebViewLoad()
       )
      );
  }
}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: WebViewLoad()

)

);

}

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.

class WebViewLoad extends StatefulWidget {

  WebViewLoadUI createState() => WebViewLoadUI();

}

class WebViewLoad extends StatefulWidget {

WebViewLoadUI createState() => WebViewLoadUI();

}

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

class WebViewLoadUI extends State<WebViewLoad>{


}

class WebViewLoadUI extends State<WebViewLoad>{

}

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.

Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(
        title: Text('WebView in Flutter')),
    body: WebView(
      initialUrl: 'https://google.com',
      javascriptMode: JavascriptMode.unrestricted,

    )
  );
  }

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('WebView in Flutter')),

body: WebView(

initialUrl: 'https://google.com',

javascriptMode: JavascriptMode.unrestricted,

)

);

}

10. Complete source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
        body: WebViewLoad()
       )
      );
  }
}

class WebViewLoad extends StatefulWidget {

  WebViewLoadUI createState() => WebViewLoadUI();

}

class WebViewLoadUI extends State<WebViewLoad>{

  @override
  Widget build(BuildContext context) {
  return Scaffold(
     appBar: AppBar(
        title: Text('WebView in Flutter')),
    body: WebView(
      initialUrl: 'https://google.com',
      javascriptMode: JavascriptMode.unrestricted,

    )
  );
  }
}

import 'package:flutter/material.dart';

import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: WebViewLoad()

)

);

}

class WebViewLoad extends StatefulWidget {

WebViewLoadUI createState() => WebViewLoadUI();

}

class WebViewLoadUI extends State<WebViewLoad>{

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('WebView in Flutter')),

body: WebView(

initialUrl: 'https://google.com',

javascriptMode: JavascriptMode.unrestricted,

)

);

}

Screenshot:

Also Read:

Set OnClick onPress event on Raised Button in Flutter Android iOS

Set Change Image Border Color in Flutter Android iOS Example

Enable Show Scrollbar Indicator in ScrollView in Flutter Android iOS

Example of Shared Preferences in Flutter to Save Data Locally

Flutter Add Image Icon Inside TextField Text Input Android iOS Example

Flutter Open Web URL in App using WebView Example Tutorial

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

Also Read:

2 Comments

Leave a Reply Cancel reply

Search Here