Flutter 개발자가 가장 많이 하는 실수 TOP 5 💥

안녕하세요! 오늘은 Flutter를 처음 시작하는 개발자들이 자주 겪는 실수들을 정리해봤어요.
저도 샘퍼즐 개발하면서 몇 번이나 삽질했거든요 😂 함께 피하면서 빠르게 성장해봐요!

1. setState() 남발

상태를 업데이트할 때 무조건 setState()만 쓰는 경우가 많아요. 하지만 이건 전체 위젯을 리렌더링하게 만들기 때문에 성능에 부담을 줄 수 있어요.

❌ 잘못된 예:

setState(() {
  user.name = '홍길동'; // 깊은 상태 변경도 포함됨
});

✅ 바람직한 예 (Provider 사용):

context.read().updateName('홍길동');

Tip: 상태 관리 패키지(Provider, Riverpod 등)를 적절히 활용해보세요.

2. 위젯 구조가 너무 복잡

처음에는 모든 걸 한 파일에 몰아쓰는 경향이 있어요. 결과적으로 너무 긴 build 함수 + 보기 어려운 트리 구조가 생겨요.

예시: 300줄짜리 하나의 StatefulWidget 😱

해결법: 공통 위젯은 별도 파일로 추출하고, UI를 작은 단위로 쪼개서 재사용성을 높여보세요.

3. pubspec.yaml 수정 후 pub get 안함

의외로 많은 분들이 pubspec.yaml 파일을 수정하고 저장만 해두고 pub get을 안 눌러서 오류를 만나요 😅

예시 오류:

Target of URI doesn't exist: 'package:http/http.dart'.

해결법: 저장 후 반드시 flutter pub get 실행 또는 VSCode 상단 버튼 클릭!

4. 무조건 Column + SizedBox

UI 간격 조절을 위해 Column과 SizedBox만 반복해서 쓰다 보면 레이아웃이 지저분해지고 유지보수도 어려워요.

❌ 잘못된 예:

Column(
  children: [
    Text('Title'),
    SizedBox(height: 16),
    Text('Content'),
    SizedBox(height: 16),
    Text('Footer'),
  ],
)

✅ 개선된 예:

Column(
  children: [
    Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Text('Title'),
    ),
    Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Text('Content'),
    ),
    Text('Footer'),
  ],
)

Tip: Padding, Spacer, Expanded 등 유연한 위젯을 적극 활용해보세요.

5. 디버깅 도구 안 씀

Flutter DevTools, Widget Inspector 같은 강력한 도구를 안 쓰는 경우가 많아요. 오류 원인을 못 찾고 엉뚱한 곳을 수정하는 일이 반복되죠.

해결법: DevTools을 띄워놓고 hot reload하면서 UI 구조를 실시간으로 점검해보세요.

📌 마무리

실수는 누구나 해요. 하지만 기록하고 공유하면 성장 속도는 더 빨라지죠 💪
저처럼 처음에 헤맸던 분들께 도움이 되었으면 좋겠어요.
다음 글에서는 샘퍼즐 개발에 사용한 라이브러리나 Flutter 레이아웃 꿀팁도 소개해볼게요!