통조림

Flutter - Build Context 본문

Software/Flutter

Flutter - Build Context

고랭지참치 2021. 6. 29. 00:24

플러터 document에 적혀진 Build Context 정보를 보면

"A handle to the location of widget in the widget tree"

위젯 트리에서 현재 위젯의 위치를 알 수 있는 정보.

트리 구조상에서 위젯의 현 위치를 파악할 수 있도록 돕는 정보가 context안에 담겨져 있다.

 

"Each widgets has its own BuildContext, which becomes the parent of the widget returned by the StatelessWidget. build or State.build function."

이 BuildContext는 stateless위젯이나 state빌드 메서드에 의해서 리턴된 위젯의 부모가 된다. >>부모의 컨텍스트를 물려받는다.

등의 내용을 확인할 수 있다.

 

플러터는 기본적으로 트리형 구조로 이루어져 있으며 위젯마다 갖고 있는 context는 자기 자식에게 전달된다. 위젯에서 리턴되는

Scaffold와 같은 위젯들은 인수로 전달되는 context 정보를 통해 트리 안에서 자신의 위치를 알고 있게 된다.

 

something.of(context)와 같은 문법은 트리구조를 따라 올라가면서 가장 가까이 있는 something을 반환하라는 의미를 가진다. 

하지만 찾고 있는 something이 현재 위치를 제외한 상위 트리에서 발견되지 않는다면 플러터는 에러를 표시한다.

 

만약 현재위치 트리에 있는 something 위젯을 사용하고 싶다면

builder위젯을 사용하여 새로운 트리구조를 생성하고 그 안에 something.of(context)를 배치하여 처리할 수 있다.

 

 

 

(아래) 실제 코드

class Page extends StatelessWidget{
	@override
    Widget build(BuildContext context){
        return Scaffold(
            body: FlatButton(
            	child: Text("snack Bar"),
                onPressed(){
                	Scaffold.of(context).showSnackBar(SnackBar(
                    	content:Text("Show Snack Bar"),
                    ));
                }
            ),
        ),
    }
}

(위) 만약 위 코드와 같이 작성하였고 Page클래스의 상위 트리에 Scaffold가 존재하지 않는다면 플러터는 에러를 출력한다.

 

 

class Page extends StatelessWidget{
	@override
    Widget build(BuildContext context){
        return Scaffold(
            body: Center(
            //빌더 위젯을 사용해 새로운 트리 생성
              Builder(builder : (BuildContext context){
              return FlatButton(
            	child: Text("snack Bar"),
                onPressed(){
                	Scaffold.of(context).showSnackBar(SnackBar(
                    	content:Text("Show Snack Bar"),
                    ));
                }
              }),
            ),
          
        ),
    }
}

(위) 해결방법 중 하나는 Builder 위젯을 사용하여 새로운 트리를 생성하고 그 안에서 Scaffold.of(context)를 사용하여 Page 클래스의 build가 리턴하는 Scaffold를 사용할 수 있도록 한다.

 

다른 방법은 아예 새로운 클래스를 생성하여 그 안에서 빌드 위젯을 생성하고, 클래스의 리턴을 참조하는 방식이 있다.

 

참고 영상 - 유튜브 '코딩셰프'

https://www.youtube.com/watch?v=o-HpnWhI70U&list=PLQt_pzi-LLfpcRFhWMywTePfZ2aPapvyl&index=17