[플러터] 위젯의 크기&위치를 반환받는 법

플러터에서 특정 위젯의 크기와 위치를 반환 받는 방법은 아래와 같다.

 

코드

//GlobalKey를 선언한다.
GlobalKey _viewKey = GlobalKey();

void initState(){
		//Build가 실행되어 위젯이 그려진 후 해당 함수가 실행된다.
	    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _getSize();
    });
}

_getSize(){
	//위젯 key로 RenderBox를 정의한다.
	RenderBox _viewBox = _viewKey.currentContext.findRenderObject();
    Offset offset = _viewBox.localToGlobal(Offset.zero);

	//위젯의 좌표를 반환받는다
    cdx = offset.dx;
    cdy = offset.dy;

	//위젯의 크기를 반환받는다.
    width = _viewBox.size.width;
    height = _viewBox.size.height;
}


Widget build(BuildContext context){
...
//크기를 받고자하는 위젯의 key에 앞서 선언한 GlobalKey를 부여한다.
 return Container(
	key : _viewKey
    ...
)
...

 

설명

플러터에서 위젯의 크기와 위치를 반환받기 위해선 위젯이 먼저 그려져야한다.

위젯이 그려지기 전 크기와 위치 반환을 요청하면 0이 반환된다.

플러터의 LifeCycle은 간단하게 다음과 같다.

 

LifeCycle

1. 클래스에 선언 및 정의된 변수를 읽는다.

2. initState()를 실행한다.

3. build()를 실행해 위젯을 바인딩 및 랜더링한다.

 

따라서, 위젯의 크기를 요청하는 함수는 바인딩이 완료된 후에 정상적으로 작동하므로,

initState나 일반 선언된 변수에 곧바로 반환받을 수 없다.

 

따라서 위젯이 바인딩되면 호출되는 함수를 사용한다.

WidgetsBinding.instance.addPostFrameCallback 이며 initState에서 이를 호출하고

반환 값으로 위젯의 사이즈를 구하는 함수를 호출시키면 바인딩 이후 곧바로 위젯 사이즈를 받을 수 있다.

 

이 함수와 위젯의 사이즈와 크기를 받는 것은 한 세트라고 생각하고 사용하면 된다.

 

응용

앞서 설명한 것처럼, 위젯의 크기와 위치는 위젯이 생성된 이후 반환받을 수 있는데,

위젯의 크기를 확인해 스크린보다 크다면 조절하는 등 크기, 위치를 받아 재 랜더링을 해야하는 경우가 있다.

재 랜더링 하기전의 위젯이 스크린보다 큰 경우 사용자에게 보여지지 않길 원할 것이다.

이 경우 랜더링은 되지만 화면에 보여지지 않도록 Opacity 위젯을 사용하면 된다.

 

 

//위젯의 크기를 받았는지 여부
bool _isLoaded = false;


_getSize(){
...

//위젯의 크기를 반환받았음을 알린다.
setState((){
_isLoaded = true;
//반환받은 위젯의 크기로 다른 위젯의 크기를 결정하는 코드 삽입
});
}
  
  Widget build(BuildContext context){
	        //Opacity는 위젯의 투명도를 조절할 수 있다.
            return Opacity(
                  opacity: _isLoaded ? 1 : 0,

위젯의 사이즈를 아직 받아오지 않았다면 _isLoaded가 false로 opacity가 0으로 위젯이 보이지 않는다.