[flutter 2.0] 13~14강 | 날씨앱 만들기 01

✅ 날씨앱 만들기

이번 포스팅에서는 전부 다 강의를 듣지 않고 중간에 우선 스탑하기로!

lib 파일

✅ my_location.dart

import 'package:geolocator/geolocator.dart';

class MyLocation {
  double latitude2;
  double longitude2;

  Future<void> getMyCurrentLocation() async{
    try {
      Position position = await Geolocator.getCurrentPosition( // 위치와 경도 가져온다.
          desiredAccuracy: LocationAccuracy.high);
      latitude2 = position.latitude;
      longitude2 = position.longitude;

      print(position);
      print(latitude2);
      print(longitude2);
    } catch (e) {
      print("API 연결에 문제가 발생했습니다.");
    }
  }
}

내 위치를 불러오는건 Future 객체로 감싸야 한다. 네트워크 통신이 딱 하고 바로 되는게 아니기 때문에

 

 

✅ network.dart

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

class Network {
  final String url;
  Network(this.url);

  Future<dynamic> getJsonData() async {
    http.Response response = await http.get(
       url);
    print(response.body);
    if (response.statusCode == 200) {
      String jsonData = response.body;
      var parsingData = jsonDecode(jsonData);
      return parsingData;
    }
  }
}

여기서는 api호출을 통해 받아온 것을 파싱해서 리턴해주는 코드이다.

 

✅ loading.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:weather_app/data/my_location.dart';
import 'package:weather_app/data/network.dart';
const apiKey = 'your apikey ' ;

class Loading extends StatefulWidget {
  @override
  _LoadingState createState() => _LoadingState();
}

class _LoadingState extends State<Loading> {

  double latitude3; // 위도
  double longitude3; // 경도

  @override
  void initState() {
    // TODO: implement initState
    getLocation();
    //fetchData();
  }

  void getLocation() async {
    MyLocation myLocation = MyLocation();
    await myLocation.getMyCurrentLocation();
    latitude3 = myLocation.latitude2;
    longitude3 = myLocation.longitude2;
    print(latitude3);
    print(longitude3);

    Network network = Network('https://api.openweathermap.org/data/2.5/weather?lat=$latitude3&lon=$longitude3&appid=$apiKey');

    var weatherData = await network.getJsonData();
    print(weatherData);
   /* Navigator.push(context, MaterialPageRoute(builder: (context) {
      return WeatherScreen();
    }));*/

  }

  /*void fetchData() async {
    http.Response response = await http.get(
        'https://samples.openweathermap.org/data/2.5/weather?q=London&appid=b1b15e88fa797225412429c1c50c122a1');
    print(response.body);
    if (response.statusCode == 200) {
      String jsonData = response.body;
      var parsingData = jsonDecode(jsonData);
      var myjson = parsingData['weather'][0]['description'];
      print(myjson);

      var wind = parsingData['wind']['speed'];
      print(wind);

      var id = parsingData['id'];
      print(id);
    } else {
      print(response.statusCode);
    }
  }*/

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              getLocation();
            },
            child: Text(
              'Get my location',
              style: TextStyle(color: Colors.white),
            ),
            style: ElevatedButton.styleFrom(primary: Colors.orangeAccent)),
      ),
    );
  }
}

파싱해서 받아온 데이터를 여기서는 컨트롤하고 확인하는 부분이다.

 

✅ API키가 빠져 있으니까 아래 사이트 들어가서 사용할 것

https://openweathermap.org/

Сurrent weather and forecast - OpenWeatherMap

 

 

✅ 일단 플러터는 여기까지 보고 스위프트에 조금 더 집중하도록하자.

플러터도 나쁘지 않은데 스위프트가 한 2천만배쯤 더 재미있어서... 스위프트로 다시 돌아가야겠다.

스위프트 처럼 재미있는게 어디있을까 ㅠㅠ 너무 잘맞아서 내일부터 다시 스위프트 화이팅