[Flutter]httpを使ってAPIと通信する（データ取得編）

投稿の経緯

最近Flutterの勉強を始めたので記事にしていきます。
まずはAPI通信はできるようになりたかったので、今回はhttpを使ってみました。

類似する人気ライブラリであるdioと迷ったんですが、利用者数が若干httpの方が多かったので今回はhttpを使っています。

使用したAPI↓

環境

Flutter version：3.7.3
Dart version：2.19.2
IDE：Android Studio

httpとは

Dartの標準ライブラリ。
これを使うことでAPIから簡単にデータを取得することができます。

httpを導入する

コマンドを実行してhttpを追加する

$ flutter pub add http                      

これによりpubspec.yamlに以下のコードが追加されます。

dependencies:
  http: ^0.13.5

次に追加したライブラリを取得する

$ flutter pub get             

取得したらhttpを使うファイルでimportを書きます

import 'package:http/http.dart' as http;

これでhttpをアプリで使うことができるようになります。（もしimportできない場合は Android Studio を再起動してみてください）

APIと通信してみる

データを取得する関数を用意する

.dart

void get() async {
    const lat = '35.65138';
    const lon = '139.63670';
    const key = 'xxxxx'; // この記事ではkeyを隠しています

    const domain = 'https://api.openweathermap.org';
    const pass = '/data/2.5/onecall';
    const query = '?lat=$lat&lon=$lon&exclude=daily&lang=ja&appid=$key';

    var url = Uri.parse(domain + pass + query);
    debugPrint('url: $url');
    var response = await http.get(url);
    debugPrint('statusCode: ${response.statusCode}');
    debugPrint('response: ${response.body}');
}

取得結果

response: {
    "lat":35.6514,
    "lon":139.6367,
    "timezone":"Asia/Tokyo",
    "timezone_offset":32400,
    "current":{
        "dt":1678618031,
        "sunrise":1678568265,
        "sunset":1678610717,
        "temp":288.71,
        "feels_like":288.12,
        "pressure":1022,
        "humidity":69,
        "dew_point":283.05,
        "uvi":0,
        "clouds":75,
        "visibility":10000,
        "wind_speed":4.63,
        "wind_deg":160,
        "weather":[
            {
                "id":803,
                "main":"Clouds",
                "description":"曇りがち",
                "icon":"04n"
            }
        ]
    }
}

データを取得することができました！

おわりに

最後までご覧いただきありがとうございます！

今回はhttpを使ってAPIからデータを取得しました。
次回は取得したデータを使ってレイアウトを作成したいと思います。