1
{
2
  "configurations": [
3
    {
4
      "name": "Flutter (Profile)",
5
      "request": "launch",
6
      "type": "dart",
7
      "flutterMode": "profile"
8
    }
9
  ]
10
}

1
// 나쁜 예: UI 스레드에서 무거운 작업
2
class BadExample extends StatelessWidget {
3
  @override
4
  Widget build(BuildContext context) {
5
    // 이 작업이 16ms를 초과하면 프레임 드롭 발생
6
    final result = expensiveCalculation();
7
    return Text(result);
8
  }
9
}
10

11
// 좋은 예: 미리 계산하거나 비동기로 처리
12
class GoodExample extends StatefulWidget {
13
  @override
14
  State<GoodExample> createState() => _GoodExampleState();
15
}
16

17
class _GoodExampleState extends State<GoodExample> {
18
  String? _result;
19

20
  @override
21
  void initState() {
22
    super.initState();
23
    _loadData();
24
  }
25

26
  Future<void> _loadData() async {
27
    final result = await compute(expensiveCalculation, null);
28
    setState(() => _result = result);
29
  }
30

31
  @override
32
  Widget build(BuildContext context) {
33
    return _result != null
34
        ? Text(_result!)
35
        : const CircularProgressIndicator();
36
  }
37
}

1
// 타임라인에 커스텀 이벤트 추가하기
2
import 'dart:developer';
3

4
void myFunction() {
5
  Timeline.startSync('myFunction');
6
  try {
7
    // 측정하고 싶은 코드
8
    doSomething();
9
  } finally {
10
    Timeline.finishSync();
11
  }
12
}

1
// 나쁜 예: Opacity 위젯 사용
2
Opacity(
3
  opacity: 0.5,
4
  child: Container(
5
    color: Colors.red,
6
    width: 100,
7
    height: 100,
8
  ),
9
)
10

11
// 좋은 예: 색상에 직접 투명도 적용
12
Container(
13
  color: Colors.red.withOpacity(0.5),
14
  width: 100,
15
  height: 100,
16
)

1
// 나쁜 예: 전체 위젯 리빌드
2
class BadCounter extends StatefulWidget {
3
  @override
4
  State<BadCounter> createState() => _BadCounterState();
5
}
6

7
class _BadCounterState extends State<BadCounter> {
8
  int count = 0;
9

10
  @override
11
  Widget build(BuildContext context) {
12
    return Column(
13
      children: [
14
        // 이 비싼 위젯도 매번 리빌드됨
15
        const ExpensiveWidget(),
16
        Text('Count: $count'),
17
        ElevatedButton(
18
          onPressed: () => setState(() => count++),
19
          child: const Text('Increment'),
20
        ),
21
      ],
22
    );
23
  }
24
}
25

26
// 좋은 예: 필요한 부분만 리빌드
27
class GoodCounter extends StatefulWidget {
28
  @override
29
  State<GoodCounter> createState() => _GoodCounterState();
30
}
31

32
class _GoodCounterState extends State<GoodCounter> {
33
  int count = 0;
34

35
  @override
36
  Widget build(BuildContext context) {
37
    return Column(
38
      children: [
39
        // const로 선언하여 리빌드 방지
40
        const ExpensiveWidget(),
41
        // 또는 별도 위젯으로 분리
42
        CounterText(count: count),
43
        ElevatedButton(
44
          onPressed: () => setState(() => count++),
45
          child: const Text('Increment'),
46
        ),
47
      ],
48
    );
49
  }
50
}

1
class OptimizedList extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return ListView.builder(
5
      itemCount: 1000,
6
      itemBuilder: (context, index) {
7
        return RepaintBoundary(
8
          child: ComplexListItem(index: index),
9
        );
10
      },
11
    );
12
  }
13
}

1
// 이미지 캐싱 확인
2
class ImageWidget extends StatelessWidget {
3
  @override
4
  Widget build(BuildContext context) {
5
    return Image.asset(
6
      'assets/image.png',
7
      cacheWidth: 200,   // 캐시 크기 지정
8
      cacheHeight: 200,
9
    );
10
  }
11
}

1
// main.dart에서 디버그 플래그 활성화
2
import 'package:flutter/rendering.dart';
3

4
void main() {
5
  // 리빌드 추적 (프로파일/디버그 모드에서만)
6
  debugProfileBuildsEnabled = true;
7

8
  runApp(const MyApp());
9
}

1
// 1. const 생성자 활용
2
const MyWidget();  // 리빌드 방지
3

4
// 2. shouldRebuild 구현 (InheritedWidget)
5
class MyInheritedWidget extends InheritedWidget {
6
  final int data;
7

8
  const MyInheritedWidget({
9
    required this.data,
10
    required super.child,
11
  });
12

13
  @override
14
  bool updateShouldNotify(MyInheritedWidget oldWidget) {
15
    return data != oldWidget.data;  // 데이터가 변경된 경우만 알림
16
  }
17
}
18

19
// 3. 선택적 리빌드 (Consumer, Selector)
20
// Provider 패키지 사용 예시
21
Consumer<CounterModel>(
22
  builder: (context, counter, child) {
23
    return Text('${counter.count}');
24
  },
25
)