위젯 트리 (Widget Tree): Flutter 앱의 뼈대 이해

 

🌳 위젯 트리(Widget Tree)

Flutter에서 화면에 표시되는 모든 요소는 "위젯"으로 구성되어 있고,
이 위젯들이 부모-자식 관계를 이루며 트리(Tree) 구조로 연결된 것을 "위젯 트리"라고 합니다.

 

즉, Flutter 앱은 하나의 큰 위젯이 작은 위젯을 품고,

그 작은 위젯이 또 더 작은 위젯을 품는 방식으로 구성됩니다.

 

🔍 예시 코드로 확인

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp( // 최상위 부모 위젯
      home: Scaffold( // 화면 뼈대
        appBar: AppBar(title: Text('위젯 트리 예시')),
        body: Center( // 중앙 정렬
          child: Column( // 세로 정렬
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('안녕하세요!'),
              ElevatedButton(onPressed: () {}, child: Text('버튼'))
            ],
          ),
        ),
      ),
    );
  }
}

 

↑ 위 코드는 ↓ 이렇게 생긴 트리 구조입니다.  

MaterialApp
└── Scaffold
    ├── AppBar
    │   └── Text
    └── Center
        └── Column
            ├── Text
            └── ElevatedButton
                └── Text

 

ㄴ 하나의 위젯 안에 또 다른 위젯들이 들어가고,

    이 구조가 마치 나무처럼 뻗어 나간다해서 '트리'라고 부릅니다.

 

🌳 위젯트리 중요성

1. UI 구조화: 복잡한 화면도 쉽게 설계

 

2. 어떤 위젯이 어떤 역할을 하는지 파악 가능

   ㄴ AppBar, Column, Text 등의 위치와 관계 이해

 

3. 디버깅 편의성: 어떤 위젯에서 문제가 생겼는지 확인에 도움

 

Flutter에서는 Flutter Inspector 도구를 통해
현재 앱의 위젯 트리를 시각적으로 확인할 수 있습니다.