Giter Club home page Giter Club logo

flutter_map_cache's Introduction

flutter_map_cache

A slim yet powerful caching plugin for flutter_map tile layers.

Pub Likes Pub Points Pub Popularity Pub Version

GitHub last commit GitHub issues GitHub Repo stars

Features

The package is using dio with the dio_cache_interceptor package and supports the storage backend that you like.

Supported storage backends are:

Support for Isar and other storage backends will be supported as soon as the underlying package dio_cache_interceptor support them. See for example issue dio_cache_interceptor#122 that tracks the support for isar.

Getting started

  1. Add the packages you want to use to your pubspec.yaml file. Only add the packages for the backend you want to use.
dependencies:
  flutter_map: ^6.0.0 # in case you don't have it yet 
  flutter_map_cache: ^1.3.0 # this package

  dio_cache_interceptor_db_store: ^5.1.0 # drift
  sqlite3_flutter_libs: ^0.5.15 # drift

  dio_cache_interceptor_file_store: ^1.2.2 # file system

  dio_cache_interceptor_hive_store: ^3.2.1 # hive

  dio_cache_interceptor_objectbox_store: ^1.1.1 # objectbox
  objectbox_flutter_libs: ^1.4.1 # objectbox  
  1. The storage backends might have their own required setups. Please check them out in their package documentations.

Usage

Using the cache is easy. Here is an example how to use the Hive backend:

First get the cache directory of the app (i.e. with the path_provider package).

import 'package:path_provider/path_provider.dart';

Future<String> getPath() async {
  final cacheDirectory = await getTemporaryDirectory();
  return cacheDirectory.path;
}

Then use the directory path to initialize the HiveCacheStore. You can wrap FlutterMap inside a FutureBuilder to use the getPath() method.

@override
Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(),
    children: [
      TileLayer(
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        tileProvider: CachedTileProvider(
          // maxStale keeps the tile cached for the given Duration and 
          // tries to revalidate the next time it gets requested
          maxStale: const Duration(days: 30),
          store: HiveCacheStore(
            path,
            hiveBoxName: 'HiveCacheStore',
          ),
        ),
      ),
    ],
  );
}

You can find additional example usages for other storage backends here:

Common use cases & frequent questions

How about web?

This package supports the web as long as you use a storage backend that supports web.

  • In Memory works out of the box
  • Hive uses for its web support IndexedDB under the hood to support web.
  • Drift (SqLite) requires additional setup steps for web

Additionally, this package has support to cancel tile requests that are no longer needed like the flutter_map_cancellable_tile_provider plugin.

Remove the api key from the url before it gets used for caching

Commercial tile providers often use an api key that is attached as a parameter to the url. While this shouldn't be a problem when the api key stays the same you might want to make it immune to api key changes anyway.

final _uuid = Uuid(); 

CachedTileProvider(
  keyBuilder: (request) {
    return _uuid.v5(
      Uuid.NAMESPACE_URL, 
      request.uri.replace(queryParameters: {}).toString(),
    );
  },
  ...
),

Additional information

Pull requests are welcome. If you want to add support for another storage backend you can check out dio_cache_interceptor.

If you need help you can open an issue or join the flutter_map discord server.

flutter_map_cache's People

Contributors

josxha avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.