FlutterのFlutter Mapパッケージでマップアプリケーションを構築してみた #Flutter

この記事は、「MIERUNE Advent Calendar 2020」の4日目の記事です。

FlutterのFlutter Mapパッケージでマップアプリケーションを構築してみました

事前準備

Flutterの環境準備
- Flutterインストール
各バージョン
- Flutter v1.20.4
- Dart v2.9.2
- Xcode v12.0
- Android SDK v30.0.1
- Android Studio v4.0
- Visual Studio Code v1.51.1
- Flutter extension v3.16.0

Flutterの環境確認

flutter doctor -v

はじめに、Flutterのプロジェクトを新規作成します。

flutter create map_app

今回は「lib/main.dart」を修正します。

全体構成

Visual Studio Codeで「実行とデバッグ」を実行し、一度動作確認をします。

実行するとデフォルトのアプリケーションが表示されます。ここまで表示されるとプロジェクトの新規作成はOKです

プロジェクト作成後、パッケージの設定をしていきます。

flutter_mapパッケージのインストール

flutter_mapパッケージのインストール

flutter_mapをインストールします。

pubspec.yaml

name: map_app
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1

environment:
    sdk: '>=2.7.0 <3.0.0'

dependencies:
    flutter:
        sdk: flutter

    cupertino_icons: ^0.1.3

    # flutter_mapパッケージ追加
    flutter_map: ^0.10.1

dev_dependencies:
    flutter_test:
        sdk: flutter

flutter:
    uses-material-design: true

パッケージのインストールは、Visual Studio Codeで拡張機能をいれると自動インストールされますが、下記コマンドで手動インストールも可能です。

flutter pub get

最後に、メインコードを書いていきます。

/lib

main.dart

import 'package:flutter/material.dart';
// flutter_mapパッケージ追加
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

void main() {
  runApp(MapApp());
}

class MapApp extends StatefulWidget {
  @override
  _MapAppState createState() => new _MapAppState();
}

class _MapAppState extends State<MapApp> {
  String _title = 'map_app';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'map_app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        // flutter_map設定
        body: FlutterMap(
          // マップ表示設定
          options: MapOptions(
            center: LatLng(35.681, 139.767),
            zoom: 14.0,
          ),
          layers: [
            //背景地図読み込み (Maptiler)
            TileLayerOptions(
              urlTemplate:
                  'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
            ),
            // サークルマーカー設定
            CircleLayerOptions(
              circles: [
                // サークルマーカー1設定
                CircleMarker(
                  color: Colors.indigo.withOpacity(0.9),
                  radius: 10,
                  borderColor: Colors.white.withOpacity(0.9),
                  borderStrokeWidth: 3,
                  point: LatLng(35.681, 139.760),
                ),
                // サークルマーカー2設定
                CircleMarker(
                  color: Colors.teal.withOpacity(0.5),
                  radius: 15,
                  borderColor: Colors.white.withOpacity(0.5),
                  borderStrokeWidth: 5,
                  point: LatLng(35.675, 139.770),
                ),
                // サークルマーカー3設定
                CircleMarker(
                  color: Colors.yellow.withOpacity(0.7),
                  radius: 20,
                  borderColor: Colors.white.withOpacity(0.7),
                  borderStrokeWidth: 6,
                  point: LatLng(35.687, 139.775),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

flutter_mapパッケージを読み込みます。

// flutter_mapパッケージ追加
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

マップの表示設定をします。

// マップ表示設定
options: MapOptions(
    center: LatLng(35.681, 139.767),
    zoom: 14.0,
),

背景地図を読み込みます。今回はMaptilerを指定します

//背景地図読み込み (Maptiler)
TileLayerOptions(
    urlTemplate:
    'https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=[APIキー]',
),

サークルマーカーを設定します。

// サークルマーカー設定
CircleLayerOptions(
    circles: [
        // サークルマーカー1設定
        CircleMarker(
            color: Colors.indigo.withOpacity(0.9),
            radius: 10,
            borderColor: Colors.white.withOpacity(0.9),
            borderStrokeWidth: 3,
            point: LatLng(35.681, 139.760),
        ),
        // サークルマーカー2設定
        CircleMarker(
            color: Colors.teal.withOpacity(0.5),
            radius: 15,
            borderColor: Colors.white.withOpacity(0.5),
            borderStrokeWidth: 5,
            point: LatLng(35.675, 139.770),
        ),
        // サークルマーカー3設定
        CircleMarker(
            color: Colors.yellow.withOpacity(0.7),
            radius: 20,
            borderColor: Colors.white.withOpacity(0.7),
            borderStrokeWidth: 6,
            point: LatLng(35.687, 139.775),
        ),
    ],
),

再度、Visual Studio Codeで「実行とデバッグ」を実行し、動作確認をします。

実行するとマップアプリケーションが表示されます。今回はiOSの実機で表示してみました

FlutterのFlutter Mapパッケージでマップアプリケーションを構築できました

Flutterでマップアプリケーションを構築するには、複数のパッケージがありますが今回はLeafletライクなFlutter Mapを利用しましたもちろんMaptilerも背景地図として読み込みできました
以前、WebViewでもマップアプリケーションを構築した記事を書いたのですが、動作がいまいちあやしい部分もあったので、Flutter Mapのようなパッケージを利用したほうが良さそうです

Flutterについて、他にも記事を書いています。よろしければぜひ
FlutterのWebViewでマップアプリケーションを表示してみた
 Adobe XDとFlutterを組み合わせてUIをつくってみた

やってみたシリーズ
tags - Try