From ab9089f8b48cf399cb0da04775982bc18afb83c4 Mon Sep 17 00:00:00 2001 From: sindhu Date: Wed, 28 Aug 2024 15:46:38 +0700 Subject: [PATCH] step 15 : buat custom google map widget --- lib/app/constant.dart | 4 + lib/main.dart | 4 +- lib/widget/custom_google_map_widget.dart | 129 +++++++++++++++++++++++ 3 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 lib/widget/custom_google_map_widget.dart diff --git a/lib/app/constant.dart b/lib/app/constant.dart index 6430858..ef1820c 100644 --- a/lib/app/constant.dart +++ b/lib/app/constant.dart @@ -17,6 +17,10 @@ class Constant { static String baseUrlGoogleMapApis = "https://maps.googleapis.com/maps/api/geocode/json?"; + // position longitude dan latitude awal + static double positionLatitudeAwal = -7.566957; + static double positionLongitudeAwal = 110.8080284; + static double designHeightPhone = 844; static double designWidthPhone = 390; diff --git a/lib/main.dart b/lib/main.dart index 9a4f3c2..d7037ec 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -65,9 +65,9 @@ class MyApp extends StatelessWidget { ), // home: TestMap(), - // initialRoute: loginRoute, + initialRoute: loginRoute, // home: TestMapFlutterWeb(), - home:TestMapX(), + // home:TestMapX(), // initialRoute: testFlutterMapRoute, onGenerateRoute: AppRoute.generateRoute, ); diff --git a/lib/widget/custom_google_map_widget.dart b/lib/widget/custom_google_map_widget.dart new file mode 100644 index 0000000..178cbab --- /dev/null +++ b/lib/widget/custom_google_map_widget.dart @@ -0,0 +1,129 @@ +import 'package:flutter/material.dart'; +import 'package:google_maps_flutter/google_maps_flutter.dart'; +import 'package:geolocator/geolocator.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; + +import '../app/constant.dart'; + +class CustomGoogleMapWidget extends HookConsumerWidget { + const CustomGoogleMapWidget({ + super.key, + required this.positionLastLatitudeParam, + required this.positionLastLongitudeParam, + }); + + final ValueNotifier positionLastLatitudeParam; + final ValueNotifier positionLastLongitudeParam; + @override + Widget build(BuildContext context, WidgetRef ref) { + final mapController = useState(null); + final currentPosition = useState(null); + final isLocationSet = useState(false); + final customIcon = + useState(BitmapDescriptor.defaultMarker); + + final center = LatLng( + Constant.positionLatitudeAwal, + Constant.positionLongitudeAwal, + ); + + useEffect(() { + Future loadCustomMarker() async { + final icon = await BitmapDescriptor.asset( + const ImageConfiguration(size: Size(100, 100)), + 'images/custom_marker1.png', + ); + customIcon.value = icon; + } + + loadCustomMarker(); + return null; + }, []); + + Future getCurrentLocation() async { + try { + bool serviceEnabled = await Geolocator.isLocationServiceEnabled(); + if (!serviceEnabled) return; + + LocationPermission permission = await Geolocator.checkPermission(); + if (permission == LocationPermission.denied) { + permission = await Geolocator.requestPermission(); + if (permission == LocationPermission.deniedForever || + permission == LocationPermission.denied) { + return; + } + } + + Position position = await Geolocator.getCurrentPosition( + desiredAccuracy: LocationAccuracy.high, + ); + + currentPosition.value = LatLng(position.latitude, position.longitude); + isLocationSet.value = true; + + if (mapController.value != null) { + mapController.value!.animateCamera( + CameraUpdate.newLatLng(currentPosition.value!), + ); + } + } catch (e) { + print('Error: $e'); + } + } + + return Scaffold( + backgroundColor: Constant.textWhite, + appBar: AppBar( + title: Text( + // 'Home Screen', + 'User Location', + overflow: TextOverflow.ellipsis, + style: TextStyle( + color: Constant.textBlack, + ), + ), + backgroundColor: Constant.textWhite, + iconTheme: IconThemeData( + color: Constant.textBlack, + ), + // elevation: 1.0, + elevation: 0.5, + ), + body: Stack( + children: [ + GoogleMap( + onMapCreated: (controller) => mapController.value = controller, + initialCameraPosition: CameraPosition( + target: center, + zoom: 11.0, + ), + markers: isLocationSet.value && currentPosition.value != null + ? { + Marker( + markerId: MarkerId('current_location'), + position: currentPosition.value!, + icon: customIcon.value, + infoWindow: InfoWindow( + title: + 'Posisi : ${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}', + snippet: + '${currentPosition.value!.latitude}, ${currentPosition.value!.longitude}', + ), + ), + } + : {}, + ), + Positioned( + bottom: 20, + left: 20, + child: ElevatedButton( + onPressed: getCurrentLocation, + child: Text('Current Location'), + ), + ), + ], + ), + ); + } +}