Flutter入門

【5分で分かる】GeoLocationで位置情報を取得する方法 | Flutter入門


ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事は、Flutterで位置情報を取得する方法について解説します。

想定読者

Flutterで位置情報を取得したい方

今回のソースコードは以下で公開されています。

https://github.com/kimuson/geolocator_demo

Flutterで位置情報を取得する方法

GeoLocationを使いましょう!

GeoLocationとは、ネイティブアプリのGPS情報へのアクセスをサポートしてくるライブラリパッケージです。

GeoLocationを使えば、

  • 現在の位置情報の取得
  • 位置情報の継続的なトラッキング
  • デバイスの位置情報サービスが有効になっているかの確認
  • 2つの地理座標間の距離(メートル単位)を計算
  • 2つの地理座標間の方位を計算

などの機能を利用することが可能です。

参考:geolocator | Flutter Package – Pub.dev

実際にGeoLocationを使ってみる

今回はGeoLocationを使用して、現在位置の情報を取得してみましょう。

GeoLocationの導入

pubspec.ymlに以下を追記してください。

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^8.2.0 #追加

位置情報の取得許可設定

こちらは各OSごとに設定する必要があります。

iOSの場合

以下をInfo.plistファイル(ios / Runnerの下にあります)に追加してください。

<key>NSLocationWhenInUseUsageDescription</key> <string>This app needs access to location when open.</string> <key>NSLocationAlwaysUsageDescription</key> <string>This app needs access to location when in the background.</string>
Androidの場合

「gradle.properties」ファイルに以下を追加

android.useAndroidX=true android.enableJetifier=true

「android / app /build.gradle」ファイルのcompileSdkVersionが31に設定していることを確認してください。

android {
   compileSdkVersion 31
 
   ... }

実装してみる

main.dartを以下の内容に変更してください。

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _location = "";

  Future<void> getLocation() async {
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    setState(() {
      _location = position.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_location',
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getLocation,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
重要なポイント
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);

getCurrentPosition()を使用することにより現在地の位置情報を取得することができます。

まとめ:Flutterなら位置情報を簡単に取得できます!

いかがだったでしょうか?思ったより位置情報が簡単に取れますよね?

緯度と経度が取れればグーグルMapAPIなどをつかって現在位置を可視化することも可能なのでぜひやってみてください。

今回のソースコードは以下で公開されています。

https://github.com/kimuson/geolocator_demo

最新のFlutterの勉強方法 まとめ

Flutterを入門から実践レベルまで一通り学習できる方法をまとめました。

Flutterの勉強方法を知る

Flutterを動画で学習する

Flutterを書籍で学習する