Flutter에서 Custom Widget 제대로 만들기 — 재사용 가능한 컴포넌트 설계

Flutter를 처음 시작했을 땐 모든 UI를 직접 구성하는 재미가 있었다.
하지만 프로젝트가 커질수록 반복되는 코드에 지치고, 조금의 수정이 전체 앱에 영향을 주는 일이 생기기 시작했다.

이제 우리는 고민해야 한다. "이걸 위젯으로 분리할 수 없을까?"
Flutter에서 재사용 가능한 Custom Widget을 만드는 일은 유지보수성과 생산성을 모두 높여주는 길이다.

---

🧱 Stateless vs Stateful 위젯 선택 기준

커스텀 위젯을 만들기 전, 먼저 결정해야 할 건 Stateless로 만들지 Stateful로 만들지이다.

• StatelessWidget: UI는 고정, 입력만 받아서 출력할 때
• StatefulWidget: UI가 상태 변화에 따라 바뀔 때

가능하면 Stateless로 시작하고, 필요한 경우 Stateful로 바꾸는 게 좋다.

---

🛠️ 예제: CustomButton 만들기

기본 Button 대신, 팀 스타일에 맞는 재사용 가능한 버튼을 만들자.

class CustomButton extends StatelessWidget {
  final String label;
  final VoidCallback onPressed;
  final Color color;

  const CustomButton({
    super.key,
    required this.label,
    required this.onPressed,
    this.color = Colors.blue,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        backgroundColor: color,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
      ),
      onPressed: onPressed,
      child: Text(label, style: const TextStyle(color: Colors.white)),
    );
  }
}

이제 어디서든 이렇게 사용할 수 있다:

CustomButton(
  label: "등록하기",
  color: Colors.green,
  onPressed: () {
    print("등록됨");
  },
)

---

📦 Custom Widget을 설계할 때 고려할 것들

• 불필요한 상태는 외부에서 주입: 최대한 Stateless하게
• 입력값 (props)은 final로 고정: 변경 불가하게 설계
• 기본값 제공: 사용자 편의를 위해 기본값 설정
• Theme과 연동 고려: 앱 전체 테마를 반영할 수 있게
• 의미 있는 네이밍: 역할이 명확한 이름 사용

---

📁 컴포넌트 폴더 구조는 어떻게?

/lib
  /components
    custom_button.dart
    custom_card.dart
  /screens
    home_screen.dart

Custom 위젯들을 한 곳에 모아두면, 재사용성과 유지보수가 좋아진다.
나중에 디자인이 변경되더라도 컴포넌트만 수정하면 된다.

---

🧘 마무리하며

Custom Widget을 만든다는 건 단순히 코드를 줄이는 것이 아니다.
Flutter 앱을 더 읽기 쉽고, 더 유지보수하기 좋게 만드는 첫 걸음이다.

함수를 잘게 쪼개는 것처럼, UI도 잘게 쪼개보자.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 심화과정입니다.