From 102760babcdf3f4f9bd6745bc5876d599875f091 Mon Sep 17 00:00:00 2001 From: sindhu Date: Tue, 27 Aug 2024 17:58:59 +0700 Subject: [PATCH] step 11 : get location now using javascript in flutter --- lib/app/route.dart | 13 +++++ lib/main.dart | 5 +- lib/provider/location_provider.dart | 10 ++++ lib/test_flutter_web_map.dart | 72 +++++++++++++++++++++++++ pubspec.lock | 56 +++++++++++++++++++ pubspec.yaml | 2 + web/index.html | 83 +++++++++++++++++++++++++---- 7 files changed, 229 insertions(+), 12 deletions(-) create mode 100644 lib/provider/location_provider.dart create mode 100644 lib/test_flutter_web_map.dart diff --git a/lib/app/route.dart b/lib/app/route.dart index 4b49499..fc00dcb 100644 --- a/lib/app/route.dart +++ b/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 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) { diff --git a/lib/main.dart b/lib/main.dart index 50a7412..08a72b9 100644 --- a/lib/main.dart +++ b/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, ); diff --git a/lib/provider/location_provider.dart b/lib/provider/location_provider.dart new file mode 100644 index 0000000..7ed5e3d --- /dev/null +++ b/lib/provider/location_provider.dart @@ -0,0 +1,10 @@ +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +final locationProvider = StateProvider>((ref) { + return { + 'status': null, + 'message': null, + 'latitude': null, + 'longitude': null, + }; +}); \ No newline at end of file diff --git a/lib/test_flutter_web_map.dart b/lib/test_flutter_web_map.dart new file mode 100644 index 0000000..f343ef0 --- /dev/null +++ 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(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', + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index e859bc0..8e2a9c2 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -424,6 +424,54 @@ packages: url: "https://pub.dev" source: hosted version: "0.2.2" + google_maps: + dependency: transitive + description: + name: google_maps + sha256: "463b38e5a92a05cde41220a11fd5eef3847031fef3e8cf295ac76ec453246907" + url: "https://pub.dev" + source: hosted + version: "8.0.0" + google_maps_flutter: + dependency: "direct main" + description: + name: google_maps_flutter + sha256: "2e302fa3aaf4e2a297f0342d83ebc5e8e9f826e9a716aef473fe7f404ec630a7" + url: "https://pub.dev" + source: hosted + version: "2.9.0" + google_maps_flutter_android: + dependency: transitive + description: + name: google_maps_flutter_android + sha256: "60a005bf1ba8d178144e442f6e2d734b0ffc2cc800a05415388472f934ad6d6a" + url: "https://pub.dev" + source: hosted + version: "2.14.4" + google_maps_flutter_ios: + dependency: transitive + description: + name: google_maps_flutter_ios + sha256: "3a484846fc56f15e47e3de1f5ea80a7ff2b31721d2faa88f390f3b3cf580c953" + url: "https://pub.dev" + source: hosted + version: "2.13.0" + google_maps_flutter_platform_interface: + dependency: transitive + description: + name: google_maps_flutter_platform_interface + sha256: "4f6930fd668bf5d40feb2695d5695dbc0c35e5542b557a34ad35be491686d2ba" + url: "https://pub.dev" + source: hosted + version: "2.9.0" + google_maps_flutter_web: + dependency: "direct main" + description: + name: google_maps_flutter_web + sha256: ff39211bd25d7fad125d19f757eba85bd154460907cd4d135e07e3d0f98a4130 + url: "https://pub.dev" + source: hosted + version: "0.5.10" google_sign_in: dependency: "direct main" description: @@ -1016,6 +1064,14 @@ packages: url: "https://pub.dev" source: hosted version: "0.27.7" + sanitize_html: + dependency: transitive + description: + name: sanitize_html + sha256: "12669c4a913688a26555323fb9cec373d8f9fbe091f2d01c40c723b33caa8989" + url: "https://pub.dev" + source: hosted + version: "2.1.0" shared_preferences: dependency: "direct main" description: diff --git a/pubspec.yaml b/pubspec.yaml index 05ca396..dcf104e 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -75,6 +75,8 @@ dependencies: camera: ^0.11.0+2 flutter_image_compress: ^1.1.0 path: ^1.8.3 + google_maps_flutter: ^2.2.6 + google_maps_flutter_web: ^0.5.10 dev_dependencies: flutter_test: diff --git a/web/index.html b/web/index.html index dbda62b..694e211 100644 --- a/web/index.html +++ b/web/index.html @@ -1,5 +1,6 @@ + - + - + absensi_sas_flutter + + - - + + - + + \ No newline at end of file