Cómo obtener la ubicación de un usuario con el complemento Geolocator en Flutter

Introducción

La geolocalización es el proceso de identificar la ubicación física actual de un usuario cuando interactúa con su aplicación.

Hay un geolocatorpaquete y un geocodingpaquete para Flutter que se pueden usar para la geolocalización.

En este artículo, creará una aplicación Flutter de ejemplo que utiliza los paquetes geolocatory geocodingpara determinar la ubicación de un usuario.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial se verificó con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1. El código de este tutorial se actualizó para admitir geolocator6+ y geocoding1+.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_geolocator_example

Navegue hasta el nuevo directorio del proyecto:

cd flutter_geolocator_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Ábrelo pubspec.yamlen tu editor de código y agrega los siguientes complementos:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  geocoding: ^1.0.5  geolocator: ^6.1.1

Nota: Deberás asegurarte de que tu proyecto Android use AndroidX para esto. Si has creado una aplicación Flutter después de la versión 1.7, esto viene de manera predeterminada. De lo contrario, sigue esta guía: Migración a AndroidX .

Luego tendrás que agregar permisos tanto para Android como para iOS editando ios/Runner/Info.plisty android/app/src/main/AndroidManifest.xml.

Permisos de iOS

Ábrelo Info.plisten tu editor de código y agrega NSLocationWhenInUseUsageDescription, NSLocationAlwaysUsageDescription, y NSLocationAlwaysAndWhenInUseUsageDescription:

A partir de iOS y Info.plist, agregue los siguientes pares clave/valor y personalícelos a su gusto:

ios/Runner/Info.plist

keyNSLocationWhenInUseUsageDescription/keystringThis app needs access to location when open./stringkeyNSLocationAlwaysUsageDescription/keystringThis app needs access to location when in the background./stringkeyNSLocationAlwaysAndWhenInUseUsageDescription/keystringThis app needs access to location when open and in the background./string

Si no desea brindar soporte a aplicaciones iOS anteriores a iOS 10 y no desea obtener la ubicación del usuario cuando la aplicación no está en uso, puede omitir la adición de NSLocationAlwaysUsageDescriptiony NSLocationAlwaysAndWhenInUseUsageDescription.

Permisos de Android

Ábralo AndroidManifest.xmlen su editor de código y agregue uno de los siguientes.

ACCESS_FINE_LOCATION:

android/aplicación/src/main/AndroidManifest.xml

uses-permission android_name="android.permission.ACCESS_FINE_LOCATION" /

O ACCESS_COARSE_LOCATION:

android/aplicación/src/main/AndroidManifest.xml

uses-permission android_name="android.permission.ACCESS_COARSE_LOCATION" /

ACCESS_FINE_LOCATIONes el más preciso, ya que ACCESS_COARSE_LOCATIONda resultados equivalentes a aproximadamente una manzana de la ciudad.

Una vez completada esta configuración, puedes crear el widget que activará y mostrará la ubicación actual del usuario.

Paso 2: Andamiaje del proyecto

A continuación, deberá actualizar el archivo y crear un archivo main.dartnuevo .home_page.dart

Ábralo main.darten su editor de código e importe home_page.darty cambie el homede MyHomePagea HomePage:

lib/main.dart

import 'package:flutter/material.dart';import 'home_page.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter Demo',      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: HomePage(),    );  }}

Luego, crea un nuevo home_page.dartarchivo y agrega el siguiente código:

lib/página_de_inicio.dart

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {  @override  _HomePageState createState() = _HomePageState();}class _HomePageState extends StateHomePage {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Location"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: Widget[            FlatButton(              child: Text("Get location"),              onPressed: () {                // Get location here              },            ),          ],        ),      ),    );  }}

Esto creará un botón con el mensaje "Get location".

Paso 3: obtención de la latitud y la longitud

El siguiente paso es agregar la funcionalidad de geolocalización.

Puede lograrlo creando una instancia de Geolocatory llamando a getCurrentPosition. Esto debería preguntar al usuario si está interesado en usar la función Ubicación y, de ser así, obtener la ubicación actual como un Position.

Revisar home_page.darty agregar _getCurrentLocation():

lib/página_de_inicio.dart

import 'package:flutter/material.dart';import 'package:geolocator/geolocator.dart';class HomePage extends StatefulWidget {  @override  _HomePageState createState() = _HomePageState();}class _HomePageState extends StateHomePage {  Position _currentPosition;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Location"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: Widget[            if (_currentPosition != null) Text(              "LAT: ${_currentPosition.latitude}, LNG: ${_currentPosition.longitude}"            ),            FlatButton(              child: Text("Get location"),              onPressed: () {                _getCurrentLocation();              },            ),          ],        ),      ),    );  }  _getCurrentLocation() {    Geolocator      .getCurrentPosition(desiredAccuracy: LocationAccuracy.best, forceAndroidLocationManager: true)      .then((Position position) {        setState(() {          _currentPosition = position;        });      }).catchError((e) {        print(e);      });  }}

Compila tu código y ejecútalo en un emulador:

Cuando interactúes con el botón Obtener ubicación , es posible que veas un mensaje solicitando acceso a tu aplicación. Una vez que permitas el acceso a tu ubicación, aparecerá en la pantalla el latitudenombre de tu ubicación actual.longitude

Paso 4: Convertir la latitud y la longitud en una dirección legible para humanos

El siguiente paso es convertir las coordenadas para mostrar una dirección.

Al pasar latitudey longitudecoordinar a placemarkFromCoordinatesse devolverá un Placemark. Placemarkque contiene información como locality, postalCode, y country.

Revisar home_page.darty agregar _getAddressFromLatLng_():

lib/página_de_inicio.dart

import 'package:flutter/material.dart';import 'package:geocoding/geocoding.dart';import 'package:geolocator/geolocator.dart';class HomePage extends StatefulWidget {  @override  _HomePageState createState() = _HomePageState();}class _HomePageState extends StateHomePage {  Position _currentPosition;  String _currentAddress;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Location"),      ),      body: Center(        child: Column(          mainAxisAlignment: MainAxisAlignment.center,          children: Widget[            if (_currentAddress != null) Text(              _currentAddress            ),            FlatButton(              child: Text("Get location"),              onPressed: () {                _getCurrentLocation();              },            ),          ],        ),      ),    );  }  _getCurrentLocation() {    Geolocator      .getCurrentPosition(desiredAccuracy: LocationAccuracy.best, forceAndroidLocationManager: true)      .then((Position position) {        setState(() {          _currentPosition = position;          _getAddressFromLatLng();        });      }).catchError((e) {        print(e);      });  }  _getAddressFromLatLng() async {    try {      ListPlacemark placemarks = await placemarkFromCoordinates(        _currentPosition.latitude,        _currentPosition.longitude      );      Placemark place = placemarks[0];      setState(() {        _currentAddress = "${place.locality}, ${place.postalCode}, ${place.country}";      });    } catch (e) {      print(e);    }  }}

Compila tu código y ejecútalo en un emulador:

Cuando interactúes con el botón Obtener ubicación , es posible que veas inicialmente un mensaje solicitando acceso a tu aplicación. Una vez que permitas el acceso a tu ubicación, se mostrarán en la pantalla tus locality, postalCode, y .county

Conclusión

En este tutorial, utilizó paquetes geolocatory geocodingen una aplicación Flutter.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.