I am trying to load a custom url return from the backend in the frontend using webview in my app. The problem is webview does not load the url, but when I open the url in a web browswer, it loads

below is the code for the webview

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

  @override
  State<MainPaymentScreen> createState() => _MainPaymentScreenState();
}

class _MainPaymentScreenState extends State<MainPaymentScreen> {
  String? _url;
  late WebViewController _webViewController;
  late AuthorizationUrl provider;
  bool _hasError = false;

  @override
  void initState() {
    super.initState();
    _webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onWebResourceError: (error) {
            setState(() {
              _hasError = true;
            });
            Center(child: Text('An error occurred'),);
          },
          onPageFinished: (url) {
            setState(() {
              _hasError = false;
            });
          },
          onNavigationRequest: (request) {
            if (request.url.startsWith('http://www.youtube.com')) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      );
  }

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

    // Access the provider and update the URL
    provider = Provider.of<AuthorizationUrl>(context);
    final newUrl = provider.authorization_url;

    // Load the URL only if it has changed
    if (_url != newUrl && newUrl.isNotEmpty) {
      _url = newUrl;
      print(newUrl);
      _webViewController.loadRequest(Uri.parse(_url!));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: _url == null
            ? Center(child: CircularProgressIndicator())
            : _hasError
                ? Center(child: Text('An error occurred'))
                : WebViewWidget(controller: _webViewController),
      ),
    );
  }
}

code for retrieving the url and storing the url from the backend

class PaymentService {
  static Future<void> sendPayment(
    BuildContext context, {
    required String amount,
    required String email,
    required String currency,
  }) async {
    http.Response? response;
    try {
      final paymentEndpoint = 'http://10.0.2.2:3000/api/v1/receive-payment';
      response = await http.post(Uri.parse(paymentEndpoint),
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ${EnvironConfig.secretKey}',
          },
          body: jsonEncode({
            "amount": amount,
            "email": email,
            "currency": currency,
          }));

      if (response.statusCode == 200) {
        final responseData = jsonDecode(response.body);

        final authUrl = responseData['authorization_url'];
        final reference = responseData['reference'];

        if (authUrl != null && reference != null) {
          Provider.of<AuthorizationUrl>(context, listen: false).authUrl(authUrl);
          // Provider.of<AuthorizationUrl>(context, listen: false).setReference(reference);

          // verifyPayment(reference: reference);

          

          print("Authorization URL: $authUrl");
          print("Reference: $reference");
        } else {
          print("Authorization URL or Reference is null.");
        }
      } else {
        print("Failed to send payment. Status code: ${response.statusCode}");
        print("Response body: ${response.body}");
      }
    } catch (e) {
      print("Exception occurred: $e");
    }
  }
}

my androidManifest file

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