Flutter开发问题：点击文本时在Dialog中打开WebView

Got it, let's get your About text to open a WebView inside a Dialog—here's exactly how to adjust your code:

Step 1: Refactor the WebView to live inside a Dialog #

Instead of returning a Container with WebviewScaffold, we'll create a method that triggers a dialog using showDialog(), and place the WebView inside that dialog.

Step 2: Update the tap handler to show the dialog #

Replace your current onTap: () { openWebview(); } with a call to our new dialog method.

Full Working Code Example #

I'll use the flutter_webview_plugin you're already using, and add context handling (make sure your widget has access to BuildContext):

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

// Assume this is inside your Stateful/Stateless Widget
Widget webview(BuildContext context) { // Add context parameter here
  return Container(
    child: Padding(
      padding: EdgeInsets.all(30.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          GestureDetector(
            child: Text(
              'About',
              style: TextStyle(fontSize: 16.0, color: const Color(0XFF5867DD)),
            ),
            onTap: () {
              // Trigger the dialog here
              _showAboutWebViewDialog(context);
            },
          ),
        ],
      ),
    ),
  );
}

// New method to show the WebView Dialog
void _showAboutWebViewDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false, // Optional: prevent closing by tapping outside
    builder: (BuildContext context) {
      return Dialog(
        // Adjust inset padding to fit screen nicely
        insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
        child: Container(
          // Set dialog size relative to screen
          height: MediaQuery.of(context).size.height * 0.8,
          width: MediaQuery.of(context).size.width * 0.9,
          child: WebviewScaffold(
            url: "https://www.google.com/", // Fixed: added https:// prefix
            withZoom: true,
            withLocalStorage: true,
            // Add an app bar to let users close the dialog
            appBar: AppBar(
              title: const Text("About"),
              leading: IconButton(
                icon: const Icon(Icons.close),
                onPressed: () {
                  Navigator.of(context).pop(); // Close the dialog
                },
              ),
            ),
          ),
        ),
      );
    },
  );
}

Key Notes: #

• Context Access: Make sure your webview() method has access to BuildContext (pass it in from your widget's build() method).
• URL Fix: I added https:// to your URL—without this, the WebView will fail to load the page.
• Dialog Size: Using MediaQuery ensures the dialog fits well on different screen sizes.
• Close Button: The AppBar with a close icon gives users an intuitive way to dismiss the dialog.

If you're using the official webview_flutter plugin: #

If you switch to Flutter's official WebView package, the core logic stays the same—just replace the WebviewScaffold with the official WebView widget:

import 'package:webview_flutter/webview_flutter.dart';

void _showAboutWebViewDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return Dialog(
        insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40),
        child: Container(
          height: MediaQuery.of(context).size.height * 0.8,
          width: MediaQuery.of(context).size.width * 0.9,
          child: Column(
            children: [
              AppBar(
                title: const Text("About"),
                leading: IconButton(
                  icon: const Icon(Icons.close),
                  onPressed: () => Navigator.pop(context),
                ),
              ),
              Expanded(
                child: WebView(
                  initialUrl: "https://www.google.com/",
                  javascriptMode: JavascriptMode.unrestricted,
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

内容的提问来源于stack exchange，提问作者Vishali