[Flutter] 위젯트리와 Buildcontext

1.위젯트리

Flutter의 모든 UI는 위젯으로 이루어진다. 위젯들은 부모 , 자식관계로 연결되어 트리(Tree)형태를 이룬다.

앱 전체는 루트위젯(MaterialApp)부터 시작하며, Scaffold > Column > Text 같은 구조로 구성된다.

위젯트리는 상태가 바뀌면 해당 위젯만 재빌드되어 효율적이다.

요약하자면 위젯트리는 Flutter 앱릐 기본 구조이자 화면 랜더링의 기본 단위다.

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Hello')),
    body: Column(
      children: [
        Text('Widget Tree 예시'),
        ElevatedButton(onPressed: () {}, child: Text('버튼'))
      ],
    ),
  ),
);

 

2.화면에 그려지는 과정

①	Widget Tree	개발자가 선언한 구조 (코드)
②	Element Tree	위젯의 실제 인스턴스 관리 (위치, 관계)
③	RenderObject Tree	크기, 위치, 페인팅 정보 관리
④	Layout → Paint → Display	실제 픽셀로 그리는 과정

 

Flutter는 Widget → Element → RenderObject의 3단계 트리 구조를 통해 화면을 그린다.

 

 

3.BuildContext

BuildContext는 현재 위젯이 트리 내에서 어디에 있는지를 나타내는 주소표이다.

부모위젯의 데이터(예: Theme,MediaQuery)를 탐색하고 Navigator,Scaffold 등 상위 위젯 접근에 필요하다.

요약 - BuildContext는 위젯의 위치 정보를 담고 있어, 상위 위젯의 데이터나 기능에 접근할 때 사용된다

Widget build(BuildContext context) {
  final color = Theme.of(context).primaryColor;
  return Text('Hi', style: TextStyle(color: color));
}

// BuildContext 테스트
class ContextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print(context.widget); // 현재 위젯의 정보 출력
    return const Text('Hello Context');
  }
}