如何在Flutter WebView中实现Basic Authentication？附Swift参考实现

Hey there! I see you've got the Basic Auth working smoothly in Swift, so let's get that same functionality up and running in your Flutter WebView. The key issue here is that your current WebviewScaffold is just loading a raw URL without attaching the authentication headers—let's fix that using the flutter_webview_plugin's built-in methods to pass headers when loading the page.

Why Your http.get Attempt Isn't Working #

That getURL function you wrote is great for making standalone HTTP requests and fetching data, but it doesn't connect to your WebView. The WebView needs to send the authentication header when it loads the page, so we need to use the plugin's own loading mechanism to attach those headers.

Correct Implementation #

Here's how to modify your code to add Basic Auth to the WebView:

First, update your AddShipment widget to accept username and password (or hardcode them temporarily for testing):

class AddShipment extends StatefulWidget {
  final String url;
  final String username;
  final String password;

  AddShipment(this.url, this.username, this.password);

  @override
  State<StatefulWidget> createState() {
    return _AddShipment();
  }
}

Then, modify the state class to generate the auth header and load the URL with headers:

class _AddShipment extends State<AddShipment> {
  final flutterWebviewPlugin = FlutterWebviewPlugin();

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

    // Generate the Basic Auth header (same logic as your Swift code!)
    final authCredentials = base64Encode(utf8.encode('${widget.username}:${widget.password}'));
    final authHeader = 'Basic $authCredentials';

    // Load the URL with the authentication header attached
    flutterWebviewPlugin.loadUrl(
      widget.url,
      headers: {'Authorization': authHeader},
    );
  }

  @override
  void dispose() {
    flutterWebviewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return WebviewScaffold(
      appBar: AppBar(
        title: const Text("WebView"),
        centerTitle: true,
        backgroundColor: Colors.blue[900],
        elevation: 0.0,
      ),
      // We don't pass the URL here anymore—we're loading it via loadUrl
      initialChild: const Center(child: CircularProgressIndicator()),
      withJavascript: true,
    );
  }
}

Key Notes #

• This mirrors your Swift implementation exactly: we encode the username/password pair to base64, format it as a Basic auth string, and attach it to the request headers when loading the WebView.
• The initialChild gives users a loading indicator while the WebView fetches the authenticated page.
• Make sure to pass the username and password when creating the AddShipment widget, like:

  AddShipment("http://myurl", "user", "pass")
  

This should have your WebView loading the authenticated page just like your Swift version does!

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