Flutter WebViewWidget Example - Latest Package

WebViewWidget is a compact mobile web browser integration package in flutter. WebViewWidget comes with various configuration options to control how a web page can display in flutter application and how we can trigger a particular event while loading web page. You can download and install WebViewWidget page from pub.dev.

Flutter WebViewWidget Example

1. To install WebViewWidget package, Open your flutter project in terminal and execute below command.

flutter pub add webview_flutter

2. Import material.dart and webview_flutter.dart package in your flutter project main.dart file.

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

3. Creating a WebViewController() to manage WebView widget different options. we will pass here our web page URL which we want to load in WebView.

final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(Colors.black)
    ..loadRequest(Uri.parse('https://codewithjam.com'));

4. Creating WebViewWidget and pass the controller.

WebViewWidget(controller: controller)

Screenshot:

Source code for main.dart file:

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

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  final controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setBackgroundColor(Colors.black)
    ..loadRequest(Uri.parse('https://codewithjam.com'));

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: WebViewWidget(controller: controller));
  }
}