Introdução
Desta vez, Flutter será apresentado como uma forma de criar um aplicativo de mapas. Flutter é um kit de ferramentas UI open source que pode ser usado para desenvolvimento de aplicativos cross-platform. kit de ferramentas UI open source que pode ser usado para desenvolvimento de aplicativos cross-platform. Ele permite desenvolver aplicativos que funcionam em diferentes plataformas como iOS, Android, Windows, macOS e Web a partir de uma única base de código. Como um framework para desenvolvimento cross-platform, ele tem uma grande participação no mercado e é amplamente utilizado por muitos usuários. atualmente.
Se você quiser exibir mapas em um aplicativo Flutter, existem vários pacotes de mapas disponíveis, então você deve escolher aquele que atende aos seus requisitos. Desta vez, usaremos o ArcGIS Maps SDK for Flutter (doravante chamado de Flutter SDK) para criar um aplicativo de mapas que funcione em Android e iOS, apresentado como uma série de artigos.
Criando projeto Flutter
Embora não seja abordado neste artigo, configure o ambiente de desenvolvimento seguindo o guia oficial do Flutter.Desta vez, vamos desenvolver para Android e iOS, usando o seguinte ambiente.Visual Studio Code será usado 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
Dependendo da versão do Flutter que você usa, consulte também os artigos abaixo.
1. Depois que o ambiente estiver configurado, crie um novo projeto Flutter no Visual Studio Code usando o comando ‘Flutter: New Project’ no palette de comandos. O nome do app será “flutter_map_application”.
cd <caminho_para_flutter_map_application>
dart pub add arcgis_maps
2. Para configurar as dependências, use ‘flutter pub upgrade.
flutter pub upgrade
3. Instale o arcgis_maps_core.
dart run arcgis_maps install
Configurações específicas para Android/iOS
Em seguida, faremos configurações específicas para executar no Android e no iOS. Configure ambos ou apenas um conforme o ambiente onde irá executar.
Para executar no Android:
1. Edite o arquivo /android/app/build.gradle.kts dentro do flutter_map_application para atualizar os requisitos mínimos.Defina a versão mínima do Android SDK para . Defina para 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 でアプリを起動して、地図を移動したり、右下の「+」Vamos tentar pressionar o botão.
Projeto finalizadoOs arquivos estãoaquipara download
Resumo
Apresentamos como criar um aplicativo de mapas usando o Flutter SDK.No momento, suportamos apenas Android e iOS como ambientes de execução.Embora não tenha sido abordado neste artigo, além das funcionalidades implementadas, há muitos recursos essenciais para aplicativos de mapas, como busca de endereços, busca de rotas, exibição da localização atual e mapas offline. disponíveis.No GitHub, hácódigos de exemplo para cada funcionalidadedisponíveis, então não deixe de experimentar também.
Links relacionados
