Introduction

Offline maps and geolocation are core features in many mobile apps. Flutter offers plugins and tools that enable offline tile rendering and precise location tracking. In this article, you will learn how to integrate offline maps and geolocation into a Flutter project, manage caching, and optimize the UI.

Setup Plugin and Assets

Add the following plugins in your pubspec.yaml to enable offline map rendering and location services:

dependencies:
  flutter_map: ^4.0.0
  latlong2: ^0.8.1
  geolocator: ^9.0.0
  flutter_cache_manager

Declare your MBTiles asset in pubspec.yaml:

flutter:
  assets

Run flutter pub get to install the packages and ensure the offline MBTiles file is bundled with your app.

Loading Offline Maps

Use flutter_map to display tiles from an MBTiles file. Configure a TileLayer with a TileProvider that reads from the asset path:

final mapController = MapController();

FlutterMap(
  mapController: mapController,
  options: MapOptions(center: LatLng(0, 0), zoom: 2),
  nonRotatedChildren: [
    TileLayer(
      tileProvider: AssetTileProvider(),
      additionalOptions: {'file': 'assets/map/offline_tiles.mbtiles'},
    ),
  ],
);

The AssetTileProvider will fetch tiles directly from your MBTiles database without requiring a network connection.

Accessing Device Location

Leverage geolocator to retrieve the current position and listen for location updates. Request permissions and then call:

Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
print('Current location: ${position.latitude}, ${position.longitude}');

Use Geolocator.getPositionStream to track movement and update markers on your map in real time.

Caching Strategies

While MBTiles covers map tiles, you may want to cache other resources or prefetch tiles. Use flutter_cache_manager for custom tile caching:

final cache = DefaultCacheManager();
final file = await cache.getSingleFile(tileUrl);
// tileUrl can point to a remote or local server

Combine this with periodic cleanup to bound storage. For offline route or POI data, consider sqflite or get_storage to store JSON or coordinate sets locally.

UI Integration & Performance

Embed your FlutterMap widget in a Scaffold and overlay controls for zoom and recenter. Keep widget trees shallow and avoid rebuilding heavy layers on setState. Use StreamBuilder to reactively update location markers:

StreamBuilder<Position>(
  stream: Geolocator.getPositionStream(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return Container();
    return MarkerLayer(
      markers: [
        Marker(
          point: LatLng(snapshot.data.latitude, snapshot.data.longitude),
          builder: (_) => Icon(Icons.my_location),
        ),
      ],
    );
  },
)

Leverage const constructors and avoid excessive redraws for smooth panning.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Using Flutter for offline maps and geolocation involves combining flutter_map with an MBTiles provider, geolocator for device position, and caching solutions for performance. By structuring your app with clear plugin setup, tile loading logic, and reactive UI components, you can deliver robust offline mapping features in Flutter. Continuous testing on real devices and careful state management will ensure a seamless user experience.