😊

# 現在地の天気情報の取得

2023/05/16に公開

Flutter

天気情報をアプリへ導入

私がリリースしているアプリに「現在地の天気情報の取得」を実装してみたのでその忘備録として記録に残しておきます。

※こちらのアプリは下記からダウンロードできます
iOS:

Android:

必要パッケージのインストール

flutter pub add geocoding

flutter pub add geolocator

flutter pub add weather

https://pub.dev/packages/weather

geolocator iOS用設定

ios/Runner/info.plist

<!-- dictタグ内の追記する部分のみ抜粋-->
<key>NSLocationWhenInUseUsageDescription</key>
<string>ロケーション情報を利用する理由を記載</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>ロケーション情報を利用する理由を記載</string>

geolocator Android用設定

android/app/src/main/AndroidManifest.xml

<!-- package="com.example.gps"の部分は作成したプロジェクトのままで構いません -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.gps">
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  <application>
    <!-- 省略 -->
  </application>
</manifest>

android/app/build.gradle

// 変更点のみ抜粋
compileSdkVersion 33

OpenWeatherMAP API の登録とAPIキーの取得

OpenWeatherMAP APIにてAPIキーの取得を行う

実際のコード

main.dart

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geocoding/geocoding.dart' as geoCoding;
import 'package:weather/weather.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'GPS Weather API'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  //現在地取得のための変数
  double _latitude = 0.0;
  double _longitude = 0.0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getWeather,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
  //位置情報取得のためのメソッド
  //https://zenn.dev/kazutxt/books/flutter_practice_introduction/viewer/23_chapter3_gps

  Future<void> getLocation() async {
    // 権限を取得
    LocationPermission permission = await Geolocator.requestPermission();
    // 権限がない場合は戻る
    if (permission == LocationPermission.denied ||
        permission == LocationPermission.deniedForever) {
      print('位置情報取得の権限がありません');
      return;
    }
    // 位置情報を取得
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    setState(() {
      // 北緯がプラス、南緯がマイナス
      _latitude = position.latitude;
      // 東経がプラス、西経がマイナス
      _longitude = position.longitude;
      print('現在地の緯度は、$_latitude');
      print('現在地の経度は、$_longitude');
    });
    //取得した緯度経度からその地点の地名情報を取得する
    final placeMarks =
        await geoCoding.placemarkFromCoordinates(_latitude, _longitude);
    final placeMark = placeMarks[0];
    print("現在地の国は、${placeMark.country}");
    print("現在地の県は、${placeMark.administrativeArea}");
    print("現在地の市は、${placeMark.locality}");
    // setState(() {
    //   Now_location = placeMark.locality ?? "現在地データなし";
    //   ref.read(riverpodNowLocation.notifier).state = Now_location;
    //   print('現在地は、$Now_location');
    // });
  }

  //天気情報を取得するためのメソッド
  //https://qiita.com/YoxMox/items/e29caf6ae8df2e55f0c4
  void getWeather() async {
    // 権限を取得
    LocationPermission permission = await Geolocator.requestPermission();
    // 権限がない場合は戻る
    if (permission == LocationPermission.denied ||
        permission == LocationPermission.deniedForever) {
      print('位置情報取得の権限がありません');
      return;
    }
    //エラー処理
    //https://eda-inc.jp/post-5028/#anchor-try-catch
    try {
      await getLocation();
      //https://api.openweathermap.org/data/2.5/weather?q=$location&appid=0651339b01382e4be760cc07ca9d8708
      //自身のAPIキーを入力
      String key = "";
      // double lat = 33.5487; //latitude(緯度)
      // double lon = 130.4629; //longitude(経度)
      double lat = _latitude; //latitude(緯度)
      double lon = _longitude; //longitude(経度)
      WeatherFactory wf = new WeatherFactory(key);

      Weather w = await wf.currentWeatherByLocation(lat, lon);

      print('天気情報は$w');
      print('天気は、${w.weatherMain}');
      print('天気(詳細)は、${w.weatherDescription}');
      print('気温は、${w.temperature}');
      print('体感温度は、${w.tempFeelsLike}');
      print('取得時間は、${w.date}');
      // print('天気情報2は$_data');
      // print('天気情報3は${ref.watch(weatherAPIdate)}');
    } catch (e) {
      //exceptionが発生した場合のことをかく
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            backgroundColor: Colors.grey[100],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
            // addBookToFirebase()のthrowで定義した文章を
            // e.toString()を使って表示している。
            title: AutoSizeText(
              '位置情報が取得できません！',
              style: TextStyle(
                  decoration: TextDecoration.underline,
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                  color: Colors.pinkAccent),
              minFontSize: 10,
              maxLines: 8,
              overflow: TextOverflow.ellipsis,
            ),
            content: const AutoSizeText(
              '本アプリの位置情報の利用を許可して下さい',
              style: TextStyle(
                fontSize: 12.0,
              ),
              minFontSize: 10,
              maxLines: 8,
              overflow: TextOverflow.ellipsis,
            ),

            actions: <Widget>[
              ElevatedButton(
                child: Text('Close'),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
}

天気情報をアプリへ導入

必要パッケージのインストール

geolocator iOS用設定

geolocator Android用設定

OpenWeatherMAP API の登録とAPIキーの取得

実際のコード

Discussion