🔧 Flutter Custom Widget 제대로 만들기

Flutter에서 앱 규모가 커질수록 중요한 것 하나!
바로 "재사용 가능한 컴포넌트 구조"입니다.

이번 글에서는 Custom Widget을 설계할 때 고려할 점과
실무에서 쓰이는 위젯 구조화 방식을 다뤄보겠습니다.

---

📦 왜 Custom Widget이 중요할까?

• 같은 UI를 여러 번 작성하지 않아도 됨
• 디자인 시스템 적용에 유리
• 상태·이벤트 관리 분리로 유지보수 편리

---

🧱 기본 구조 예시

예: 재사용 가능한 PrimaryButton 위젯

import 'package:flutter/material.dart';

class PrimaryButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const PrimaryButton({
    required this.text,
    required this.onPressed,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      child: Text(text, style: const TextStyle(fontSize: 16)),
    );
  }
}

---

📋 사용 예시

PrimaryButton(
  text: '저장하기',
  onPressed: () {
    // 저장 로직
  },
)

---

📌 설계 시 고려할 3가지 포인트

1. 의존성 최소화

StatelessWidget → 최대한 props로 처리

2. 확장 가능성

필요한 경우 내부 위젯은 또 다른 컴포넌트로 분리

3. UI와 로직 분리

Widget은 “보여주는 역할”에 집중. 로직은 ViewModel 또는 Controller로

---

🧠 실무에서 구조화 팁

• lib/widgets/ 폴더에 공통 위젯 관리
• Button, TextField, Card 등 도메인 기반 분류 추천
• Theme 적용으로 색상/폰트 일관성 유지

---

🎯 정리

항목	설명
왜 필요?	UI 재사용, 유지보수성, 디자인 시스템 대응
핵심 패턴	StatelessWidget + Props + 명확한 책임
실무 적용	공통 위젯 폴더 구조 + Theme 활용