Flutter で地図アプリを作成してみよう
はじめに
今回は Flutter で地図アプリを作成する方法を紹介します。Flutter はクロスプラットフォーム アプリ開発に利用できるオープンソースの UI ツールキットです。iOS、Android、Windows、macOS、Web アプリなど異なるプラットフォーム上で動作するアプリをワンソースで開発できます。クロスプラットフォーム開発のフレームワークとしてシェアも高く、多くのユーザーに利用されています。
Flutter アプリで地図を表示したい場合は、様々な地図用のパッケージが公開されているので、その中から要件にマッチするものを探すことになります。今回は ArcGIS Maps SDK for Flutter（以下、Flutter SDK）を使用して、Android と iOS で動作する地図アプリを作成する手順をシリーズ記事として紹介していきます。
- Flutter で地図アプリを作成してみよう！ (本記事)
- Flutter で地図アプリを作成してみよう！～現在地の表示～
- Flutter で地図アプリを作成してみよう！～住所検索～
- Flutter で地図アプリを作成してみよう！～シェープファイルの表示～
- Flutter で地図アプリを作成してみよう！～オフラインマップの表示～
Flutter プロジェクトの作成
この記事では割愛しますが、Flutter の公式のガイドに沿って開発環境を整えます。今回は、Android と iOS アプリを作成するため、以下のような環境で開発を行います。Visual Studio Code をエディターとして使用します。
- ArcGIS Maps SDK for Flutter 200.8
- Flutter 3.32.8
- Dart 3.8.1
- Xcode 16.3
- Android Studio Narwhal Feature Drop 2025.1.2
- Android NDK 27.0.12077973
Flutter の詳細な開発要件は下記のページを確認してください。
開発環境が整ったら、Visual Studio Code で Flutter プロジェクトを新規に作成します。Visual Studio Code のコマンド パレットから ‘Flutter: New Project’ コマンドを使用して作成します。アプリ名は「flutter_map_application」としています。
Flutter SDK のインストール
続いて、地図表示用の Flutter SDK をセットアップしていきます。
1. ターミナルで下記コマンドを実行して、”arcgis_maps” に依存関係を追加します。
cd <flutter_map_application のパス>
dart pub add arcgis_maps
2. 依存関係を構成するために、’flutter pub upgrade’ を使用します。
flutter pub upgrade
3. arcgis_maps_core をインストールします。
dart run arcgis_maps install
Android/iOS 固有の設定
続いて、Android と iOS で実行するための個別の設定をしていきます。実行する環境に応じて、両方またはいずれかを設定します。
Android で実行する場合
1. flutter_map_application 内の android/app/build.gradle ファイルを編集して最小要件を更新します。コンパイルに使用する SDK のバージョンを 36、Android NDK のバージョンを 27.0.12077973、 Android SDK の最小バージョンを 28 に設定します。
android {
...
compileSdk = 36
ndkVersion = "27.0.12077973"
...
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: <Widget>[
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 でアプリを起動して、地図を移動したり、右下の「+」ボタンを押したりしてみましょう。
完成版のプロジェクト ファイルはこちらからダウンロードできます。
まとめ
Flutter SDK を使用して地図アプリを作成する方法を紹介してきました。現時点では、実行環境として Android と iOS のみをサポートしています。この記事では紹介していませんが、今回実装した機能以外にも、住所検索やルート検索、現在位置の表示、オフライン マップ表示などの地図アプリに必要な機能が豊富に揃っています。GitHub には各機能のサンプルコードが公開されているので、こちらもぜひお試しください。
