Google Flutter

日本システム開発株式会社からGoogle Flutterに関するコラムをお届けします。

車載システムなど豊富な組み込み領域の実績を持つ弊社から、組み込み業界でもホットなFlutterに関する情報を発信します。

日本システム開発の技術、
覗いてみませんか。

Google Flutterコラム第4回「Mapbox地図とUIの重ね合わせ」（2/2）

2021.12.21

Google Flutterのコラム第3回・4回では、mapboxの地図にFlutterUIを重ね合わせてカーナビのような画面を作成していきます。

Flutterでmapboxを使用するために、有志が開発を行っている「mapbox_gl」パッケージを使用します。

Android,iOS,Webに対応しており、ターゲットのプラットフォームを意識せずに地図表示を簡単に行うことができます。

mapbox_glの導入方法などについては、前回のコラム「GoogleMapとmapboxの地図表示を比較してみた」の[mapboxを使用したアプリケーション開発]の章で解説しています。

是非参考にしてみてください。

mapbox_glとFlutter UI

mapbox_glとFlutter UIを組み合わせて、カーナビのような画面を作成しました。

今回はカーナビで普段使うような機能を作成してみました。

現在地アイコン	ユーザーの現在地を示します
検索ボタン	検索画面へ遷移します
時計	現在時刻を表示します
ノースアップ・ヘディングアップ	地図の表示方向を変更しますノースアップは常に北向き、ヘディングアップは現在地アイコンの正面が上向きになります
現在地ボタン	現在地アイコンの位置へ画面を戻します
拡大・縮小ボタン	地図の拡大率を変更します
メニューボタン	ドロワーメニューを表示します
地図	mapbox_glを使って画面に描画した地図

以降では、それぞれの機能について、Widget(UI)とmapbox_glの組み合わせについて紹介していこうと思います。

◎ボタン

ボタンの表示

Google Flutterは様々なButtonクラスを提供しています。

Buttonクラスはボタン押下を検知するonPressedプロパティと、長押しを検知するonLongPressプロパティを持っています。

どちらもイベントを検知するとプロパティに設定したコールバックが実行されます。

【ボタンサンプル】　※Runボタンを押すことでサンプルを実行できます


import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              TextButton(
                child: const Text('TextButton'),
                style: TextButton.styleFrom(
                  primary: Colors.black,
                ),
                onPressed: () => print("onPressed TextButton"),
                onLongPress: () => print("onLongPress TextButton"),
              ),
              ElevatedButton(
                child: const Text('ElevatedButton'),
                style: ElevatedButton.styleFrom(
                  primary: Colors.blue,
                  onPrimary: Colors.white,
                ),
                onPressed: () => print("onPressed ElevatedButton"),
                onLongPress: () => print("onLongPress ElevatedButton"),
              ),
              OutlinedButton(
                child: const Text('OutlinedButton'),
                style: OutlinedButton.styleFrom(
                  primary: Colors.black,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  side: const BorderSide(),
                ),
                onPressed: () => print("onPressed OutlinedButton"),
                onLongPress: () => print("onLongPress OutlinedButton"),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

拡大・縮小ボタン

画面に作成した拡大・縮小ボタンのonPressedプロパティに、_zoomIn()/_zoomOut()を設定して、地図拡縮機能を作りました。

それぞれのボタンが押されると、onPressedからMapboxMapController※1のmoveCamera()を使って地図のカメラ位置を操作しています。

この時、拡縮倍率(ズームレベル)を設定するために、CameraUpdateのzoomIn()/zoomOut()を使用しています。

1.	// mapboxコントローラ
2.	MapboxMapController _mapController;
3.
4.	// 地図拡大
5.	void _zoomIn() {
6.	setState(() {
7.	_mapController.moveCamera(CameraUpdate.zoomIn());
8.	});
9.	}
10.
11.	// 地図縮小
12.	void _zoomOut() {
13.	setState(() {
14.	_mapController.moveCamera(CameraUpdate.zoomOut());
15.	});
16.	}
17.

このように、拡大・縮小ボタンの押下に合わせて、地図の拡縮を変更することができました。

現在地ボタン

ボタンを押すと、カメラを現在地アイコンの位置へ戻すことができます。

mapbox_glのカメラの更新/移動機能を使って作成しました。

1.	// mapboxコントローラ
2.	MapboxMapController _mapController;
3.
4.	// 現在地へカメラを戻す
5.	void _returnToCurrentPosition() {
6.	// 現在地取得
7.	var currentLatLng = _locationManager.getLastCurrentLatLng();
8.
9.	setState(() {
10.	_mapController.moveCamera(CameraUpdate.newLatLng(currentLatLng));
11.	});
12.	}
13.

ノースアップ・ヘディングアップ

ボタン押すことで、画面のノースアップとヘディングアップを切り替えることができます。

mapbox_glのカメラ/シンボル更新機能を使って作成しています。

カメラの方向は、北を基準の0°として、360°を1/4分割した各方位の角度を目安に設定を行います。(北：0.0°、東：90.0°、南：180.0°、西：270.0°)

カメラと現在地アイコンの方向※2をノースアップ・ヘディングアップそれぞれの設定にすることで画面の見た目を切り替えています。

カメラ方位：北向き(0.0°)
現在地アイコンの角度：ユーザーの向き

カメラ方位：ユーザーの向き
現在地アイコンの角度：北向き(0.0°)

1.	// mapboxコントローラ
2.	MapboxMapController _mapController;
3.
4.	// 現在地アイコン(シンボル)
5.	Symbol _vehiclePositionSymbol;
6.
7.	// ユーザー地図表示変更
8.	void _onChangeMapLookUp() {
9.	setState(() {
10.	// 表示アイコンの更新
11.	(Icons.explore == _lookUpIcon.icon)
12.	? _lookUpIcon = Icon(
13.	Icons.explore_off,
14.	color: Colors.black,
15.	size: 30.0,
16.	)
17.	: _lookUpIcon = Icon(
18.	Icons.explore,
19.	color: Colors.black,
20.	size: 30.0,
21.	);
22.
23.	// 地図方位(初期値:北)
24.	var mapRotateDirection = 0.0;
25.
26.	// シンボル角度(初期値:ユーザーの方向)
27.	var symbolRotateDirection = _locationManager.getLastCurrentDirection();
28.
29.	// ヘディングアップの場合
30.	if (Icons.explore_off == _lookUpIcon.icon) {
31.	mapRotateDirection = _locationManager.getLastCurrentDirection();
32.	symbolRotateDirection = 0.0;
33.	}
34.
35.	// カメラの方位を変更する
36.	_mapController.moveCamera(CameraUpdate.bearingTo(mapRotateDirection));
37.
38.	// シンボルの方向を更新する
39.	_mapController.updateSymbol(
40.	_vehiclePositionSymbol,
41.	SymbolOptions(
42.	// シンボル角度更新
43.	iconRotate: symbolRotateDirection,
44.	),
45.	);
46.	});
47.	}
48.

◎アイコン

アイコンの表示

Google Flutterは様々なアイコンを提供しています。

アイコンを表示するにはIconクラスを使用します。

Iconクラスは任意のIconDataを設定することで、ざまざまなアイコン画像を表示することができます。

IconDataの詳細はIconクラス API仕様を参照してください。

【アイコンサンプル】　※Runボタンを押すことでサンプルを実行できます


import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const <Widget>[
              Icon(
                Icons.access_alarm,
                color: Colors.pink,
                size: 40.0,
              ),
              Icon(
                Icons.add_call,
                color: Colors.green,
                size: 40.0,
              ),
              Icon(
                Icons.garage_outlined,
                color: Colors.blue,
                size: 40.0,
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

しかし、Flutter標準のアイコンでは、地図の特定地点を指定したアイコンを表示することが難しいです。

そのため、今回はmapbox_glの機能を使って現在地アイコンを作成しています。

現在地アイコンの表示

現在地アイコンは、地図上のユーザー位置にアイコンを表示します。

地図の特定地点にアイコンを表示するためには、mapbox_glのシンボル追加機能を使います。

今回の現在地アイコンは画像データを使用しており、最初にMapboxMapControllerのaddImage()を使って画像データの読み込みを行います。

読み込んだ画像データとユーザーの位置情報をSymbolOptionsクラスに設定して、addSymbol()することで、地図上の現在地点にアイコンを表示することができます。

1.	// mapboxコントローラ
2.	MapboxMapController _mapController;
3.
4.	// 現在地アイコン(シンボル)
5.	Symbol _vehiclePositionSymbol;
6.
7.	// mapbox地図生成後コールバック
8.	void _onMapCreated(MapboxMapController controller) async {
9.	_mapController = controller;
10.
11.	// 現在地変化コールバック登録
12.	_locationManager.addOnUserLocationChanged(_onUserLocationChanged);
13.
14.	// 現在地取得
15.	var currentLatLng = _locationManager.getLastCurrentLatLng();
16.
17.	// 現在地アイコンの画像を読み込む
18.	final ByteData bytes = await rootBundle.load(‘images/UserIcon.png’);
19.	final Uint8List list = bytes.buffer.asUint8List();
20.	await _mapController.addImage(“UserIcon”, list);
21.
22.	// 現在地アイコン(シンボル)の描画
23.	// 生成したシンボルは地図画面クラスで保持します
24.	_vehiclePositionSymbol = await _mapController.addSymbol(
25.	SymbolOptions(
26.	iconSize: 0.3,
27.	iconImage: “UserIcon”,
28.	iconRotate: _locationManager.getLastCurrentDirection(),
29.	geometry: currentLatLng,
30.	draggable: false,
31.	),
32.	);
33.	}
34.

このように、ユーザーの現在地にアイコンを表示することができました。

次は、ユーザーの移動に合わせて、現在地アイコンの位置情報を更新しようと思います。

そのために、MapboxMapControllerのupdateSymbol()を使用します。

現在地変化のコールバックを受けて、生成時に保持したシンボルの位置と方向を更新しています。

1.	// 現在地変化コールバック
2.	void _onUserLocationChanged() async {
3.	// 位置取得
4.	var currentLatLng = _locationManager.getLastCurrentLatLng();
5.
6.	// 回転方向
7.	var rotateDirection = _locationManager.getLastCurrentDirection();
8.
9.	// 現在地アイコン(シンボル)の更新
10.	_mapController.updateSymbol(
11.	_vehiclePositionSymbol,
12.	SymbolOptions(
13.	iconRotate: rotateDirection,
14.	geometry: currentLatLng,
15.	),
16.	);
17.	}
18.

このように、移動に合わせて現在地アイコンを追従させることができました。

位置情報を取得する方法は様々ありますが、今回は、「location」パッケージを使用して、位置情報を取得しています。

◎ドロワーメニュー

ドロワーメニューの表示

地図画面のメニューを今回は、ドロワーメニューを使って作成することにしました。

Google Flutterは標準でドロワーメニューを提供しています。

ドロワーメニューは、土台となるScaffoldクラスと一緒に説明します。

Scaffoldクラスはアプリ画面のベースとなるクラスです。

各種プロパティに画面部品のWidgetを設定することで、アプリバーやドロワーメニューを持つ標準的なアプリを作ることができます。

ドロワーメニューを表示するには、ScaffoldクラスのdrawerプロパティにDrawerクラスを設定します。

設定するDrawerクラスのchildプロパティに任意のWidgetを設定することで、オリジナルのドロワーメニューが表示可能になります。

【ドロワーサンプル】　※Runボタンを押すことでサンプルを実行できます


import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        drawer: Drawer(
          child: ListView(
            children: <Widget>[
              DrawerHeader(
                child: const Text("Drawer sample"),
                decoration: BoxDecoration(color: Colors.grey[100]),
              ),
            ],
          ),
        ),
        body: const MyAppScreen(),
      ),
    ),
  );
}

@immutable
class MyAppScreen extends StatelessWidget {
  const MyAppScreen({Key? key}) : super(key: key);
  
  @protected
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: const EdgeInsets.all(20),
      child: Stack(
        children: [
          const Center(child: Text("Press the menu button")),
          Align(
            alignment: Alignment.bottomRight,
            child: ElevatedButton(
              child: const Icon(Icons.menu),
              style: ElevatedButton.styleFrom(
                elevation: 6.0,
                shape: const CircleBorder(),
                primary: Colors.grey,
                onPrimary: Colors.white,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            ),
          ),
        ],
      ),
    );
  }
}

サンプルのようにボタン押下をトリガーにドロワーメニューを表示する場合は、ScaffoldStateクラスのopenDrawer()を使用します。

ScaffoldStateクラスの取得など少し複雑ですが、下図の流れでドロワーメニューを表示しています。

ドロワーメニューのカスタム

ドロワーメニューをカスタマイズして、地図のスタイルを変更してみました。

まずは、MapboxMapクラスのstyleStringプロパティに設定する地図スタイルの文字列を保持します。

Drawerに作成したスイッチ(SwitchListTileクラス)のON/OFFで、保持したスタイルの文字列が変更され、地図の見た目が変わります。

1.	Scaffold(
2.	// 右から左にスライドするendDrawerを使用
3.	endDrawer: SizedBox(
4.	width: deviceWidth / 2.5,
5.	child: Drawer(
6.	child: ListView(children: [
7.	DrawerHeader(
8.	child: Text(
9.	’地図画面表示設定’,
10.	style: TextStyle(fontSize: 50),
11.	),
12.	decoration: BoxDecoration(color: Colors.grey[100]),
13.	),
14.	SwitchListTile(
15.	value: _bTrafficInfo,
16.	activeColor: Colors.orange,
17.	activeTrackColor: Colors.red,
18.	inactiveThumbColor: Colors.grey,
19.	inactiveTrackColor: Colors.grey,
20.	secondary: Icon(
21.	Icons.directions_car,
22.	size: 50.0,
23.	),
24.	title: Text(
25.	’交通情報表示’,
26.	style: TextStyle(fontSize: 20),
27.	),
28.	onChanged: _onChangeTrafficInfoSwitch,
29.	),
30.	),
31.	),
32.	),
33.	),
34.

_onChangeTrafficInfoSwitch()はスイッチのON/OFFでコールバックされ、今回は、渋滞フローの表示/非表示のスタイルを切り替えています。

1.	// 交通情報表示変更
2.	void _onChangeTrafficInfoSwitch(bool switchON) {
3.	setState(() {
4.	_bTrafficInfo = switchON;
5.	//スタイルを切り替える
6.	_bTrafficInfo
7.	? _mapStyle = MapboxStyles.TRAFFIC_DAY // 渋滞フローあり
8.	: _mapStyle = MapboxStyles.MAPBOX_STREETS; // 渋滞フローなし
9.	});
10.	}
11.

このように、スイッチのON/OFFに合わせて地図のスタイルを変更することができました。

◎注釈

※1 MapboxMapControllerは地図生成時のコールバック(MapboxMapクラスのonMapCreatedプロパティー)によって渡されます。

　渡されたMapboxMapControllerインスタンスを地図画面クラスで保持しています。

※2 現在地アイコンはmapbox_glのシンボル(アイコン)表示機能を使用しています。

　シンボルはカメラ方位に合わせて、自動的に表示されている向きが変化するため、カメラの表示角度に合わせて、シンボル角度の再設定を行っています

まとめ

mapbox_glとFlutter UIを組み合わせることで、デザイン性の高いカーナビのような画面が作成できたと思います。

Google Flutterを使うことで、少ないコード量で使いやすいUIが利用でき、マルチプラットフォームに即時対応できるというのがとても魅力的だと感じました。

一方でmapbox_glなど情報が少ないところも多く開発に手間取ることもありました。

情報が少ない点については、今後のコミュニティの発展に期待したいと思います。

現在はアプリを発展させて、検索や案内機能を想定した画面を作成中です。

次回のコラムでは、その作成内容についてお伝えしようと思います。

Google Flutterコラム 第4回「Mapbox地図とUIの重ね合わせ」（2/2）