Einleitung
Diesmal zeigen wir, wie man mit Flutter eine Karten-App erstellt. Flutter ist ein plattformübergreifendes Open-Source UI-Toolkit, das für die App-Entwicklung verwendet werden kann. Es ermöglicht die Entwicklung von Apps mit einer einzigen Codebasis, die auf iOS, Android, Windows, macOS, Web und anderen Plattformen laufen. Als Framework für plattformübergreifende Entwicklung hat es einen hohen Marktanteil und wird von vielen Nutzern verwendet.Aktuell.
Wenn Sie in einer Flutter-App eine Karte anzeigen möchten, gibt es verschiedene Kartenpakete, aus denen Sie je nach Anforderungen wählen können. Dieses Mal verwenden wir das ArcGIS Maps SDK for Flutter (im Folgenden Flutter SDK), um eine Karten-App zu erstellen, die auf Android und iOS läuft. Wir stellen die Schritte als Serienartikel vor.
Flutter Projekt erstellen
Dieser Teil wird ausgelassen, aber richten Sie Ihre Entwicklungsumgebung gemäß dem offiziellen Flutter-Leitfaden ein. Da wir Android- und iOS Apps erstellen, entwickeln wir in folgender Umgebung:Visual Studio Code wird als Editor verwendet.
- ArcGIS Maps SDK for Flutter 300.0
- Flutter 3.44.2
- Dart 3.12.2
- Xcode 26.5
- Android Studio Quail 1 2026.1.1
- Android NDK 28.2.13676358
Bitte prüfen Sie auch die folgenden Artikel entsprechend der verwendeten Flutter-Version.
1. Wenn die Entwicklungsumgebung eingerichtet ist, erstellen Sie ein neues Flutter-Projekt in Visual Studio Code über den Befehl ‚Flutter: New Project‘ im Command Palette. Der App-Name lautet „flutter_map_application“.
cd <Pfad zu flutter_map_application>
dart pub add arcgis_maps
2. Um die Abhängigkeiten zu aktualisieren, verwenden Sie ‚flutter pub upgrade' .
flutter pub upgrade
3. Installieren Sie arcgis_maps_core.
dart run arcgis_maps install
Spezifische Einstellungen für Android/iOS
Als nächstes nehmen wir individuelle Einstellungen für die Ausführung auf Android und iOS . Je nach Zielumgebung konfigurieren Sie beide oder nur eines davon.
Für die Ausführung auf Android:
1. Bearbeiten Sie die Datei /android/app/build.gradle.kts innerhalb von flutter_map_application und aktualisieren Sie die Mindestanforderungen.. Setzen Sie die minimale Android SDK-Version auf .28 .
'android { '
' ...'
' defaultConfig { '
' ... '
' minSdk = 28 '
' ... '
' } '
' ... '
}
2. インターネットにアクセスするために、android/app/src/main/AndroidManifest.xml ファイルに権限を追加します。
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET" />
...
iOSで実行する場合
1. flutter_map_application 内の ios/Podfile ファイルを編集して iOS のバージョンを 17.0 に設定します。行のコメントを解除して、バージョン番号を更新します。
platform :ios, '17.0'
2. Runtimecore および arcgis_maps_ffi ポッドを Runner ターゲット セクションに追加して arcgis_maps_core を構成します。
target 'Runner' do
...
pod 'Runtimecore', :podspec => '../arcgis_maps_core/ios/Runtimecore.podspec'
pod 'arcgis_maps_ffi', :podspec => '../arcgis_maps_core/ios/arcgis_maps_ffi.podspec'
...
end
3. ‘pod update’ を使用してポッドを構成します。
cd ios && pod update && cd ..
地図の追加
Flutter SDK の設定が完了したので、ここからはアプリに地図機能を追加していきます。
1. flutter_map_application 内の lib/main.dart を開き、既に書かれているインポート行の後に、下記のコードを追加して、arcgis_maps パッケージをインポートします。
import 'package:arcgis_maps/arcgis_maps.dart';
2. Flutter SDK を使用して地図を表示するには、API キーを作成する必要があります。「API キーの取得」ガイドに従って作成します。権限の設定では、このブログ記事の手順を実行するだけであれば、[ベースマップ] のみ有効になっていれば大丈夫です。
※ API キーをコピーできるのは作成時だけなのでご注意ください。
3. main() メソッドの最初に作成した API キーを設定します。
void main() {
ArcGISEnvironment.apiKey = '作成した API キーをここに入力';
…
}
4. Widget build() の Column ウィジェット内の children をマップビューに置き換えます。ArcGISMapView ウィジェット（マップビュー ウィジェット）をウィジェット ツリーに追加します。ArcGISMapView ウィジェットは、サイズが制限されているウィジェット内でのみ使用できます。制限のないサイズで使用すると、アプリケーションは例外をスローします。そのため、Column 内で使用するには、ArcGISMapView ウィジェットを Expanded でラップして適切な境界を指定します。
/*
children: [
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
*/
children: [
Expanded(
// ウィジェット ツリーにマップビューを追加し、コントローラーを設定します。
child: ArcGISMapView(
controllerProvider: () => _mapViewController,
onMapViewReady: _onMapViewReady,
),
),
],
5. _MyHomePageState クラスの最初で、ArcGISMapView のコントローラーを作成します。
// マップビューのコントローラーを作成します。
final _mapViewController = ArcGISMapView.createController();
6. 次の行に、マップビューが使用可能になったときに呼び出される onMapViewReady() 関数を作成します。ここでは、ベースマップのスタイル設定や地図の初期表示位置の設定、グラフィックス表示用のレイヤーの追加などを行っています。
void _onMapViewReady() {
// ベースマップのラベルを日本語表記にするためのパラメーターを設定します。
final bsp = BasemapStyleParameters();
bsp.specificLanguage = "ja";
// 道路地図のベースマップ スタイルを使用してマップを作成します。
final basemap = Basemap.withStyle(BasemapStyle.arcGISStreets, parameters: bsp);
final map = ArcGISMap.withBasemap(basemap);
// 緯度経度とスケールを指定してマップの初期表示位置を指定します。
final initialPoint = ArcGISPoint(
x: 139.745461,
y: 35.65856,
spatialReference: SpatialReference.wgs84,
);
map.initialViewpoint = Viewpoint.fromCenter(initialPoint, scale: 10000);
// マップビュー コントローラーに作成したマップを設定します。
_mapViewController.arcGISMap = map;
// 後の作業でマップ上にシンボルを追加するために使用するグラフィックス オーバーレイを作成し、それをマップビュー コントローラーに追加します。
final graphicsOverlay = GraphicsOverlay();
_mapViewController.graphicsOverlays.add(graphicsOverlay);
}
7. ここまでの実装で地図は表示できますが、今回は地図上に簡単なシンボルを追加する機能も実装していきます。incrementCounter() 関数に下記のコードを追加します。
// マップに表示するシンボルを画像ファイルの URL から作成します。
final pictureMarkerSymbol = PictureMarkerSymbol.withUri(Uri.parse("https://static.arcgis.com/images/Symbols/Shapes/BlueStarLargeB.png"));
pictureMarkerSymbol.height = 50;
pictureMarkerSymbol.width = 50;
// シンボルを表示する座標をマップの現在の表示範囲からランダムに取得します。
double xRengeMax = _mapViewController.visibleArea!.extent.xMax;
double xRengeMin = _mapViewController.visibleArea!.extent.xMin;
double xRandom = Random().nextDouble() * (xRengeMax - xRengeMin) + xRengeMin;
double yRengeMax = _mapViewController.visibleArea!.extent.yMax;
double yRengeMin = _mapViewController.visibleArea!.extent.yMin;
double yRandom = Random().nextDouble() * (yRengeMax - yRengeMin) + yRengeMin;
// ランダムに取得した座標からポイント オブジェクトを作成します。
final newPoint = ArcGISPoint(
x: xRandom,
y: yRandom,
spatialReference: _mapViewController.spatialReference,
);
// ポイントとシンボルを設定してグラフィックス オブジェクトを作成し、グラフィックス オーバレイに追加します。
final graphic = Graphic(geometry: newPoint, symbol: pictureMarkerSymbol);
_mapViewController.graphicsOverlays[0].graphics.add(graphic);
8. ランダムな座標値の取得に math ライブラリの Random クラスを使用するので、下記のコードを追加してインポートします。
import 'dart:math';
9. これで地図機能の実装は完了です。Android または iOS でアプリを起動して、地図を移動したり、右下の「+」Versuchen Sie, die Schaltfläche zu drücken.
Fertiges ProjektDie Datei isthierzum Downloadverfügbar.
Zusammenfassung
Wir haben gezeigt, wie man mit dem Flutter SDK eine Karten-App erstellt.Derzeit werden als Ausführungsumgebungen nurAndroid und iOS unterstützt.Obwohl in diesem Artikel nicht behandelt, gibt es neben den implementierten Funktionen auch viele weitere wichtige Features für Karten-Apps wie Adresssuche, Routenplanung, Anzeige des aktuellen Standorts und Offline- Kartendarstellung.Auf GitHub sindBeispielcodes für jede Funktionveröffentlicht, die Sie ebenfalls ausprobieren sollten.
Nützliche Links
