Quickstart

This page guides you through a simple, fast setup of FMTC that just enables basic browse caching, without any of the bells and whistles that you can discover throughout the rest of this documentation.

Depend on the latest version of the package from pub.dev, then import it into the appropriate files of your project.

Console/Terminal
flutter pub add flutter_map_tile_caching
import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart';

Perform the startup procedure to allow usage of FMTC's APIs and connect to the underlying systems.

main.dart
import 'package:flutter/widgets.dart';
import 'package:flutter_map_tile_caching/flutter_map_tile_caching.dart';

Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();   
    await FlutterMapTileCaching.initialise();
    // ...
    // runApp(MyApp());
}

Create an isolated space to store tiles and other information to be accessed by the map and other methods.

main.dart
Future<void> main() async {
    WidgetsFlutterBinding.ensureInitialized();   
    await FlutterMapTileCaching.initialise();
    await FMTC.instance('mapStore').manage.createAsync();
    // ...
    // runApp(MyApp());
}

Enable your FlutterMap widget to use the caching and underlying systems of FMTC.

import 'package:flutter_map/flutter_map.dart';

TileLayer(
    urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
    userAgentPackageName: 'com.example.app',
    tileProvider: FMTC.instance('mapStore').getTileProvider(),
    // Other parameters as normal
),

Last updated

Was this helpful?