[Flutter] BuildContext ?

BuildContext 정의

1. 위젯 트리에서 현재 위젯의 위치를 알 수 있는 정보
2. BuildContext는 StatelessWidget.Build 나 State.build 빌드 메서드에 의해 리턴된 위젯의 부모가 된다.

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

말 그대로 여기서 말하는 위치는, 해당 위젯의 실제 위치를 말한다. 만약 페이지가 이동하거나 한다면, 이 context를 사용하게 되는 것이다.

2. BuildContext는 StatelessWidget.Build 나 State.build 빌드 메서드에 의해 리턴된 위젯의 부모가 된다.

class MyPage extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Scaffold(
        ....
        );
    }
}

즉, 위와 같은 코드가 있을 때, Scaffold 위젯은 부모인 MyPage의 Context를 그대로 물려받는다. 따라서, Scaffold의 위치에 대한 정보는 알 수 없다.

만약 Scaffold의 위치에 대한 정보가 필요하다면, scaffold 위젯 아래에서 build 메소드를 통해 context를 받는다면, 부모인 scaffold의 context도 가져올 수 있다.

※ Scaffold.of(context)

이 메소드는 context에서 가장 가까운 Scaffold 위젯을 찾아서 가져온다. Snackbar 같은 위젯은 Scaffold 아래에 그려져야 하기 때문에, 이 메소드가 무조건 사용된다.

이 of라는 메소드는 Scaffold 뿐만 아니라 XXX.of 로 사용할 수 있다
ex) Theme.of(context)

위의 코드에서 Scaffold 아래에 snackBar를 생성하게 된다면, 아래와 같이 된다.

class MyPage extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Scaffold(
        	....
        	body: Center(
            	child: FlatButton(
                ....
                onPressed: () {
                	Scaffold.of(context).showSnackBar(SnackBar(
                    	context: Text('Hellow'),
                    ))
                };
        	)
        );
    }
}

하지만 이 코드는 실행되지 않는다. 왜냐하면 위에서 설명한대로 이때 사용된 context는 부모인 MyPage 위치를 갖고 있기 때문에, Scaffold에 대한 위치를 알 수 없기 때문이다. 아래 그림 참고...

이를 해결하기 위해 위에서 말한대로, body부분에 바로 위젯이 아닌 build 함수를 사용한다. 이 때 context 변수 명은 위와 헷갈리지 않도록 ctx 로 변경하였다.
그 후, Scaffold.of(context) -> Scaffold.of(ctx)로 변경하면, 잘 동작하는 것을 확인할 수 있다.

class MyPage extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Scaffold(
        	....
        	body: Builder((BuildContext ctx) {
            	Center(
            		child: FlatButton(
                	....
                	onPressed: () {
                		Scaffold.of(ctx).showSnackBar(SnackBar(
                   	 	context: Text('Hellow'),
                    	));
                	},
        		),
            })
        );
    }
}