[날씨 App 만들기-3] data 전달 / json data 전달

다른 dart 파일에 설정 data(변수) 전달

1. Class 만들기(my_location.dart)

import 'package:geolocator/geolocator.dart';

class MyLocation {
  double? latitude2;
  double? longitude2;

  // 앱이 실행 8 - await의 경우 Future 함수로 지정
  Future<void> getMyCurrentLocation() async{
    try {
      LocationPermission permission = await Geolocator.requestPermission(); //오류 해결 코드
      // 앱이 실행 7 - Geolocator 를 사용하여 Position 에서 위도와 경도 값을 가져온다.
      Position position = await Geolocator.
      getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

      latitude2 = position.latitude;
      longitude2 = position.longitude;
    } catch(e) {
      print('Error 발생');
    }
  }
}

2. 사용할 Class import (loading.dart)

import 'package:flutter_weather/data/my_location.dart';

3. 인스턴스 생성(loading.dart)

MyLocation myLocation = MyLocation();

4. 생성한 인스턴스에서 메소드 호출(loading.dart)

await myLocation.getMyCurrentLocation();

5. 호출 된 메소드에서 변수로 값을 담아 놓기(my_location.dart)

Future<void> getMyCurrentLocation() async{
    try {
      LocationPermission permission = await Geolocator.requestPermission(); //오류 해결 코드
      // 앱이 실행 7 - Geolocator 를 사용하여 Position 에서 위도와 경도 값을 가져온다.
      Position position = await Geolocator.
      getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
      // latitude2 변수에 position 으로 받은 위도 정보 담기
      latitude2 = position.latitude;
      // longitude2 변수에 position 으로 받은 경도 정보 담기
      longitude2 = position.longitude;
    } catch(e) {
      print('Error 발생');
    }
  }

6. 인스턴스를 활용하여 담겨 있는 변수 불러오기(loading.dart)

void getLocation() async{
  // 앱이 실행 5 - MyLocation 인스턴스 생성(MyLocation 을 사용할 수 있게 된다. 라는 의미)
  MyLocation myLocation = MyLocation();
  // 앱이 실행 6 - MyLocation 내에 있는 getMyCurrentLocation 메소드를 호출
  await myLocation.getMyCurrentLocation();

  // 앱이 실행 8 - MyLocation의 getMyCurrentLocation 메소드에서 설정한
  // 위도(latitude2), 경도(longitude2) 값을
  // Loading 클래스에 있는 위도(latitude3), 경도(longitude3)에 전달한다.
  latitude3 = myLocation.latitude2;
  longitude3 = myLocation.longitude2;

  print('위도 : $latitude3');
  print('경도 : $longitude3');
}

 

전체 소스

import 'package:flutter_weather/data/my_location.dart';

/* loading.dart */
void getLocation() async{
    // 앱이 실행 5 - MyLocation 인스턴스 생성(MyLocation 을 사용할 수 있게 된다. 라는 의미)
    MyLocation myLocation = MyLocation();
    // 앱이 실행 6 - MyLocation 내에 있는 getMyCurrentLocation 메소드를 호출
    await myLocation.getMyCurrentLocation();

    // 앱이 실행 8 - MyLocation의 getMyCurrentLocation 메소드에서 설정한
    // 위도(latitude2), 경도(longitude2) 값을
    // Loading 클래스에 있는 위도(latitude3), 경도(longitude3)에 전달한다.
    latitude3 = myLocation.latitude2;
    longitude3 = myLocation.longitude2;

    print('위도 : $latitude3');
    print('경도 : $longitude3');
  }
  
  /* my_location.dart */
  
  class MyLocation {
  double? latitude2;
  double? longitude2;

  // 앱이 실행 8 - await의 경우 Future 함수로 지정
  Future<void> getMyCurrentLocation() async{
    try {
      LocationPermission permission = await Geolocator.requestPermission(); //오류 해결 코드
      // 앱이 실행 7 - Geolocator 를 사용하여 Position 에서 위도와 경도 값을 가져온다.
      Position position = await Geolocator.
      getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

      latitude2 = position.latitude;
      longitude2 = position.longitude;
    } catch(e) {
      print('Error 발생');
    }
  }
}

 

json data 전달 방법(생성자 사용)

1. 전달 받은 dart에서 생성자를 선언(weather_screen.dart)

class WeatherScreen extends StatefulWidget {
  // 전달받을 변수의 값을 생성자로 설정
  WeatherScreen({this.weatherData});
  final dynamic weatherData;

  @override
  State<WeatherScreen> createState() => _WeatherScreenState();
}

2. 전달 해줄 dart에서 인스턴스 생성 후 생성자를 통하여 데이터 전달(loading.dart)

// 페이지 이동을 하면서 WeatherScreen을 인스턴스 생성 후 jsonData를 생성자를 통하여 전달
Navigator.push(context, MaterialPageRoute(builder: (context) {
  return WeatherScreen(weatherData: jsonData,);
}));

3. 전달 받은 dart에서 initState 메소드를 활용하여 데이터를 변수로 전달(weather_screen.dart)

String? cityName;
double? temp;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  cityName = widget.weatherData['name'];
  temp = widget.weatherData['main']['temp'];
}

 

이번 내용도 코딩셰프 님의 강좌를 보고 직접 실습한 내용을 작성하였습니다. 

감사합니다.

 

출처 및 참고 : https://youtu.be/c1PNEa_eiIM - 플러터(Flutter) 조금 매운맛🌶️ 강좌 14 | 날씨 앱(weather app) 만들기 3