Community

Flutter で地図アプリを作成してみよう！

1860
3
10-15-2024 05:53 PM
Labels (1)

Flutter で地図アプリを作成してみよう！

gcf_flutter

 フォーラムの詳細/参加登録はこちら

 

はじめに 

今回は　Flutter で地図アプリを作成する方法を紹介します。Flutter はクロスプラットフォーム アプリ開発に利用できるオープンソースの UI ツールキットです。iOS、Android、Windows、macOS、Web アプリなど異なるプラットフォーム上で動作するアプリをワンソースで開発できます。クロスプラットフォーム開発のフレームワークとしてシェアも高く、多くのユーザーに利用されています。 
Flutter アプリで地図を表示したい場合は、様々な地図用のパッケージが公開されているので、その中から要件にマッチするものを探すことになります。この記事では ArcGIS Maps SDK for Flutter （以下、Flutter SDK） を使用して、Android と iOS で動作する地図アプリを作成する手順を紹介していきます。 

 

apps.png

 

Flutter プロジェクトの作成 

この記事では割愛しますが、Flutter の公式のガイドに沿って開発環境を整えます。今回は、Android と iOS アプリを作成するため、以下のような環境で開発を行います。Visual Studio Code をエディターとして使用します。 

  • ArcGIS Maps SDK for Flutter 200.7
  • Flutter 3.29.3
  • Dart 3.7.2
  • Xcode 16.3
  • Android Studio Meerkat 2024.3.1 Patch 1
  • Android NDK 27.0.12077973

 

Flutter の詳細な開発要件は下記のページを確認してください。 

 

開発環境が整ったら、Visual Studio Code で Flutter プロジェクトを新規に作成します。Visual Studio Code のコマンド パレットから ‘Flutter: New Project’ コマンドを使用して作成します。アプリ名は「flutter_map_application」としています。 

 

(view in My Videos)

 

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 ファイルを編集して最小要件を更新します。Android NDK の最小バージョンを25.2.9519653、 Android SDK の最小バージョンを26 に設定します。 

 

android { 
    ...
    ndkVersion = "27.0.12077973" 
    ... 
    defaultConfig { 
        ... 
        minSdk = 26 
        ... 
    } 
    ... 
}

 

2. android/settings.gradle ファイルを編集して Kotlin のバージョンを 1.9.0 に更新します。

 

plugins { 
    ... 
    id "org.jetbrains.kotlin.android" version "1.9.0" apply false 
}

 

3. インターネットにアクセスするために、android/app/src/main/AndroidManifest.xml ファイルに権限を追加します。 

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"> 
    <uses-permission android:name="android.permission.INTERNET" /> 
...

 

4. Android Studio の Meerkat 2024.3.1 以降を使用している場合、pub.dev で arcgis_maps パッケージを使用すると、SDK の依存関係の管理で問題が発生する可能性があります。 これを解決するには、Flutter のデフォルト JDK として JDK 17 を設定する必要があります。

[macOS の場合] Homebrew を使用して macOS に JDK 17 をインストールします。

brew install openjdk@17
sudo ln -sfn /opt/homebrew/opt/openjdk@17/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-17.jdk
flutter config --jdk-dir=/opt/homebrew/Cellar/openjdk@17/17.0.14/libexec/openjdk.jdk/Contents/Home

 

[Windows の場合] Microsoft の OpenJDK ページから OpenJDK 17 をダウンロードして、zip ファイルを任意のフォルダに解凍した後、PowerShell を使用して設定します。

flutter config --jdk-dir PATH-TO-JDK

 

iOSで実行する場合 

1. flutter_map_application 内の ios/Podfile ファイルを編集して iOS のバージョンを 16.0 に設定します。行のコメントを解除して、バージョン番号を更新します。 

 

platform :ios, '16.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 でアプリを起動して、地図を移動したり、右下の「+」ボタンを押したりしてみましょう。  

 

(view in My Videos)

 

完成版のプロジェクト ファイルはこちらからダウンロードできます。 

 

まとめ 

Flutter SDK を使用して地図アプリを作成する方法を紹介してきました。現時点では、実行環境として Android と iOS のみをサポートしています。この記事では紹介していませんが、今回実装した機能以外にも、住所検索やルート検索、現在位置の表示、オフライン マップ表示などの地図アプリに必要な機能が豊富に揃っています。GitHub には各機能のサンプルコードが公開されているので、こちらもぜひお試しください。 

 

関連リンク 

Labels (1)
Comments
HarishK
by Esri Contributor
Esri Contributor
‎10-18-2024 08:42 AM
‎10-18-2024 08:42 AM

Thanks for the detailed tutorial, it's very thorough and can act as excellent starter code for anyone.

ChanganShi1
by
Regular Contributor
‎11-25-2024 10:27 AM
‎11-25-2024 10:27 AM

The 200.6.0 ArcGIS Maps SDK for Flutter has been released, you may update your tutorial.

YukiOZAWA2
by Esri Contributor
Esri Contributor
‎12-09-2024 05:57 PM
‎12-09-2024 05:57 PM
This article has been updated to the release version (v200.6).
Version history
Last update:
2 hours ago
Updated by:
Esri Contributor
Contributors