首頁 > 軟體

使用Flutter定位包獲取地理位置

2021-11-29 13:01:06

Flutter 中獲取地理位置

如今,發現使用者位置是移動應用程式非常常見且功能強大的用例。如果您曾經嘗試過在 Android 中實現位置,您就會知道樣例程式碼會變得多麼複雜和混亂。

但這與 Flutter 不同——它有很多令人驚歎的包,可以為您抽象出樣板程式碼,並使實現地理定位成為夢想。另一個好的方面是您可以在 Android 和 iOS 上獲得這些功能。

讓我們快速瀏覽一下我們今天正在構建的用於收集位置資料的內容:

本文將帶您瞭解兩個最流行且易於使用的 Flutter 地理定位包。

讓我們從location開始,這是Flutter 最喜歡的包。這很簡單。只需三個簡單的步驟,您就可以獲取當前使用者位置以及處理位置許可權。

先決條件

在繼續前進之前,讓我們快速檢查一下我們需要的東西:

  • FlutterSDK
  • 編輯器:您可以使用 Visual Code 或 Android Studio
  • 至少對 Flutter 有初級的瞭解

差不多就是這樣!

使用 Flutter 定位包

設定

將依賴項新增到您的檔案中:pubspec.yaml

    location: ^4.3.0

由於 Android 和 iOS 處理許可權的方式不同,因此我們必須在每個平臺上分別新增它們。

安卓版

將以下位置許可權新增到:AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

如果您還想在後臺存取使用者的位置,請在存取後臺位置之前使用該API,並在清單檔案中新增後臺許可權:enableBackgroundMode({bool enable})

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>

對於 iOS

將以下位置許可權新增到:Info.plist

<key>NSLocationWhenInUseUsageDescription</key> 
<string>此應用需要存取您的位置</string>

NSLocationWhenInUseUsageDescription是您需要的唯一許可。這也允許您存取後臺位置,唯一需要注意的是,當應用程式在後臺存取位置時,狀態列中會顯示藍色徽章。與 Android 不同,我們在其中新增了單獨的許可權以在後臺存取使用者的位置。

位置許可權

我們需要在請求使用者位置之前檢查位置服務狀態和許可權狀態,這可以使用以下幾行程式碼輕鬆完成:

Location location = new Location();

bool _serviceEnabled;
PermissionStatus _permissionGranted;

_serviceEnabled = await location.serviceEnabled();
if (!_serviceEnabled) {
 _serviceEnabled = await location.requestService();
 if (!_serviceEnabled) {
   return null;
 }
}

_permissionGranted = await location.hasPermission();
if (_permissionGranted == PermissionStatus.denied) {
 _permissionGranted = await location.requestPermission();
 if (_permissionGranted != PermissionStatus.granted) {
   return null;
 }
}

首先,我們建立一個由Location()包提供的物件,location反過來為我們提供了兩個有用的方法。檢查裝置位置是否已啟用或使用者是否已手動禁用它。``serviceEnabled()

對於後者,我們顯示了一個原生提示,允許使用者通過呼叫快速啟用位置,然後我們再檢查一次,如果他們從提示中啟用了它。requestService()

一旦我們確定啟用了位置服務,下一步就是通過呼叫它來檢查我們的應用程式是否具有使用它的必要許可權,這將返回.hasPermission()``PermissionStatus

PermissionStatus是可以具有以下三個值之一的列舉:

  • PermissionStatus.granted: 定位服務許可權已被授予
  • PermissionStatus.denied: 定位服務許可權被拒絕
  • PermissionStatus.deniedForever: 位置服務許可權被使用者永久拒絕。這僅適用於 iOS。在這種情況下不會顯示對話方塊requestPermission()

如果狀態為 ,我們可以通過呼叫顯示請求位置許可權的系統提示。對於 status,我們可以立即存取 location,因此我們返回一個.denied,``requestPermission()``granted``null

如果您還想在後臺存取使用者位置,請使用。location.enableBackgroundMode(enable: **true**)

獲取當前位置

如果位置服務可用並且使用者已授予位置許可權,那麼我們只需兩行程式碼即可獲取使用者位置 - 不,我不是在開玩笑:

LocationData _locationData;
_locationData = await location.getLocation();

LocationData類提供以下位置資訊:

class LocationData {
  final double latitude; // Latitude, in degrees
  final double longitude; // Longitude, in degrees
  final double accuracy; // Estimated horizontal accuracy of this location, radial, in meters
  final double altitude; // In meters above the WGS 84 reference ellipsoid
  final double speed; // In meters/second
  final double speedAccuracy; // In meters/second, always 0 on iOS
  final double heading; // Heading is the horizontal direction of travel of this device, in degrees
  final double time; // timestamp of the LocationData
  final bool isMock; // Is the location currently mocked
}

您還可以通過新增onLocationChanged偵聽器在使用者位置發生變化時監聽位置更新來獲得連續回撥,這是計程車應用程式、司機/騎手應用程式等的一個很好的用例:

location.onLocationChanged.listen((LocationData currentLocation) {
  // current user location
});

注意,一旦您想停止收聽更新,請不要忘記取消流訂閱。

瞧!現在我們有了使用者位置的當前緯度和經度值。

讓我們利用這些緯度和經度值來獲取使用者的完整地址或反向地理編碼

為此,我們將使用另一個驚人的 Flutter 包:geocode

使用 Flutter 地理編碼包

設定

將依賴項新增到您的檔案中:pubspec.yaml

dependencies:
    geocode: 1.0.1

獲取地址

獲取地址再簡單不過了。就打電話吧。就是這樣!帶有空檢查的完整函數如下所示:reverseGeocoding(latitude: lat, longitude: lang)

Future<String> _getAddress(double? lat, double? lang) async {
 if (lat == null || lang == null) return "";
 GeoCode geoCode = GeoCode();
 Address address =
     await geoCode.reverseGeocoding(latitude: lat, longitude: lang);
 return "${address.streetAddress}, ${address.city}, ${address.countryName}, ${address.postal}";
}

沒那麼簡單!

完整的程式碼如下所示:

class GetUserLocation extends StatefulWidget {
 GetUserLocation({Key? key, required this.title}) : super(key: key);
 final String title;

 @override
 _GetUserLocationState createState() => _GetUserLocationState();
}

class _GetUserLocationState extends State<GetUserLocation> {
 LocationData? currentLocation;
 String address = "";

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: Center(
       child: Padding(
         padding: EdgeInsets.all(16.0),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             if (currentLocation != null)
               Text(
                   "Location: ${currentLocation?.latitude}, ${currentLocation?.longitude}"),
             if (currentLocation != null) Text("Address: $address"),
             MaterialButton(
               onPressed: () {
                 _getLocation().then((value) {
                   LocationData? location = value;
                   _getAddress(location?.latitude, location?.longitude)
                       .then((value) {
                     setState(() {
                       currentLocation = location;
                       address = value;
                     });
                   });
                 });
               },
               color: Colors.purple,
               child: Text(
                 "Get Location",
                 style: TextStyle(color: Colors.white),
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }

 Future<LocationData?> _getLocation() async {
   Location location = new Location();
   LocationData _locationData;

   bool _serviceEnabled;
   PermissionStatus _permissionGranted;

   _serviceEnabled = await location.serviceEnabled();
   if (!_serviceEnabled) {
     _serviceEnabled = await location.requestService();
     if (!_serviceEnabled) {
       return null;
     }
   }

   _permissionGranted = await location.hasPermission();
   if (_permissionGranted == PermissionStatus.denied) {
     _permissionGranted = await location.requestPermission();
     if (_permissionGranted != PermissionStatus.granted) {
       return null;
     }
   }


   _locationData = await location.getLocation();

   return _locationData;
 }

 Future<String> _getAddress(double? lat, double? lang) async {
   if (lat == null || lang == null) return "";
   GeoCode geoCode = GeoCode();
   Address address =
       await geoCode.reverseGeocoding(latitude: lat, longitude: lang);
   return "${address.streetAddress}, ${address.city}, ${address.countryName}, ${address.postal}";
 }
}

常見的陷阱

儘管這些軟體包讓我們的生活變得更輕鬆,而且我們不必處理在 Android 和 iOS 中本地存取位置的複雜過程,但您可能會面臨很多問題。讓我們來看看它們以及可以幫助您修復這些問題的步驟:

  • 應用記憶體漏失:如果您一直在收聽位置更新,請確保取消流訂閱,一旦您想停止收聽更新
  • 使用者必須接受位置許可權才能始終允許使用後臺位置。位置許可權對話方塊提示中未顯示始終允許的 Android 11 選項。使用者必須從應用程式設定中手動啟用它
  • 使用者可能在 iOS 上永遠拒絕定位,因此不會顯示要求定位許可權的本機提示。確保處理這種邊緣情況requestPermisssions()
  • 使用者可能隨時從應用程式設定中復原位置許可權,因此在存取位置資料之前,請確保在應用程式恢復時檢查它們

結論

由於 Flutter 簡化了存取位置,因此我們作為開發人員可能會立即將其新增到我們的應用程式中。但同時,我們需要確保我們的應用程式真正適合請求使用者位置並利用它為使用者增加一些價值的用例,而不是僅僅將位置資料傳送到伺服器。

隨著即將推出的 Android 和 iOS 作業系統版本中安全性和隱私性的提高,存取位置資料而不向使用者提供價值可能會導致您的應用程式被商店拒絕。有很多很好的用例,您可以使用使用者位置,例如,根據使用者位置為食品/外賣應用程式個性化主螢幕,該應用程式顯示按使用者當前位置的接近程度訂購的餐廳。取件/送貨應用程式是最常見的用例。

您還可以在您實際想要使用的特定螢幕上詢問使用者位置,而不是立即在主螢幕上詢問。這使使用者更清楚,並且他們不太可能拒絕位置許可權。

到此這篇關於使用Flutter定位包獲取地理位置的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com