Introduction
This time, Flutter will be used to show how to create a map app. Flutter is a cross-platform open-source UI toolkit for app development. It allows you to develop apps that run on different platforms such as iOS, Android, Windows, macOS, and Web apps from a single source code. It has a high share as a cross-platform development framework and is used by many users. It is currently widely used.
If you want to display maps in a Flutter app, various map packages are available, so you will choose one that matches your requirements. This time, using ArcGIS Maps SDK for Flutter (hereafter, Flutter SDK), we will introduce a series of articles on how to create a map app that runs on Android and iOS. Let's create a map app with Flutter! (This article
This will be omitted here, but set up the development environment according to the
official Flutter guide. This time, since we are creating Android and iOS
apps, we will develop in an environment like the following.Visual Studio Code will be used as the editor. ArcGIS Maps SDK for Flutter 300.0Flutter 3.44.2Dart 3.12.2Xcode 26.5Android Studio Quail 1 2026.1.1Android NDK 28.2.13676358Please also check the following articles depending on the version of Flutter you use.When using Flutter 3.44.x
- When using Flutter 3.41.x
- 1. Once your development environment is ready, create a new Flutter project in Visual Studio Code. Use the 'Flutter: New Project' command from the command palette in Visual Studio Code to create it. The app name is set to "flutter_map_application".
- cd <path_to_flutter_map_application>
dart pub add arcgis_maps
flutter pub upgrade
3. Install arcgis_maps_core.
dart run arcgis_maps install
Android/iOS specific settingsNext, configure individual settings for running on
Android
and
iOS.
. Depending on your target environment, configure both or either one.
android/app/build.gradle.kts ファイルを編集して最小要件を更新します。Android SDK の最小バージョンを 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 でアプリを起動して、地図を移動したり、右下の「+」Try pressing the button.
Completed ProjectThe file ishereto download
Summary
We have introduced how to create a map app using Flutter SDK.Currently, only Android and iOS are supported as execution environments.Although not covered in this article, besides the features implemented this time, there are plenty of essential map app functions such as address search, route search, current location display, and offline map display.On GitHub,sample code for each featureis available, so please give it a try as well.
Related Links
