I want to recieve geo location using webview of site but in flutter dart app using javascript

JavaScript Code:

var x = document.getElementById("x");

    document.getElementById('button').onclick = function() 
    {
        function showPosition(position) 
        {
            console.log("in showPosition");
            x.innerHTML = "Latitude: " + position.coords.latitude +
                "<br>Longitude: " + position.coords.longitude;
        }
        alert("button was clicked");
        console.log("sdfghj");
        if (navigator.geolocation) 
        {

            navigator.geolocation.getCurrentPosition(showPosition);
            console.log("in if ");



        }else 
        {
            x.innerHTML = "Geolocation is not supported by this browser.";
            console.log("in else ");

        }

    }

But the permission request popup never opens. Flutter Code:

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({Key? key}) : super(key: key);

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}


void main() {
  runApp(
    const MaterialApp(
      home: WebViewStack(),
    ),
  );
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(

          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: 'example.com',
        ),
       
      ],
    );
  }
}

But on web, it's working Fine. What is the correct way to access a user's location from within a WebView?

I am working on a project that needs to get user's current location using HTML 5 geolocation. But I need to know why WebView is not showing my current location. What I've to do to show the map and current location in WebView??