Get Live Location in Flutter: A Step-by-Step Guide with Code Examples

NACHIKETA PANDEYTuesday, January 31, 2023

In this blog, we will learn how to fetch the current location of a user in a Flutter application. With the rise of location-based services and navigation apps, it’s essential for an app to access the device’s location. In this guide, we will cover the process of requesting permission to access the location, fetching the current location, and displaying it on a map.

Step 1: Adding the Required Packages

We will be using the geolocator and permission_handler packages to fetch and manage the device’s location in our Flutter app.

Add the geolocator package to your project

In the pubspec.yaml file, add the following line under the dependencies section:

dependencies:

permission_handler: ^5.2.2

Step 2:

Import the geolocator package in your Dart file:

import ‘package:geolocator/geolocator.dart’;

Step 3: Requesting Location Permission

Before we can access the device’s location, we need to request permission from the user. We will use the permission_handler package to request the location permission.

In the pubspec.yaml file, add the following line under the dependencies section:

dependencies:

permission_handler: ^5.2.2

Step 4:

Import the permission_handler package in your Dart file:

import ‘package:permission_handler/permission_handler.dart’;

Step 5:

add the following code to request the location permission:

Future<void> requestPermission() async {
  final status =
  await Permission.location.status;
  if (status.isUndetermined) {
    final result =
    await Permission.location.request();
    if (result
        != PermissionStatus.granted)
    {
      throw Exception("Location permission not granted");
    }
  } else if (status.isDenied)
  {
    throw
    Exception("Location permission is denied");
  }
 }

Step 6: Fetching the Current Location

We will use the getCurrentPosition method of the geolocator package to fetch the current location. We will also cover how to handle errors that might occur while fetching the location.

Position _currentPosition;

 void getCurrentLocation() async {
  _currentPosition = await Geolocator()
      .getCurrentPosition(desiredAccuracy
      : LocationAccuracy.high);
 }

Step 7: Use the current location

You can access the current location using the _currentPosition variable.

For example, you can print the latitude and longitude:

print("Latitude: ${_currentPosition.latitude}");
 print("Longitude: ${_currentPosition.longitude}");

Step 8:

Call the getCurrentLocation method and requestPermission method:

call the getCurrentLocation and requestPermission methods whenever you need to fetch the current location.

For example, you can call them in the initState method of a StatefulWidget:

@override
 void initState() {
  super.initState();
  requestPermission().then((value) => getCurrentLocation());
 }

Step 9: Showing on Google Map

Here’s complete example code snippet:

import 'package:flutter/material.dart';
 import 'package:geolocator/geolocator.dart';
 import 'package:google_maps_flutter/google_maps_flutter.dart';

 class LiveLocationMap extends StatefulWidget {
  @override
  _LiveLocationMapState createState() =>
       _LiveLocationMapState();
 }
 class _LiveLocationMapState 
    extends State<LiveLocationMap> {
  GoogleMapController mapController;
  Position position;
  @override
  void initState() {
    super.initState();
    _getCurrentLocation();
  }
  void _getCurrentLocation() async {
    Position res = await Geolocator()
        .getCurrentPosition(
        desiredAccuracy:
        LocationAccuracy.high);
    setState(() {
      position = res;
    });
  }
  void _onMapCreated(
      GoogleMapController controller)
  {
    setState(() {
      mapController =controller;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: 
        CameraPosition(
          target: LatLng(position?.latitude 
              ?? 0.0, position?.longitude 
              ?? 0.0),
          zoom: 15.0,
        ),
        markers: position != null
            ? {
          Marker(
            markerId: MarkerId
              ("current_location"),
            position: LatLng(position.latitude,
                position.longitude),
          ),
        }
            : {},
      ),
    );
  }
 }

Conclusion:

In this blog, we learned how to fetch the current location of a user in a Flutter app and display it on a map. By following this step-by-step guide, you should be able to add location-based features to your Flutter app and provide a better user experience.

App developmentFlutterGeolocationGoogle MapsLive LocationLocationLocation ServicesMobile developmentProgrammingTutorial