step 11 : get location now using javascript in flutter

lib/app/route.dart

@@ -3,6 +3,7 @@ import 'package:absensi_sas/screen/approval_detail/approval_detail_screen.dart';
 import 'package:absensi_sas/screen/home/home_screen_v1.dart';
 import 'package:absensi_sas/screen/presensi/presensi_screen.dart';
 import 'package:absensi_sas/screen/presensi/presensi_selfie_screen.dart';
+import 'package:absensi_sas/test_flutter_web_map.dart';
 import 'package:flutter/material.dart';
 import '../screen/home/home_screen.dart';
 import '../test_flutter_map.dart';
@@ -17,9 +18,21 @@ const presensiRoute = "/presensiRoute";
 const presensiSelfieRoute = "/presensiSelfieRoute";
 const approvalRoute = "/approvalRoute";
 const approvalDetailRoute = "/approvalDetailRoute";
+const testFlutterWebMapRoute = "/testFlutterWebMapRoute";
 
 class AppRoute {
   static Route<dynamic> generateRoute(RouteSettings settings) {
+    // flutter web map
+    if (settings.name == testFlutterWebMapRoute) {
+      return MaterialPageRoute(builder: (context) {
+        return MediaQuery(
+          data: MediaQuery.of(context)
+              .copyWith(textScaleFactor: 1.0, padding: EdgeInsets.all(0)),
+          child: TestFlutterWebMap(),
+        );
+      });
+    }
+
     // test flutter map
     if (settings.name == testFlutterMapRoute) {
       return MaterialPageRoute(builder: (context) {

lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:absensi_sas/app/constant.dart';
+import 'package:absensi_sas/test_flutter_web_map.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -62,8 +63,8 @@ class MyApp extends StatelessWidget {
       ),
 
       // home: TestMap(),
-      initialRoute: loginRoute,
-      // initialRoute: presensiSelfieRoute,
+      // initialRoute: loginRoute,
+      home: TestFlutterWebMap(),
       // initialRoute: testFlutterMapRoute,
       onGenerateRoute: AppRoute.generateRoute,
     );

lib/provider/location_provider.dart

@@ -0,0 +1,10 @@
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+final locationProvider = StateProvider<Map<String, dynamic>>((ref) {
+  return {
+    'status': null,
+    'message': null,
+    'latitude': null,
+    'longitude': null,
+  };
+});

lib/test_flutter_web_map.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'dart:js' as js;
+
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+
+import 'provider/location_provider.dart';
+
+class TestFlutterWebMap extends HookConsumerWidget {
+  const TestFlutterWebMap({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final location = ref.watch(locationProvider);
+    final refreshKey = useState<int>(0);
+
+    useEffect(() {
+      void fetchData() {
+        final uri = Uri.base;
+        final queryParams = uri.queryParameters;
+
+        if (queryParams.isNotEmpty) {
+          ref.read(locationProvider.notifier).state = {
+            'status': queryParams['status'],
+            'message': queryParams['message'],
+            'latitude': queryParams['latitude'] != null
+                ? double.tryParse(queryParams['latitude']!)
+                : null,
+            'longitude': queryParams['longitude'] != null
+                ? double.tryParse(queryParams['longitude']!)
+                : null,
+          };
+        }
+
+        js.context.callMethod('getLocationAndSend');
+      }
+
+      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+        fetchData();
+      });
+
+      return () {};
+    }, [refreshKey.value]);
+
+    void _refreshData() {
+      refreshKey.value++; // Trigger useEffect to run again
+    }
+
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter Web Google Maps'),
+        ),
+        body: Column(
+          children: [
+            SizedBox(height: 20), // Add some spacing
+            Text(
+                'Latitude: ${location['latitude']?.toString() ?? 'Loading...'}'),
+            Text(
+                'Longitude: ${location['longitude']?.toString() ?? 'Loading...'}'),
+          ],
+        ),
+        floatingActionButton: FloatingActionButton(
+          onPressed: _refreshData,
+          child: Icon(Icons.refresh),
+          tooltip: 'Refresh Location',
+        ),
+      ),
+    );
+  }
+}