Learn how to develop a location-based map application using Flutter

Requesting Location Permission: When developing a location-based application, accessing the user’s location information may require permission. Therefore, we can use the Geolocator package to request location permission from the user. In our article, we will create a button to ask the user for location permission and handle permission checks. Once the user grants permission, we will use the Geolocator package to retrieve the user’s current location.

Add this location permission your AndroidManifest.Xml file

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

Displaying the Map with Flutter Map: We will use the flutter_map package to display the map. This package allows integration with various map providers such as OpenStreetMap. With the TileLayerOptions provided by Flutter Map, we can specify the map view and use the MarkerLayerOptions to add location markers.

Updating the Map: Once we have obtained the user’s location, we will update the center of the map using the MapController class provided by Flutter Map. Within the getCurrentLocation function, after retrieving the user’s location, we will use the setState function to update the map center. This will automatically move the map towards the user’s location.

Conclusion: Thanks to Flutter’s rich components and packages, developing location-based map applications is straightforward. In this article, we have seen step-by-step how to develop a location-based map application with Flutter. We covered important aspects such as requesting location permission, retrieving the user’s location, and updating the map. With Flutter’s fast performance and ease of use, developers can create interactive map applications that utilize user location information effectively.

Example Code

main.dart file

import 'package:flutter/material.dart';
import 'package:geo_locator/screens/map_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Demo',
      home: MapPage(),
    );
  }
}

Add Model

class LocationModel {
  final double latitude;
  final double longitude;

  LocationModel({required this.latitude, required this.longitude});
}

Add a MapPage class

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

import '../models/location_model.dart';

class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  late MapController mapController;
  LocationModel? currentLocation;

  @override
  void initState() {
    super.initState();
    mapController = MapController();
  }

  void getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Location Service Disabled'),
          content: Text('Please enable location services.'),
          actions: [
            TextButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('OK'),
            ),
          ],
        ),
      );
      return;
    }

    LocationPermission permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission != LocationPermission.whileInUse && permission != LocationPermission.always) {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Location Permission Denied'),
            content: Text('Please grant location permission.'),
            actions: [
              TextButton(
                onPressed: () => Navigator.of(context).pop(),
                child: Text('OK'),
              ),
            ],
          ),
        );
        return;
      }
    }

    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    setState(() {
      currentLocation = LocationModel(
        latitude: position.latitude,
        longitude: position.longitude,
      );
      mapController.move(
        LatLng(currentLocation!.latitude, currentLocation!.longitude),
        15.0,
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Map Demo'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FlutterMap(
              mapController: mapController,
              options: MapOptions(
                center: LatLng(
                  currentLocation?.latitude ?? 0.0,
                  currentLocation?.longitude ?? 0.0,
                ),
                zoom: 15.0,
              ),
              children: [
                TileLayer(
                  urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                  subdomains: ['a', 'b', 'c'],
                ),
                MarkerLayer(
                  markers: [
                    if (currentLocation != null)
                      Marker(
                        point: LatLng(
                          currentLocation!.latitude,
                          currentLocation!.longitude,
                        ),
                        builder: (context) => Icon(Icons.location_on),
                      ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: ElevatedButton(
              onPressed: () {
                getCurrentLocation();
              },
              child: Text('Get Location'),
            ),
          ),
        ],
      ),
    );
  }
}

Here important this,get permission.If you get location permission from user,you will show user location.In this above,We add control permisson denied .