Flutter is de nieuwe draagbare UI-toolkit van Google voor het bouwen van mobiele, web- en desktoptoepassingen vanuit één codebasis. Flutter maakt het gemakkelijk om eenvoudige applicaties te bouwen, maar aangezien het relatief nieuw is als je iets nodig hebt dat verder gaat dan de meest populaire functies, zul je merken dat je je eigen oplossing moet rollen, bijvoorbeeld offline kaarten.

Omdat Google Maps-ondersteuning pas onlangs g beschikbaar is, en geen ondersteuning voor Apple Maps, moeten we een optie van derden vinden. Gelukkig is er een MapBox Flutter-plug-in die voor ons werkt https://github.com/tobrun/flutter-mapbox-gl. MapBox is een kaart-SDK met volledige functionaliteit met een uitgebreide set functies en tools, inclusief ondersteuning voor offline kaarten.

Maak een nieuwe Flutter-applicatie

Installeer Flutter door de instructies te volgen en maak een applicatie om te controleren of uw ontwikkelomgeving en werkruimte correct zijn ingesteld voordat u doorgaat.

Registreer voor een MapBox API-token

Vervolgens moeten we ons registreren voor een MapBox API-token. Wanneer u zich aanmeldt, krijgt u een standaardtoken dat voor onze doeleinden werkt. Het API-token is hoe MapBox uw gebruik bijhoudt en u factureert , vergeet niet om de API-tokeninstellingen te bekijken voordat u uw toepassing start.

Voeg MapBox toe aan je Flutter-applicatie

Voeg mapbox_gl toe aan uw pubspec.yaml -bestand onder de afhankelijkhedensectie. Om de laatste code te krijgen, gebruiken we de source in plaats van het dart-pakket.

Werk vervolgens uw pubspec.yaml bij om te verwijzen naar de map waarin het project is gekloond.

Installeer het mapbox_gl pakket en voer het pakket uit

Android-wijzigingen

Voeg uw API-token toe aan het AndroidManifest

iOS-wijzigingen

Maak geen commentaar op de platformregel om iOS 9 te targeten, vereist door de mapbox_gl plug-in en voeg de regel use frameworks! toe.

De code

Testrun

We zouden nu onze applicatie moeten kunnen draaien en onze kaart moeten kunnen zien.

Kaartgegevens downloaden tijdens het bouwen.

Om offline kaarten te ondersteunen, moeten we de vereiste kaarttegels tijdens het bouwen downloaden en opnemen in onze app. Mapbox heeft instructies om dit hier te doen – maar de tl; dr-versie staat hieronder.

Bouw MapBox-tools

De kaarttegels downloaden

Om alle vereiste kaarttegels te downloaden, heeft u het begrenzingsvak nodig van de lengte- / breedtegraad die u wilt bestrijken, evenals de ondersteunde zoomniveaus.

Het stijlargument kan worden gebruikt om een aangepaste stijl te specificeren die je hebt gemaakt met de Mapbox-ontwerper, maar we zullen hier de standaardstijl gebruiken.

Met deze opdracht worden alle tegels gedownload die nodig zijn om de kaart weer te geven tussen de coördinaten noord / zuid / oost / west die zijn opgegeven op de zoomniveaus 12–18.

Als de gebruiker buiten die coördinaten of het zoomniveau scrolt, zal de MapBox API proberen de tegels tijdens runtime te downloaden. Het is dus belangrijk om de mogelijkheid van gebruikers om te scrollen en te zoomen te beperken als u echt offline kaarten wilt.

De tegels toevoegen

Met de gedownloade kaarttegels voegen we ze toe aan onze activadirectory. De db-bestanden moeten de naam cache.db hebben.

Werk uw pubspec.yaml bij om het bestand cache.db in uw app op te nemen

Kopieer tegels op hun plaats

Om ervoor te zorgen dat de kaartweergave de cache.db gebruikt, moeten we naar de verwachte locatie kopiëren. Om te voorkomen dat de kaartweergave volledig toegang krijgt tot het netwerk, moeten we ervoor zorgen dat de cache.db is gekopieerd naar de verwachte locatie voordat de kaartweergave ooit wordt geladen . Dit betekent meestal dat we de cache.db op zijn plaats kopiëren tijdens een ‘laad’-scherm.