Flutter 튜토리얼 73편: Widget Inspector

Why#

NOTE

Widget Inspector는 코드와 실제 렌더링 결과를 연결해 줍니다. 화면에 보이는 요소가 어떤 위젯인지, 그 위젯의 속성은 무엇인지 바로 확인할 수 있습니다.

복잡한 레이아웃 문제를 해결할 때 가장 먼저 사용해야 하는 도구입니다.

What#

NOTE

Widget Inspector는 세 가지 주요 영역으로 구성됩니다.

1
┌───────────────────────────────────────────────────────────────┐
2
│ 툴바: [Select] [Refresh] [Slow Animations] [Paint Baselines]  │
3
├─────────────────────────────┬─────────────────────────────────┤
4
│                             │                                 │
5
│      위젯 트리               │      위젯 상세 정보              │
6
│      (Widget Tree)          │      (Widget Details)           │
7
│                             │                                 │
8
│  ▼ MyApp                    │  Type: Container                │
9
│    ▼ MaterialApp            │  Size: 200.0 x 100.0            │
10
│      ▼ Scaffold             │                                 │
11
│        ▼ AppBar             │  Properties:                    │
12
│        ▼ Body               │    color: blue                  │
13
│          ▼ Center           │    padding: EdgeInsets.all(8)   │
14
│            Container ◀───── │                                 │
15
│                             │  Constraints:                   │
16
│                             │    BoxConstraints(0.0<=w<=...   │
17
│                             │                                 │
18
└─────────────────────────────┴─────────────────────────────────┘

영역	설명
툴바	위젯 선택, 새로고침, 시각화 옵션
위젯 트리	앱의 위젯 계층 구조
위젯 상세 정보	선택한 위젯의 속성, 크기, 제약 조건

How#

TIP

Widget Inspector 열기

1. 앱을 디버그 모드로 실행합니다.
2. DevTools를 엽니다.
3. “Flutter Inspector” 탭을 선택합니다.

위젯 트리 탐색하기

위젯 트리에서 위젯을 클릭하면 해당 위젯의 상세 정보가 오른쪽 패널에 표시됩니다.

1
▼ Scaffold
2
  ▶ AppBar (접힘)
3
  ▼ Center (펼침)
4
    ▼ Container
5
      Text

• ▼: 하위 위젯이 펼쳐진 상태
• ▶: 하위 위젯이 접힌 상태

위젯 검색하기

트리 상단의 검색창에서 위젯 이름을 검색할 수 있습니다.

1
검색: "Container"
2
결과: 3개의 Container 위젯 발견

앱에서 직접 위젯 선택하기

툴바의 “Select Widget Mode” 버튼을 클릭하면 앱 화면에서 직접 위젯을 선택할 수 있습니다.

1. “Select Widget Mode” 버튼(포인터 아이콘)을 클릭합니다.
2. 앱 화면에서 분석하고 싶은 UI 요소를 탭합니다.
3. 해당 위젯이 트리에서 강조되고 상세 정보가 표시됩니다.

코드로 이동하기

위젯 트리에서 위젯을 더블클릭하면 해당 위젯이 정의된 소스 코드로 이동합니다.

Watch out#

WARNING

Widget Inspector 사용 시 주의사항입니다.

트리와 코드의 차이:

• 위젯 트리는 실제 렌더링되는 모든 위젯을 보여줍니다.
• 코드에서 작성한 위젯 외에도 내부적으로 생성되는 위젯이 많습니다.

1
// 코드에서는 간단해 보이지만
2
Text('Hello')
3

4
// 위젯 트리에서는 여러 위젯으로 구성됨
5
// Text > RichText > RawText > ...

성능 영향:

• Widget Inspector가 열려 있으면 앱 성능에 약간의 영향을 줄 수 있습니다.
• 성능 측정 시에는 Inspector를 닫는 것이 좋습니다.

결론: Widget Inspector로 위젯 트리를 시각적으로 탐색하고 문제를 빠르게 찾을 수 있습니다.

Why#

NOTE

Row, Column, Flex 같은 레이아웃 위젯은 여러 속성이 상호작용하며 복잡한 레이아웃을 만듭니다. 레이아웃 익스플로러³는 이러한 Flex 기반 레이아웃을 시각적으로 분석합니다.

코드에서 mainAxisAlignment, crossAxisAlignment 같은 속성을 바꿔가며 테스트하지 않아도 됩니다.

What#

NOTE

레이아웃 익스플로러는 Flex 위젯(Row, Column, Flex)을 선택했을 때 나타납니다.

graph TD A[Flex 위젯 선택] --> B[레이아웃 익스플로러 활성화] B --> C[축 시각화] B --> D[자식 위젯 배치] B --> E[속성 조절 UI]

표시 정보	설명
Main Axis	주 축 방향 및 정렬
Cross Axis	교차 축 방향 및 정렬
자식 크기	각 자식의 실제 크기
Flex Factor	Expanded/Flexible의 flex 값
여백 공간	남는 공간 표시

How#

TIP

레이아웃 익스플로러 사용하기

1. Widget Inspector에서 Row, Column, 또는 Flex 위젯을 선택합니다.
2. 상세 정보 패널에서 “Layout Explorer” 섹션을 확인합니다.

1
┌──────────────────────────────────────┐
2
│          Layout Explorer              │
3
├──────────────────────────────────────┤
4
│                                      │
5
│  Main Axis: horizontal →             │
6
│  [start] [center] [end] [spaceBetween]│
7
│                                      │
8
│  ┌────┐  ┌────────┐  ┌────┐         │
9
│  │ A  │  │   B    │  │ C  │         │
10
│  │50px│  │ flex:2 │  │50px│         │
11
│  └────┘  └────────┘  └────┘         │
12
│                                      │
13
│  Cross Axis: stretch                  │
14
│  [start] [center] [end] [stretch]    │
15
│                                      │
16
└──────────────────────────────────────┘

실시간 속성 변경

레이아웃 익스플로러에서 정렬 옵션을 클릭하면 앱에 바로 반영됩니다.

예를 들어 Row의 mainAxisAlignment를 변경하려면:

1. Row 위젯을 선택합니다.
2. Layout Explorer에서 “spaceBetween”을 클릭합니다.
3. 앱 화면에서 즉시 변경을 확인합니다.
4. 원하는 설정을 찾으면 코드에 적용합니다.

Flex 요소 분석

1
Row(
2
  children: [
3
    Container(width: 50, color: Colors.red),
4
    Expanded(
5
      flex: 2,
6
      child: Container(color: Colors.blue),
7
    ),
8
    Expanded(
9
      flex: 1,
10
      child: Container(color: Colors.green),
11
    ),
12
  ],
13
)

레이아웃 익스플로러에서 표시되는 정보:

자식	타입	Flex	실제 크기
Container	고정 크기	-	50px
Container	Expanded	2	200px
Container	Expanded	1	100px

오버플로우 문제 분석

오버플로우가 발생하면 레이아웃 익스플로러에서 원인을 파악할 수 있습니다.

1
// 오버플로우 발생 예시
2
Row(
3
  children: [
4
    Container(width: 200),
5
    Container(width: 200),
6
    Container(width: 200),  // 화면 너비 초과
7
  ],
8
)

레이아웃 익스플로러에서:

• 각 자식의 크기 합계와 사용 가능한 공간을 비교합니다.
• 오버플로우된 픽셀 수가 표시됩니다.
• Expanded 또는 Flexible로 변경할 위젯을 파악합니다.

Watch out#

WARNING

레이아웃 익스플로러의 한계입니다.

지원 위젯:

• Row, Column, Flex 위젯에서만 동작합니다.
• Stack, GridView, CustomMultiChildLayout 등은 지원하지 않습니다.

실시간 변경의 한계:

• Inspector에서 변경한 값은 앱에 즉시 반영되지만 코드에는 반영되지 않습니다.
• 원하는 설정을 찾으면 코드에 직접 적용해야 합니다.

1
// Inspector에서 찾은 설정을 코드에 적용
2
Row(
3
  mainAxisAlignment: MainAxisAlignment.spaceBetween,  // 직접 추가
4
  children: [...],
5
)

결론: 레이아웃 익스플로러로 Flex 레이아웃 문제를 시각적으로 분석하고 해결할 수 있습니다.

Why#

NOTE

복잡한 레이아웃에서는 각 위젯의 경계나 정렬 기준선이 어디인지 파악하기 어렵습니다. 시각화 옵션을 켜면 위젯의 경계, 패딩, 마진 등을 화면에서 직접 확인할 수 있습니다.

디자인 의도대로 레이아웃이 구성되었는지 검증할 때 유용합니다.

What#

NOTE

Widget Inspector는 여러 시각화 옵션을 제공합니다.

옵션	설명	사용 시점
Slow Animations	애니메이션 속도 감소	애니메이션 디버깅
Show Guidelines	정렬 가이드라인 표시	정렬 확인
Show Baselines	텍스트 기준선 표시	텍스트 정렬 확인
Highlight Repaints	다시 그려지는 영역 표시	성능 최적화
Highlight Oversized Images	과도하게 큰 이미지 표시	이미지 최적화

How#

TIP

시각화 옵션 활성화하기

Widget Inspector 툴바에서 원하는 옵션의 버튼을 클릭합니다. 또는 코드에서 프로그래밍 방식으로 활성화할 수 있습니다.

1
import 'package:flutter/rendering.dart';
2

3
void main() {
4
  // 레이아웃 경계 표시
5
  debugPaintSizeEnabled = true;
6

7
  // 기준선 표시
8
  debugPaintBaselinesEnabled = true;
9

10
  // 포인터 영역 표시
11
  debugPaintPointersEnabled = true;
12

13
  runApp(const MyApp());
14
}

Slow Animations

애니메이션을 5배 느리게 재생합니다.

1
// 코드에서 활성화
2
import 'package:flutter/scheduler.dart';
3

4
timeDilation = 5.0;  // 5배 느리게

복잡한 애니메이션의 각 단계를 분석할 때 유용합니다.

Show Guidelines

1
┌─────────────────────────────────────┐
2
│  ┌─────┐                            │
3
│  │Text │  ← 가이드라인으로 정렬 확인  │
4
│  └─────┘                            │
5
│  - - - - - - - - - - - - - - - - -  │ ← 가이드라인
6
│  ┌─────────────────┐                │
7
│  │     Button      │                │
8
│  └─────────────────┘                │
9
└─────────────────────────────────────┘

위젯들의 정렬이 맞는지 시각적으로 확인할 수 있습니다.

Show Baselines

텍스트 위젯의 기준선을 표시합니다. 다른 크기의 텍스트가 같은 기준선에 정렬되는지 확인할 때 사용합니다.

1
Row(
2
  crossAxisAlignment: CrossAxisAlignment.baseline,
3
  textBaseline: TextBaseline.alphabetic,
4
  children: [
5
    Text('Big', style: TextStyle(fontSize: 24)),
6
    Text('Small', style: TextStyle(fontSize: 12)),
7
  ],
8
)

Highlight Repaints

다시 그려지는(repaint) 영역에 랜덤 색상 테두리를 표시합니다.

1
debugRepaintRainbowEnabled = true;

자주 다시 그려지는 위젯은 성능에 영향을 줄 수 있습니다. 불필요한 repaint가 발생하는 위젯을 찾아 RepaintBoundary⁴로 격리할 수 있습니다.

1
// 불필요한 repaint 격리
2
RepaintBoundary(
3
  child: AnimatedWidget(),  // 자주 변경되는 위젯
4
)

Highlight Oversized Images

실제 표시 크기보다 큰 이미지를 강조합니다.

1
┌─────────────────────────────────────┐
2
│  ┌─────────────────┐                │
3
│  │                 │                │
4
│  │   INVERTED      │  ← 과도하게 큰 │
5
│  │   (반전 표시)    │     이미지     │
6
│  │                 │                │
7
│  └─────────────────┘                │
8
└─────────────────────────────────────┘

1000x1000 픽셀 이미지를 100x100 영역에 표시하면 메모리 낭비입니다. 적절한 크기로 리사이징하거나 cacheWidth/cacheHeight를 지정해야 합니다.

1
// 메모리 효율적인 이미지 로딩
2
Image.network(
3
  'https://example.com/large-image.jpg',
4
  cacheWidth: 200,  // 캐시 크기 제한
5
  cacheHeight: 200,
6
)

Watch out#

WARNING

시각화 옵션 사용 시 주의사항입니다.

성능 영향:

• 시각화 옵션을 켜면 앱 성능이 저하됩니다.
• 디버깅이 끝나면 반드시 끄세요.

프로덕션 코드에서 제거:

1
// 디버그 모드에서만 활성화
2
assert(() {
3
  debugPaintSizeEnabled = true;
4
  return true;
5
}());

assert 블록은 릴리스 빌드에서 제거되므로 안전합니다.

Highlight Repaints 해석 주의:

• 모든 repaint가 문제는 아닙니다.
• 애니메이션, 스크롤 등은 자연스러운 repaint입니다.
• 정적인 UI가 계속 repaint되면 문제입니다.

결론: 시각화 옵션을 활용하면 레이아웃과 렌더링 문제를 쉽게 발견할 수 있습니다.