ArcGIS Developers 開発リソース集 > スタートアップガイド > アプリ開発 > Flutter

Flutter

出典：ArcGIS Maps SDK for Flutter - Tutorials - Display a map

マップを表示する

このチュートリアルでは ArcGIS Maps SDK for Flutter を使用して、マップとベースマップレイヤーを表示する方法を紹介します。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップレイヤーと、オプションで 1 つ以上のデータレイヤーを追加できます。

このチュートリアルでは、地形図ベースマップレイヤーを使用して、富士山付近を表示する地図を作成します。

このチュートリアルのトピックの背景情報については、Mapping API and location services guide の Maps (2D) とベースマップを参照してください。

前提条件

このチュートリアルを実施するには、以下が必要です。

API キーにアクセスするための ArcGIS 開発者アカウント。アカウントをお持ちでない場合は、サインアップ（無料）してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。
開発環境がシステム要件を満たしており、Flutter の開発環境が整っていることを確認します。
Flutter 用の IDE。VS Code を推奨しています。

認証の設定

このチュートリアルで使用するセキュアな ArcGIS ロケーションサービスにアクセスするには、ArcGIS Location Platform または ArcGIS Online アカウントを使用して、API キー認証を実装する必要があります。

API キー認証

このチュートリアルで使用するセキュアなリソースにアクセスする権限を持つ、新しい API キーのアクセストークンを作成します。

API キーの作成のチュートリアルを完了し、以下の権限を持つ API キーを作成します。
- Privileges
  - Location services > Basemaps
API キーのアクセストークン をコピーし、安全な場所に貼り付けます。これは後のステップで使用します。

開発またはダウンロード

このチュートリアルを完了するには、2 つの選択肢があります。

オプション 1:コードを開発するか
オプション 2:完成したソリューションをダウンロードする

オプション 1:コードを開発する

新しい Flutter アプリを作成する

VS Code を開き、Welcome タブで [Open Folder…] を選択します。プロジェクトの場所を選んでください。
[View] > [Terminal] に進みます。
ターミナルウィンドウで以下のコマンドを使い、display_a_map という新しい Flutter アプリを作成します。必要なターゲットプラットフォームと組織名 com.example.app を設定します。
```
flutter create -e display_a_map --platforms ios,android --org com.example.app
```

ArcGIS Maps SDK for Flutter を追加する

arcgis_maps パッケージに依存関係を追加します。

VS Code のターミナルで、ディレクトリーを新しいプロジェクトに変更します。
```
cd display_a_map
```
以下のコマンドを実行します。
```
dart pub add arcgis_maps
```
以下のコマンドを実行します。
```
flutter pub upgrade
```
最後に、以下のコマンドを実行します。
```
dart run arcgis_maps install
```

プラットフォーム固有の構成

Android

プロジェクトの android/app/build.gradle.kts ファイルを編集して、最小要件を更新します。

build.gradle.kts

android {
    namespace = "com.example.app.display_a_map"
    compileSdk = 36 //変更
    ndkVersion = "27.0.12077973" //変更

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_11.toString()
    }

    defaultConfig {
        // TODO: 任意のアプリケーション ID を指定します (https://developer.android.com/studio/build/application-id.html).
        applicationId = "com.example.app.display_a_map"
        // アプリケーションの要件に合わせて次の値を更新します。
        // 詳細については https://flutter.dev/to/review-gradle-config を参照してください。
        minSdk = 28 //変更
        targetSdk = flutter.targetSdkVersion
        versionCode = flutter.versionCode
        versionName = flutter.versionName
    }

android/app/src/main/AndroidManifest.xml に、オンラインリソースにアクセスするためのパーミッションを追加します。

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET" /> <!-- 追加 -->
    <application
        android:label="display_a_map"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

iOS

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

Podfile
```
# Uncomment this line to define a global platform for your project
platform :ios, '17.0'  #変更
```

Runtimecore pod と arcgis_maps_ffi pod を Runner ターゲットセクションに追加します。

Podfile

target 'Runner' do
    use_frameworks!
    use_modular_headers!

    #変更開始
    pod 'Runtimecore', :podspec => '../arcgis_maps_core/ios/Runtimecore.podspec'
    pod 'arcgis_maps_ffi', :podspec => '../arcgis_maps_core/ios/arcgis_maps_ffi.podspec'
    #変更終了

    flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
    target 'RunnerTests' do
        inherit! :search_paths
    end
end

pod update を使用して Pods を設定します。
```
cd ios && pod update && cd ..
```

開発者資格情報を設定する

アプリユーザーが ArcGIS の位置情報サービスにアクセスできるようにするには、認証の設定ステップで作成した開発者資格情報を使用して、リソースへのリクエストを認証します。

API キーを設定する

VS Codeで、lib/main.dart を開きます。

arcgis_maps パッケージをインポートします。

main.dart

import 'package:flutter/material.dart';

import 'package:arcgis_maps/arcgis_maps.dart'; //追加

main() 関数で、ArcGISEnvironment.apiKey の値をアクセストークンに設定します。
```
void main() {

     ArcGISEnvironment.apiKey = ''; // アクセス トークンをここに記入します。 //追加

    runApp(const MainApp());
}
```
このチュートリアルでは便宜上、アクセストークンをコードに直接格納しています。アクセストークンをソースコードに格納することはベストプラクティスではありません。

runApp() 内で MaterialApp をインスタンス化し、名前付き引数 home に MainApp のインスタンスを設定します。

main.dart

void main() {

ArcGISEnvironment.apiKey = ''; // アクセス トークンをここに記入します。

ArcGISEnvironment.apiKey = apiKey; //追加

runApp(
    const MaterialApp(home: MainApp()) //変更
    );
}

マップを追加する

地形図ベースマップレイヤーを含む地図を作成します。地図は富士山の付近とします。

テンプレート MainApp クラス定義をリファクタリングして、StatefulWidget を拡張します。 StatelessWidget キーワードにマウスカーソルを合わせて右クリックし、[Refactor…] から、[Convert to StatefulWidget] を選択してコードをリファクタリングします。

ArcGIS Maps SDK for Flutter で作業していると、データの変更に応じて UI を更新するなど、アプリケーションの状態の更新が必要になることがよくあります。ステートフルウィジェットを実装することで、アプリはこのような状況に対応できます。ステートレスウィジェットの実装を使用して、単に地図を表示することも可能です。Display map サンプルをご確認ください。

main.dart
```
class MainApp extends StatefulWidget { //変更

    const MainApp({super.key});

    // 変更開始
    @override
    State<MainApp> createState() => _MainAppState();
    // 変更終了

}

//追加開始
class _MainAppState extends State<MainApp> {
    @override
    Widget build(BuildContext context) {

        return const MaterialApp(
            home: Scaffold(
                body: Center(
                    child: Text('Hello World!'),
                ),
            ),
        );

    }
}
//追加終了
```

_MainAppState クラスの build メソッド内で返される MaterialApp ウィジェットを削除します。このコードは Flutter create テンプレートによって生成されたもので、次項でマップを含むウィジェットを返すコードに置き換えられます。

main.dart

class MainApp extends StatefulWidget {

    const MainApp({super.key});

    @override
    State<MainApp> createState() => _MainAppState();

}

class _MainAppState extends State<MainApp> {
        @override
        Widget build(BuildContext context) {

            // 削除開始
            return const MaterialApp(
                home: Scaffold(
                    body: Center(
                        child: Text('Hello World!'),
                    ),
                ),
            );
            // 削除終了

        }
}

_MainAppState クラスの内部で、最後のクラスメンバー変数 _mapViewController を定義し、ArcGISMapView クラスの createController() を呼び出して ArcGISMapViewController で初期化します。

ArcGIS マップビューコントローラーは、ArcGISMap で定義された 2 次元 (2D) 地理コンテンツを表示するユーザーインタフェースコントロールです。

main.dart
```
class _MainAppState extends State<MainApp> {

    final _mapViewController = ArcGISMapView.createController(); //追加

    @override
    Widget build(BuildContext context) {

    }

}
```
build メソッド内で Scaffold、Column、Expanded からなるウィジェットツリーに ArcGISMapView ウィジェットを追加します。引数名 controllerProvider をクラスメンバー変数 _mapViewController に設定し、onMapViewReady 引数を次に定義する引数と同じ名前の新しいメソッドに設定します。

Scaffold ウィジェットは基本的なマテリアルデザインのビジュアルレイアウト構造を提供し、Column ウィジェットは子ウィジェットを垂直配列で表示します。ArcGISMapView ウィジェットは、サイズが制限されたウィジェット内でのみ使用できます。サイズが制限されていない状態で使用すると、アプリケーションは例外をスローします。たとえば、ArcGISMapView を Column ウィジェット内で使用すると、サイズが制限されないため、このような例外が発生します。代わりに、チュートリアルのこのステップで説明するように、ArcGISMapView を Expanded ウィジェットでラップして、適切な境界を提供することができます。

main.dart
```
class _MainAppState extends State<MainApp> {

    final _mapViewController = ArcGISMapView.createController();

    @override
    Widget build(BuildContext context) {

        //追加開始
        return Scaffold(
          body: Column(
            children: [
              Expanded(
                child: ArcGISMapView(
                  controllerProvider: () => _mapViewController,
                  onMapViewReady: onMapViewReady,
                ),
              ),
            ],
          ),
        );
        //追加終了

    }

}
```

_MainAppState 内で、何も返さない新しいメソッド onMapViewReady() を定義します。

main.dart

class _MainAppState extends State<MainApp> {

    final _mapViewController = ArcGISMapView.createController();

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            body: Column(
                children: [
                    Expanded(
                        child: ArcGISMapView(
                            controllerProvider: () => _mapViewController,
                            onMapViewReady: onMapViewReady,
                        ),
                    ),
                ],
            ),
        );

    }

    //追加開始
    void onMapViewReady() {

    }
    //追加終了

}

新しいメソッド内で、final 変数 map を定義し、ArcGIS Topographic ベースマップスタイルを持つ ArcGISMap インスタンスに初期化します。

basemapStyleParams: BasemapStyleParameters をインスタンス化し、specificLanguage を日本語に変更します。
basemap: ArcGIS Topographic ベースマップスタイルと生成した basemapStyleParams で Basemap をインスタンス化します。
map: basemap で ArcGISMap をインスタンス化します。

main.dart

class _MainAppState extends State<MainApp> {

    final _mapViewController = ArcGISMapView.createController();

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            body: Column(
                children: [
                    Expanded(
                        child: ArcGISMapView(
                            controllerProvider: () => _mapViewController,
                            onMapViewReady: onMapViewReady,
                        ),
                    ),
                ],
            ),
        );

    }

    void onMapViewReady() {

        //追加開始
        final basemapStyleParams = BasemapStyleParameters();
        basemapStyleParams.specificLanguage = "ja"; //ベースマップの言語を日本語に設定

        final basemap = Basemap.withStyle(BasemapStyle.arcGISTopographic, parameters: basemapStyleParams); //ベースマップに設定を適用
        final map = ArcGISMap.withBasemap(basemap); //設定したベースマップでマップを生成
        //追加終了

    }

}

ArcGIS マップビューコントローラーの arcGISMap プロパティーを map に設定します。さらに、setViewpoint() を呼び出して、富士山にズームします。

main.dart

class _MainAppState extends State<MainApp> {

    final _mapViewController = ArcGISMapView.createController();

    @override
    Widget build(BuildContext context) {

        return Scaffold(
            body: Column(
                children: [
                    Expanded(
                        child: ArcGISMapView(
                            controllerProvider: () => _mapViewController,
                            onMapViewReady: onMapViewReady,
                        ),
                    ),
                ],
            ),
        );

    }

    void onMapViewReady() {

        final basemapStyleParams = BasemapStyleParameters();
        basemapStyleParams.specificLanguage = "ja"; //ベースマップの言語を日本語に設定

        final basemap = Basemap.withStyle(BasemapStyle.arcGISTopographic, parameters: basemapStyleParams); //ベースマップに設定を適用
        final map = ArcGISMap.withBasemap(basemap); //設定したベースマップでマップを生成

        //追加開始
        _mapViewController.arcGISMap = map;
        _mapViewController.setViewpoint(
            Viewpoint.withLatLongScale(
                latitude: 35.360626,
                longitude: 138.727363,
                scale: 200000.0,
            ),
        );
        //追加終了

    }

}

アプリを実行する

Android エミュレーター、iOS シミュレーター、または物理的なデバイスが設定され、実行されていることを確認します。
VS Codeで、[Run] > [Run Without Debugging] を選択します。

富士山を中心に、地形図のベースマップ層が表示された地図が表示されます。地図ビューをピンチ、ドラッグ、またはダブルタップして、地図を閲覧してください。

または、以下の手順に従ってチュートリアルの解答をダウンロードすることもできます。

オプション 2:完成したソリューションをダウンロードする

こちらをクリックしファイルをダウンロードし、コンピュータ内の任意の場所に解凍してください。
VS Code で、プロジェクトを開いてください。

ダウンロードしたソリューションには認証情報が含まれていないため、認証の設定セクションで作成した開発者資格情報を追加する必要があります。

ソリューションに開発者資格情報を設定する

API キーを設定する

VS Codeで、lib/main.dart を開きます。
main() 関数で、ArcGISEnvironment.apiKey の値をアクセストークンに設定します。
```
void main() {

     ArcGISEnvironment.apiKey = ''; // アクセス トークンをここに記入します。 //追加

    runApp(const MainApp());
}
```
このチュートリアルでは便宜上、アクセストークンをコードに直接格納しています。アクセストークンをソースコードに格納することはベストプラクティスではありません。

アプリを実行する

以下の手順に従ってアプリケーションを実行してください。

VS Codeのターミナルで、次のコマンドを実行してください。
```
flutter pub upgrade
```
実行します。
```
dart run arcgis_maps install
```
Android エミュレーター、iOS シミュレーター、または物理的なデバイスが設定され、実行されていることを確認します。
VS Codeで、[Run] > [Run Without Debugging] を選択します。

アプリの動作が確認できたら ArcGIS のセキュリティーと認証について学びましょう！