믹아의 개발일기

flutter 에서 Globalkey 를 이용하여 위젯의 크기와 위치를 구하는 방법.

크기를 구할땐 LayoutBuilder 위젯도 있다. 여기선 GlobalKey 로 구하는 법

베이스 코드

// ...

GlobalKey _redBoxKey = GlobalKey();
GlobalKey _greenBoxKey = GlobalKey();
GlobalKey _blueBoxKey = GlobalKey();


@override
  Widget build(BuildContext context) {

    return Scaffold(
        body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Center(
            child: Container(
              key: _redBoxKey,
              height: 40,
              width: 40,
              color: Colors.red,
            ),
          ),
          Center(
            child: Container(
              key: _greenBoxKey,
              height: 100,
              width: 40,
              color: Colors.green,
            ),
          ),
          Center(
            child: Container(
              key: _blueBoxKey,
              height: 40,
              width: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    ));
    
    
    //...

일단 GlobalKey 를 선언하여 widget 에 key 를 할당해준다. 그 후 진행

1. 크기

// ...

_getSize(GlobalKey key) {
    if (key.currentContext != null) {
      final RenderBox renderBox =
          key.currentContext!.findRenderObject() as RenderBox;
      Size size = renderBox.size;
      return size;
    }
  }
  
// ...

key 를 이용하여 RenderBox 를 구하면 RenderBox에서 size 를 구할 수 있다.

// ...

    final redBoxSize = _getSize(_redBoxKey);
    final greenBoxSize = _getSize(_greenBoxKey);
    final blueBoxSize = _getSize(_blueBoxKey);

    print('red box size : ${redBoxSize.width} ${redBoxSize.height}');
    print('green box size : ${greenBoxSize.width} ${greenBoxSize.height}');
    print('blue box size : ${blueBoxSize.width} ${blueBoxSize.height}');

// ...

//    I/flutter ( 5007): red box size : 40.0 40.0
//    I/flutter ( 5007): green box size : 40.0 100.0
//    I/flutter ( 5007): blue box size : 100.0 40.0

2. 위치

// ...

_getPosition(GlobalKey key) {
    if (key.currentContext != null) {
      final RenderBox renderBox =
          key.currentContext!.findRenderObject() as RenderBox;
      final position = renderBox.localToGlobal(Offset.zero);
      return position;
    }
  }
  
 // ...

크기와 비슷하다. renderBox 의 localToGlobal 함수를 이용한다. 

Offset.zero 즉. 위젯의 좌상단을 기준으로 global 포지션을 구하는 방식이다.

// ...

    final redBoxPosition = _getPosition(_redBoxKey);
    final greenBoxPosition = _getPosition(_greenBoxKey);
    final blueBoxPosition = _getPosition(_blueBoxKey);

    print('red box posiiton : ${redBoxPosition.dx} ${redBoxPosition.dy}');
    print('green box posiiton : ${greenBoxPosition.dx} ${greenBoxPosition.dy}');
    print('blue box posiiton : ${blueBoxPosition.dx} ${blueBoxPosition.dy}');
    
// ...

// I/flutter ( 5007): red box posiiton : 0.0 147.71428571428572 
// x축 확인을 위해 redbox 를 맨 왼쪽으로 붙인 상태이다
// I/flutter ( 5007): green box posiiton : 185.71428571428572 384.8571428571429
// I/flutter ( 5007): blue box posiiton : 155.71428571428572 682.0

python3 버전 기준으로 작성하였습니다.

ipstack api 를 사용하여 사용자의 경도, 위도등을 얻어와보자.

1. https://ipstack.com/ 접속

2. 우측상당 pricing 클릭 

무료사용은 1달에 10,000 번의 requests 가 가능하다.

Get free api key 를 눌러 회원가입하자.

3. 회원 가입이 완료되었다면 우측상당의 Dashboard 를 클릭한다.

자신의 api key 를 볼 수있다. 이제 파이썬으로..

4. 코드 작성

import requests
import json

key = 'your api key'
send_url = 'http://api.ipstack.com/check?access_key=' + key
r = requests.get(send_url)
j = json.loads(r.text)
print(j)

# 경도
lon = j['longitude']

# 위도
lat = j['latitude']
print(lon,lat)

{'ip': 'my ip', 'type': 'ipv4', 'continent_code': 'AS', 'continent_name': 'Asia', 'country_code': 'KR', 'country_name': 'South Korea', 'region_code': '26', 'region_name': 'Busan', 'city': 'Busan', 'zip': '-', 'latitude': '위도', 'longitude': '경도', 'location': {'geoname_id': 1838524, 'capital': 'Seoul', 'languages': [{'code': 'ko', 'name': 
'Korean', 'native': '한국어'}], 'country_flag': 'http://assets.ipstack.com/flags/kr.svg', 'country_flag_emoji': '🇰🇷', 'country_flag_emoji_unicode': 'U+1F1F0 U+1F1F7', 'calling_code': '82', 
'is_eu': False}}

자신의 ip 와 경도 위도를 얻어올 수 있다.

자세한 documentation 은 홈페이지를 참고하자.

https://ipstack.com/documentation