WebView Guide

How to display backfill ads in WebView for Flutter

Overview

Display backfill ads in WebView within your Flutter app by registering the WebView with the Adrop SDK using Adrop.registerWebView.

---

Prerequisites

Add the following packages to your project:

flutter pub add webview_flutter webview_flutter_android webview_flutter_wkwebview

WebView backfill ads require adrop-ads-backfill to be configured on both Android and iOS. See Getting Started for setup instructions.

---

Platform Configuration

Configure the native platforms to enable backfill ads in WebView.

Android

Add the following to android/app/src/main/AndroidManifest.xml:

AndroidManifest.xml

<manifest>
    <application>
        <!-- WebView Backfill Ad Integration -->
        <meta-data
            android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
            android:value="webview"/>
    </application>
</manifest>

iOS

Add the following key to ios/Runner/Info.plist:

Info.plist

<key>GADIntegrationManager</key>
<string>webview</string>

This configuration is required for backfill ads to work properly in WebView. Without it, backfill ads may not display.

---

Register WebView

Create a WebViewController, extract the platform-specific identifier, and register it with Adrop.registerWebView before loading content.

import 'dart:io';
import 'package:adrop_ads_flutter/adrop_ads_flutter.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

class WebViewScreen extends StatefulWidget {
  const WebViewScreen({super.key});

  @override
  State<WebViewScreen> createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State<WebViewScreen> {
  late final WebViewController _controller;
  bool _isReady = false;

  @override
  void initState() {
    super.initState();

    final PlatformWebViewControllerCreationParams params;
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    _controller = WebViewController.fromPlatformCreationParams(params)
      ..setJavaScriptMode(JavaScriptMode.unrestricted);

    _registerAndLoad();
  }

  Future<void> _registerAndLoad() async {
    final int identifier;
    if (Platform.isAndroid) {
      identifier =
          (_controller.platform as AndroidWebViewController).webViewIdentifier;
    } else if (Platform.isIOS) {
      identifier =
          (_controller.platform as WebKitWebViewController).webViewIdentifier;
    } else {
      return;
    }

    await Adrop.registerWebView(identifier);

    setState(() => _isReady = true);
    _controller.loadRequest(Uri.parse('https://your-website.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _isReady
          ? WebViewWidget(controller: _controller)
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

---

Getting the WebView Identifier

The webViewIdentifier is extracted differently per platform:

Platform	Controller	Property
Android	AndroidWebViewController	.webViewIdentifier
iOS	WebKitWebViewController	.webViewIdentifier

if (Platform.isAndroid) {
  identifier =
      (_controller.platform as AndroidWebViewController).webViewIdentifier;
} else if (Platform.isIOS) {
  identifier =
      (_controller.platform as WebKitWebViewController).webViewIdentifier;
}

Call Adrop.registerWebView() before loading any web content. Load the URL only after registration is complete.

---

WebView Settings (For Ad Optimization)

Google states that default WebView settings are not optimized for ads. Verify the following per platform.

Android

When you call Adrop.registerWebView(), the Adrop native SDK automatically enables:

• JavaScript
• DOM Storage
• Third-party cookies
• Media playback without user gesture

Keep setJavaScriptMode(JavaScriptMode.unrestricted) as shown in the registration example above, and do not explicitly disable the settings listed above when customizing WebViewController.

iOS

WKWebView’s iOS defaults are generally suitable, but declare inline media playback via WebKitWebViewControllerCreationParams (already included in the registration example above):

final params = WebKitWebViewControllerCreationParams(
  allowsInlineMediaPlayback: true,
  mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
);

_controller = WebViewController.fromPlatformCreationParams(params)
  ..setJavaScriptMode(JavaScriptMode.unrestricted);

iOS Setting	Value	Reason
allowsInlineMediaPlayback	true	Play HTML videos with playsinline attribute inline
mediaTypesRequiringUserAction	{}	Play HTML videos with autoplay attribute automatically
JavaScript (JavaScriptMode.unrestricted)	Enabled	Required for ad script execution
Third-party cookies (WKWebsiteDataStore)	Keep default	Frequency capping and personalization signals

Backfill ads in WebView requires adrop-ads-backfill module. If the module is not installed, registerWebView() is silently ignored.

---

Handling External URLs

If your app opens non-own-domain URLs in an external browser, you must ensure that ad resource requests (e.g., googleads.g.doubleclick.net) are not blocked.

Ad resources such as iframes and scripts are loaded automatically by the ad SDK — they are not user-initiated navigations. Only redirect main frame navigations to an external browser.

import 'package:url_launcher/url_launcher.dart';

const allowedHost = 'my-domain.com';

_controller = WebViewController.fromPlatformCreationParams(params)
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..setNavigationDelegate(
    NavigationDelegate(
      onNavigationRequest: (NavigationRequest request) {
        final host = Uri.parse(request.url).host;

        // Only redirect main frame navigations to external browser
        // Ad resources (e.g., googleads.g.doubleclick.net) load via iframes/scripts —
        // do not block them
        if (!host.contains(allowedHost) && request.isMainFrame) {
          launchUrl(Uri.parse(request.url), mode: LaunchMode.externalApplication);
          return NavigationDecision.prevent;
        }
        return NavigationDecision.navigate;
      },
    ),
  );

Do not block or redirect all non-own-domain requests. Ad resources like googleads.g.doubleclick.net are loaded automatically during the backfill ad process and must be allowed to load within the WebView.

---

Related Documentation

Banner Ads

Learn how to integrate banner ads

Reference

API reference

Examples

Example repository