Unlock the Power of Flutter: Building Apps with WebView

What is Flutter WebView?

The webview_flutter plugin provides a WebView widget on Android and iOS, allowing us to display web pages on both platforms. This plugin is essential for loading web pages from a URL or a local source.

Getting Started with Flutter WebView

To use Flutter WebView, you’ll need to have the following tools installed on your machine:

• Flutter SDK (select the correct version based on your operating system: Windows, macOS, Linux, or Chrome OS)
• VS Code (with the Flutter extension installed)
• Android Studio (with the Flutter and Dart plugins installed)

Setting Up a Flutter Project

Create a new Flutter project using the flutter CLI tool. Name your project “webviewprj” and run the command to create the project.

flutter create webviewprj

Open the project in VS Code and add the webview_flutter dependency to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.2

Adding the WebView Dependency

Add the webviewflutter dependency to your project by running the command flutter pub get in your terminal. Then, set the minimum SDK version needed for the webviewflutter plugin in your android/app/build.gradle file.

android {
  defaultConfig {
    minSdkVersion 19
  }
}

Using WebView in Your App

To render the WebView widget, import the webview_flutter package and create a new WebView instance. You can then load a webpage by passing the URL to the WebView widget.

import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Page'),
      ),
      body: WebView(
        initialUrl: 'https://www.example.com',
      ),
    );
  }
}

Customizing Your WebView

There are several parameters you can pass to the WebView widget to customize its behavior, such as:

• onWebViewCreated: a function that is invoked once the web view is created
• initialUrl: the URL of the webpage to be loaded and rendered
• javascriptMode: whether JavaScript is enabled in the WebView
• navigationDelegate: a delegate function that decides how to handle navigation actions

Controlling the WebView

Use the WebViewController to control the WebView and perform actions such as going back, going forward, reloading the page, and more.

WebViewController _controller;

WebView(
  onWebViewCreated: (WebViewController controller) {
    _controller = controller;
  },
  initialUrl: 'https://www.example.com',
)

_controller.goBack(); // Go back
_controller.goForward(); // Go forward
_controller.reload(); // Reload the page

Creating Widget Pages

Create two widget pages in your app: HomePage and WebViewPage. The HomePage will hold two buttons that, when clicked, will open the WebViewPage and render a WebView with the specified URL.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => WebViewPage('https://www.example.com')),
                );
              },
              child: Text('Open WebView Page'),
            ),
          ],
        ),
      ),
    );
  }
}

Running the App

Run the app using the command flutter run in your terminal or by clicking on “Run Without Debugging” or “Start Debugging” in VS Code. Make sure you have your emulator running.

flutter run