Akshay

Posted on May 28

KAlertDialog and KAlertFlutter Now Support WebView Dialogs for Android and Flutter Apps

#android #flutter #opensource #webview

Every production app needs dialogs.

We use dialogs for:

Success messages
Error messages
Warning confirmations
Input fields
Loading states
Custom views
Image previews
Terms and Conditions
Privacy Policy
Help pages
FAQ pages

But showing web content like Terms and Conditions or Privacy Policy usually requires creating a separate WebView screen.

That means:

Extra Activity or screen
Extra layout
Extra routing
Extra loading logic
Extra error handling
Extra user flow management

To make this easier, I added WebView Dialog support to both of my open-source dialog libraries:

KAlertDialog for native Android Java apps
KAlertFlutter for Flutter apps

Now developers can show hosted web pages directly inside beautiful, customizable dialogs.

What is KAlertDialog?

KAlertDialog is a modern, customizable Material-style AlertDialog library for native Android Java apps.

It helps Android developers create beautiful dialogs with clean Java APIs.

GitHub:

https://github.com/TutorialsAndroid/KAlertDialog

Official website:

https://tutorialsandroid.github.io/KAlertDialog

KAlertDialog supports:

Success dialogs
Error dialogs
Warning dialogs
Progress dialogs
Input dialogs
Custom image dialogs
URL image dialogs
Custom view dialogs
WebView dialogs
Modern style presets
Dark mode support
Button customization
Font customization
Input validation
Dynamic alert type changes

What is KAlertFlutter?

KAlertFlutter is the Flutter version of the same dialog experience.

It brings modern, customizable dialogs to Flutter apps with clean Dart APIs.

pub.dev:

https://pub.dev/packages/kalertflutter

GitHub:

https://github.com/TutorialsAndroid/KAlertFlutter

Official website:

https://tutorialsandroid.github.io/KAlertFlutter

KAlertFlutter supports:

Success dialogs
Error dialogs
Warning dialogs
Info dialogs
Question dialogs
Progress dialogs
Input dialogs
Custom image dialogs
URL image dialogs
Custom view dialogs
WebView dialogs
Dark mode friendly UI
Custom styling
Backward compatible APIs

Why WebView Dialog Support?

Many apps need to show legal or support pages during important flows.

For example:

Login Terms and Conditions
Signup Privacy Policy
Refund Policy
Help Center
FAQ page
Documentation page
Hosted HTML content

Opening a full screen for these pages is not always necessary.

Sometimes, a dialog is better because it keeps the user inside the current flow.

Example:

“Please read and accept our Terms and Privacy Policy before continuing.”

With WebView dialogs, the user can read the page and accept it without leaving the current screen.

WebView Dialog in KAlertDialog for Android Java

In native Android Java, you can use WEB_VIEW_TYPE.

new KAlertDialog(this, KAlertDialog.WEB_VIEW_TYPE, true)
        .setTitleText("Terms & Privacy Policy")
        .setContentText("Please read our terms and privacy policy before continuing.")
        .applyStyle(KAlertDialog.STYLE_MODERN)
        .setWebViewUrl("https://policies.google.com/privacy")
        .setWebViewHeight(420)
        .setWebViewJavaScriptEnabled(true)
        .setWebViewDomStorageEnabled(true)
        .setWebViewZoomEnabled(false)
        .setWebViewWideViewPortEnabled(true)
        .setWebViewLoadWithOverviewMode(true)
        .setWebViewAllowMixedContent(false)
        .showWebViewHorizontalProgress(true)
        .showWebViewCenterLoader(true)
        .showCancelButton(true)
        .setCancelClickListener("Cancel", dialog -> dialog.dismissWithAnimation())
        .setConfirmButtonAllCaps(false)
        .setCancelButtonAllCaps(false)
        .setConfirmClickListener("I Agree", dialog -> {
            dialog.dismissWithAnimation();
            Toast.makeText(this, "Accepted", Toast.LENGTH_SHORT).show();
        })
        .show();

This gives you:

WebView inside dialog
Horizontal loading progress
Center loading spinner
Confirm and cancel buttons
Modern style preset
WebView configuration options
Clean user flow

Android Internet Permission

For Android apps, add Internet permission in AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Use HTTPS URLs whenever possible:

.setWebViewUrl("https://example.com/privacy-policy")

WebView Listener in Android

KAlertDialog also supports WebView page lifecycle callbacks.

new KAlertDialog(this, KAlertDialog.WEB_VIEW_TYPE, true)
        .setTitleText("Terms of Use")
        .setWebViewUrl("https://example.com/terms")
        .setWebViewHeight(420)
        .setWebViewPageListener(new KAlertDialog.WebViewPageListener() {
            @Override
            public void onPageStarted(KAlertDialog dialog, String url) {
                // Page started loading
            }

            @Override
            public void onPageFinished(KAlertDialog dialog, String url) {
                // Page finished loading
            }

            @Override
            public void onPageError(KAlertDialog dialog, String url, String error) {
                // Main page failed to load
            }
        })
        .setConfirmClickListener("Close", dialog -> dialog.dismissWithAnimation())
        .show();

This is useful when you want to track loading, handle errors, or perform an action after the page finishes loading.

WebView Dialog in KAlertFlutter

KAlertFlutter now supports WebView dialogs too.

final result = await KAlertDialog.webView(
  context: context,
  title: 'Terms & Privacy Policy',
  content: 'Please read our terms and privacy policy before continuing.',
  url: 'https://policies.google.com/privacy',
  webViewHeight: 420,
  showHorizontalProgress: true,
  showCenterLoader: true,
  javaScriptEnabled: true,
  enableZoom: false,
  showCancelButton: true,
  confirmText: 'I Agree',
  cancelText: 'Cancel',
  onPageStarted: (url) {
    debugPrint('WebView started: $url');
  },
  onPageFinished: (url) {
    debugPrint('WebView finished: $url');
  },
  onProgress: (progress) {
    debugPrint('WebView progress: $progress');
  },
  onPageError: (error) {
    debugPrint('WebView error: ${error.description}');
  },
);

if (result?.confirmed == true) {
  debugPrint('Accepted');
}

This makes it easy to show web pages inside Flutter dialogs without creating a separate screen.

KAlertFlutter WebView Features

The Flutter WebView dialog supports:

Hosted web page loading
Terms and Privacy Policy dialogs
Custom WebView height
Horizontal loading progress
Center loading spinner
JavaScript enable or disable option
Zoom enable or disable option
WebView created callback
Page started callback
Page finished callback
Progress callback
Page error callback
Navigation request callback
Main-frame-only error handling

Flutter WebView Navigation Control

You can also control which URLs are allowed to load.

final result = await KAlertDialog.webView(
  context: context,
  title: 'Privacy Policy',
  content: 'Please read the privacy policy before continuing.',
  url: 'https://example.com/privacy-policy',
  webViewHeight: 420,
  showCancelButton: true,
  confirmText: 'Accept',
  cancelText: 'Cancel',
  onNavigationRequest: (request) {
    if (request.url.startsWith('https://example.com')) {
      return NavigationDecision.navigate;
    }

    return NavigationDecision.prevent;
  },
);

This is useful when you want to keep users inside your own website or prevent unwanted external navigation.

Backward Compatible Flutter API

KAlertFlutter also includes a simple wrapper method:

final accepted = await KAlert.webView(
  context,
  url: 'https://policies.google.com/privacy',
  title: 'Terms & Privacy Policy',
  message: 'Please read the page before continuing.',
);

if (accepted == true) {
  debugPrint('Accepted');
}

This keeps the API simple for developers who prefer the old KAlert style.

Main-Frame Error Handling

One important improvement in both libraries is proper WebView error handling.

Many websites load extra resources such as:

Favicon
Analytics scripts
CSS files
Images
Iframes
Tracking resources

Sometimes one of these small resources fails, but the main page still loads correctly.

A poor WebView implementation may show an error even when the page is already visible.

KAlertDialog and KAlertFlutter handle this by reporting errors only when the main page itself fails to load.

This prevents false error messages and gives users a smoother experience.

Android Installation

For native Android Java projects, add:

dependencies {
    implementation 'io.github.tutorialsandroid:kalertdialog:21.1.0'
    implementation 'io.github.tutorialsandroid:progressx:7.0.5'
}

Links:

KAlertDialog GitHub
https://github.com/TutorialsAndroid/KAlertDialog

KAlertDialog website
https://tutorialsandroid.github.io/KAlertDialog

Flutter Installation

For Flutter projects, add:

dependencies:
  kalertflutter: ^2.1.0

Then run:

flutter pub get

Links:

KAlertFlutter pub.dev
https://pub.dev/packages/kalertflutter

KAlertFlutter GitHub
https://github.com/TutorialsAndroid/KAlertFlutter

KAlertFlutter website
https://tutorialsandroid.github.io/KAlertFlutter

Android and Flutter API Comparison

Android Java:

new KAlertDialog(this, KAlertDialog.WEB_VIEW_TYPE, true)
        .setTitleText("Terms & Privacy Policy")
        .setWebViewUrl("https://example.com/privacy-policy")
        .setConfirmClickListener("I Agree", dialog -> dialog.dismissWithAnimation())
        .show();

Flutter:

final result = await KAlertDialog.webView(
  context: context,
  title: 'Terms & Privacy Policy',
  url: 'https://example.com/privacy-policy',
  confirmText: 'I Agree',
);