Introducción
En esta ocasión Flutter te mostraré cómo crear una aplicación de mapas con Flutter. Flutter es un kit de herramientas de UI de código abierto que se puede usar para el desarrollo de aplicaciones multiplataforma para el desarrollo de aplicaciones. Es un kit de herramientas UI de código abierto que permite desarrollar aplicaciones para iOS, Android, Windows, macOS, aplicaciones web y otras plataformas desde una única base de código. Puedes desarrollar aplicaciones que funcionen en diferentes plataformas con una sola fuente. Como framework para desarrollo multiplataforma, tiene una gran cuota de mercado y es utilizado por muchos usuarios. Actualmente tiene una gran cuota como framework multiplataforma y es utilizado por muchos usuarios. ahora.
Si quieres mostrar mapas en una aplicación Flutter, hay varios paquetes de mapas disponibles, por lo que debes buscar uno que se ajuste a tus necesidades. En esta serie de artículos te mostraré cómo crear una aplicación de mapas para Android e iOS usando el ArcGIS Maps SDK for Flutter (en adelante, Flutter SDK).Flutter SDK), siguiendo los pasos para crear una aplicación de mapas que funcione en Android e iOS.
Creación del proyecto Flutter
Este tema se omite aquí, pero configura tu entorno de desarrollo siguiendo la guía oficial de Flutter.En esta ocasión desarrollaremos para Android e iOS, usando un entorno como el siguiente.Usaremos Visual Studio Code como editor.
- 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
Dependiendo de la versión de Flutter que uses, también revisa los siguientes artículos.
1. Una vez configurado el entorno, crea un nuevo proyecto Flutter en Visual Studio Code usando el comando ‘Flutter: New Project’ desde la paleta de comandos. El nombre del proyecto será “flutter_map_application”.
cd <ruta_de_flutter_map_application>
dart pub add arcgis_maps
2. Para gestionar las dependencias, usa ‘flutter pub upgrade',' field '63':'’.',' field '64':' ',' field '65':' ',' field '66':'flutter pub upgrade ',' field '67':' ',' field '68':'3. Instala arcgis_maps_core',' field '69':' .',' field '70':' ',' field '71':'dart run arcgis_maps install',' field '72':' ',' field '73':'Configuración específica para Android/iOS',' field '74':' ',' field '75':'A continuación, configura individualmente para ejecutar en ',' field '76':'Android',' field '77':' y ',' field '78':'iOS',' field '79':'. Configura ambos o solo uno según el entorno donde ejecutes la app.',' field '80':' ',' field '81':' ',' field '82':'Para ejecutar en Android',' field '83':',',' field '84':'1. Edita el archivo ',' field '85':'android/app/build.gradle.kts',' field '86':' dentro del proyecto flutter_map_application para actualizar los requisitos mínimos.',' field '87':' Establece la versión mínima del SDK Android en ',' field '88':'28',' field '89':'.',' field '90':' ',' field '91':' ',' field '92':'android { ',' field '93':' ...',' field '94':' defaultConfig { ',' field '95':' ... ',' field '96':' minSdk = 28 ',' field '97':' ... ',' field '98':' } ',' field '99':' ... ',' field '100':'} ',' field '101':' ',' field '102':'2. Para acceder a internet, añade permisos en el archivo android/app/src/main/AndroidManifest.xml.',' field '103':'.',' field '104':'<manifest xmlns:android="http://schemas.android.com/apk/res/android"> ',' field '105':' <uses-permission android:name="android.permission.INTERNET" /> ',' field '106':'... ',' field '107':'' ,' field '108':'' ,' field '109':'' ,' field '110':'' ,' field '111':'' ,' field '112':'' ,' field '113':'' ,' field '114':'' ,' field '115':'' ,' field '116':'' ,' field '117':'' ,' field '118':'' ,' field '119':'' ,' field '120':'' ,' field '121':'' ,' field '122':'' ,' field '123':'' ,' field '124':'' ,' field '125':'' ,' field '126':'' ,' field '127':'' ,' field '128':'' ,' field '129':'' ,' field '_130': '' , '_131': '' , '_132': '' , '_133': '' , '_134': '' , '_135': '' , '_136': '' , '_137': '' , '_138': '' , '_139': '' , '_140': '' , '_141': '' , '_142': '' , '_143': '' , '_144': '' , '_145': '' , '_146': '' , '_147': '' , '_148': '' , '_149': '' , '_150': '' , '_151': '' , '_152': '' , '_153': '' , '_154': '' , '_155': '' , '_156': '' , '_157': '' , '_158': '' , '_159': '' , '_160': '' , '_161': '' , '_162': '' , '_163': ’ を使用します。
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.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 でアプリを起動して、地図を移動したり、右下の「+」Intenta presionar el botón.
Proyecto finalizadoLos archivos estánaquípara descargar
Resumen
Hemos mostrado cómo crear una aplicación de mapas usando Flutter SDK.Actualmente, solo se soportan como entornos de ejecución Android e iOS.Aunque no se mencionó en este artículo, además de las funciones implementadas aquí, hay muchas funciones necesarias para aplicaciones de mapas, como búsqueda de direcciones, búsqueda de rutas, mostrar la ubicación actual y mapas sin conexión. En GitHub,el código de ejemplo para cada función está disponible, así que te invitamos a probarlo también.
Enlaces relacionados
