[flutter] 플러터 BuildContext 와 of 메소드

buildContext에 대해 알아보고, of 메소드를 사용해서 Element 트리를 탐색하는 방법을 알아보도록 하겠습니다.

---

BuildContext

플러터에서 자주 사용되는 메소드중 하나는 build입니다. build메소드의 인수에 BuildContext를 가지고 있습니다.

build메소드에서 인수로 받는 BuildContext

'context'란 문맥이란 의미입니다. 'context'는 그 대상이 놓인 전후 관계나 환경이나 조건 등의 문맥을 가리키고 있습니다. 그렇다면 Flutter에서 문맥은 무엇을 가리키는 걸까요? 결론을 말하자면 Widget 트리의 부모와 자식 관계가 됩니다. 다시 말해 'context'는 부모 Element에 대한 참조입니다.

 

of 메소드, 부모 위젯 찾기

현재 위젯에서 조상 위젯으로 거슬로 올라가고 싶을 때가 있습니다. 이럴 때 사용할 수 있는 것이 Scaffold나 Theme의 of 메소드가 됩니다. of 메소드를 사용하면 context에서부터 조상쪽으로 가장 가까운 Widget을 찾는 것이 가능합니다. 이걸 사용해서 전체 설정의 취득이나 변경을 하는것이 가능해집니다.

*Scaffold.of 의 경우는 ScaffoldState, Theme.of의 경우 ThemeData가 반환됩니다.

of 를 사용해서 화면의 너비(width)와 높이(height) 가져오기

final sizeX = MediaQuery.of(context).size.width;
final sizeY = MediaQuery.of(context).size.height;

 

Scaffold.of 의 주의점

Scaffold.of에는 하나의 주의점이 있습니다. Scaffold의 정의와 Scaffold.of를 사용하는 곳이 동일한 build 메소드에 있는 경우는 잘 찾을 수가 없게 됩니다.

그 이유는 of메소드가 build를 호출하는 widget으로부터 조상을 찾아가기 때문입니다. 그래서 Scaffold는 자식이기 때문에 찾지 못하는 것입니다. 따라서 이런 경우는 Builder를 사용해서 찾는 것이 일반적으로 사용됩니다.

Builder의 사용 예

class HelloScrren extends StatelessWidget {
  const HelloScrren({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('test')),
      body:  Builder(
        builder: (BuildContext context) {
          return Center(
            child: ElevatedButton(
              child: const Text('snackbar'),
              onPressed: () {
                Scaffold.of(context).showSnackBar(const SnackBar(
                  content: Text('안녕!'),
                ));
              },
            ),
          );
        }
      )
    );
  } 
}

---

​

여기까지 읽어주셔서 감사합니다.