step 11 : get location now using javascript in flutter

2024-08-27 17:58:59 +07:00
parent 7bd8527df2
commit 102760babc
7 changed files with 229 additions and 12 deletions
--- a/lib/test_flutter_web_map.dart
+++ b/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',
+        ),
+      ),
+    );
+  }
+}