Build a Location Finder App with Flutter — A Step by Step Guide

An app that tells us about our location can always help us while travelling. Exploring always leads us to unfamiliar places; this app helps us recognize our current location. Users can easily find out where they are with just a single click.

About Flutter Location Finder App

In this Flutter project, we will learn how to build a Location-Finder App using Flutter. We will use basic Flutter Concepts, a geolocator, and geocoding packages for this app.

Prerequisites for Flutter Location Finding Application

The following Software and Packages are required for this Flutter project :

• Flutter — Make sure that Flutter SDK is installed on your device. Run Flutter Doctor in your terminal to check it.
• Android Studio — It is needed to make the Android Emulator. You can run this project in Android Studio.
• Visual Studio Code — You can also run this project in VS Code. I feel more comfortable with this software. (Not Necessary depends on your choice)
• Geolocator — A Flutter geolocation plugin that provides easy access to platform-specific location services.
• Geocoding — A Flutter geocoding plugin which provides easy geocoding and reverse-geocoding features. We have used reverse geocoding in our project.

Steps to build the Flutter Location Finding App:

1. Focusing on the Main Layout of the App

import 'package:flutter/material.dart';
import 'locator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Location Finder App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(title: 'Flood Location Finder App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _latitude = "Latitude";
  String _longitude = "Longitude";
  String _location = "Location";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: Container(
        color: Colors.lightBlue.shade100,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  var locationData = await getCurrentLocation();
                  setState(() {
                    _latitude = locationData.latitude;
                    _longitude = locationData.longitude;
                    _location = locationData.location;
                  });
                },
                child: const Text("What's My Location"),
              ),
              const SizedBox(height: 40),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                      foregroundColor: Colors.black,
                      backgroundColor: Colors.orange.shade200,
                      elevation: 8,
                    ),
                    child: Text('Latitude: $_latitude'),
                  ),
                  const SizedBox(width: 10),
                  ElevatedButton(
                    onPressed: () {},
                    style: ElevatedButton.styleFrom(
                      foregroundColor: Colors.black,
                      backgroundColor: Colors.orange.shade200,
                      elevation: 8,
                    ),
                    child: Text('Longitude: $_longitude'),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  foregroundColor: Colors.black,
                  backgroundColor: Colors.orange.shade200,
                ),
                child: Text('Location: $_location'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explanation :

• First we have imported material design library which provides us with various widgets and themes and a locator.dart file which we have created.
• The main function is the application’s entry point. runApp initializes the app and sets MyApp as the root widget.
• Now, we define MyApp as a stateless widget, as the state will be constant in this widget. BuildContext is a reference to the location of a Widget within the tree structure of all the Widgets that are built. MaterialApp is the root of the widget tree. It sets the title, theme, and home screen.
• Declare MyHomePage as a stateful widget so that it can change its state over time. __MyHomePageState helps us in maintaining the state of the latitude, longitude, and location.
• We have used Scaffold to build the general layout and AppBar contains the title of the app. The container helps us set the background color.
• With the help of Column, we arranged the children vertically and arranged them in the centre.
• With the help of Elevated Button we configured our buttons. OnPressed() defines the callback function that will be executed when the button is pressed.
• getCurrentLocation() retrieves the device's current geographical location. The data retrieved by getCurrentLocation() are updated with latitude, longitude, and location values.

2. Building Main Logic in Locator

import 'dart:developer';
import 'package:geolocator/geolocator.dart';
import 'geocoding.dart';

class LocationData {
  final String latitude;
  final String longitude;
  final String location;

  LocationData({required this.latitude, required this.longitude, required this.location});
}

Future<LocationData> getCurrentLocation() async {
  LocationPermission permission = await Geolocator.checkPermission();
  if (permission == LocationPermission.denied || permission == LocationPermission.deniedForever) {
    log("Location Denied");
    await Geolocator.requestPermission();
  } else {
    Position currentPosition = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
    String latitude = currentPosition.latitude.toString();
    String longitude = currentPosition.longitude.toString();
    log("Latitude=$latitude");
    log("Longitude=$longitude");

    String location = await getGeocodingData(currentPosition.latitude, currentPosition.longitude);
    log("Location=$location");

    return LocationData(latitude: latitude, longitude: longitude, location: location);
  }
  return LocationData(latitude: "Unknown", longitude: "Unknown", location: "Unknown");
}

Explanation :

• We define the LocationData Class which stores latitude, longitude and location as Strings.
• Now we declare an asynchronous function getCurrentLocation to get the current location of the user. First, we check the permission for Location Services with the help of the Geolocator class.
• If the permission is denied, it waits till permission is granted. If permission is granted, with the help ofGeolocator.getCurrentPosition() Current position is fetched.
• With the help of getGeocodingData() we can retrieve the name of our location.
• At last we make a LocationData object with the fetched latitude, longitude, and location name and return it.

3. Use of Geocoding in the App

import 'package:geocoding/geocoding.dart';

Future<String> getGeocodingData(double latitude, double longitude) async {
  List<Placemark> placemarks = await placemarkFromCoordinates(latitude, longitude);
  Placemark place = placemarks[0];
  return "${place.locality}, ${place.country}";
}

This function takes latitude and longitude coordinates as input and returns a formatted string containing the locality (e.g., city) and country.

Explanation :

• Define an asynchronous function getGeocodingData() that takes two parameters latitude and longitude.
• placemarkFromCoordinates() from the geocoding package is used to get a list of placemark objects for the given latitude and longitude.
• Retrieves the first Placemark object from a list. At last, the function returns locality and country.

Flutter Location Finder App Output :

Summary

We have successfully completed the implementation of our Location-Finder Application Project. In this project, we learned how to use GeoLocator and GeoCoding Packages in Flutter and got a glimpse of asynchronous functions. We also learned how to implement the basics of Flutter in projects like Elevated Button, Scaffold, Container, etc.

I hope you enjoyed the process of making this Flutter Location Finding Application project. Thank You.