📌 Day 10: Flutter 다양한 버튼 정리 , Buttons !

 
Flutter에서 사용할 수 있는 버튼 종류는 다양하다.

((추가 예정) Material 3 디자인을 기반으로 한 버튼도 포함됨)

Flutter에서 사용 가능한 버튼들 소개.

---

✅ 1. ElevatedButton (입체감 있는 기본 버튼)

🔸 특징: 배경색이 있는 버튼, 기본적으로 입체적인 느낌을 줌.
🔸 사용 예: 일반적인 클릭 버튼, 폼 제출 버튼 등.

📌 예제 코드

ElevatedButton(
  onPressed: () {
    print("ElevatedButton 클릭됨!");
  },
  child: const Text("ElevatedButton"),
)

---

✅ 2. TextButton (텍스트만 있는 버튼)

🔸 특징: 배경이 없는 텍스트 버튼, 클릭 시 색상이 변함.
🔸 사용 예: "더 보기", "취소" 같은 보조 버튼.

📌 예제 코드

TextButton(
  onPressed: () {
    print("TextButton 클릭됨!");
  },
  child: const Text("TextButton"),
)

---

✅ 3. OutlinedButton (외곽선 있는 버튼)

🔸 특징: ElevatedButton과 비슷하지만 배경이 없고 외곽선이 있음.
🔸 사용 예: 강조할 필요가 없는 보조 버튼.

📌 예제 코드

OutlinedButton(
  onPressed: () {
    print("OutlinedButton 클릭됨!");
  },
  child: const Text("OutlinedButton"),
)

---

✅ 4. IconButton (아이콘만 있는 버튼)

🔸 특징: 텍스트 없이 아이콘만 있는 버튼.
🔸 사용 예: "좋아요" 버튼, 설정 아이콘 버튼 등.

📌 예제 코드

IconButton(
  onPressed: () {
    print("IconButton 클릭됨!");
  },
  icon: const Icon(Icons.favorite),
)

---

✅ 5. FloatingActionButton (화면 위에 떠 있는 버튼)

🔸 특징: 플로팅 버튼 (FAB), 일반적으로 화면 하단에 위치. 🔸 사용 예: "새로운 아이템 추가" 기능.

📌 예제 코드

FloatingActionButton(
  onPressed: () {
    print("FloatingActionButton 클릭됨!");
  },
  child: const Icon(Icons.add),
)

---

✅ 6. DropdownButton (드롭다운 버튼)

🔸 특징: 목록을 선택할 수 있는 버튼.
🔸 사용 예: 옵션 선택 (예: "국가 선택", "언어 설정").

📌 예제 코드

String selectedValue = "옵션1";

DropdownButton<String>(
  value: selectedValue,
  items: ["옵션1", "옵션2", "옵션3"].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    if (newValue != null) {
      setState(() {
	      selectedValue = newValue;
	    });
    }
  },
)

💡 옵션 선택에 따라 화면 렌더링을 하려면 StatefulWidget - setState() 사용 필요

---

✅ 7. PopupMenuButton (팝업 메뉴 버튼)

🔸 특징: 클릭 시 팝업 메뉴가 나타나는 버튼.
🔸 사용 예: 설정 메뉴, 작업 옵션 선택.

📌 예제 코드

PopupMenuButton<String>(
  onSelected: (String result) {
    print("선택된 메뉴: $result");
  },
  itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
    const PopupMenuItem<String>(
      value: "옵션1",
      child: Text("옵션1"),
    ),
    const PopupMenuItem<String>(
      value: "옵션2",
      child: Text("옵션2"),
    ),
  ],
)

---

✅ 8. GestureDetector (커스텀 버튼)

🔸 특징: 버튼이 아닌 위젯에도 클릭 기능 추가 가능.
🔸 사용 예: 이미지 클릭 이벤트, 커스텀 UI 터치 이벤트.

📌 예제 코드

void _showSnackBar(BuildContext context, String message) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text(message),
      backgroundColor: Colors.orange,
      duration: const Duration(seconds: 1),
    ),
  );
}

- - -

GestureDetector(
  onTap: () {
    _showSnackBar(context, "onTap!");
  },
  onDoubleTap: () {
    _showSnackBar(context, "Double Tap!");
  },
  onLongPress: () {
    _showSnackBar(context, "Long Press!");
  },
  child: Icon(Icons.star),
),

---

✅ 9. InkWell (터치 효과가 있는 버튼)

🔸 특징: GestureDetector와 비슷하지만, 머티리얼 디자인의 물결 효과 추가.
🔸 사용 예: 터치 애니메이션이 필요한 경우.

📌 예제 코드

InkWell(
  onTap: () {
    print("InkWell 클릭됨!");
  },
  child: Container(
    padding: const EdgeInsets.all(20),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(10),
    ),
    child: const Text("InkWell 버튼", style: TextStyle(color: Colors.white)),
  ),
)

⚠️ InkWell 은 동작되지 않는 것 같다.

---

✅ 10. ToggleButtons (여러 개의 토글 버튼)

🔸 특징: 여러 개의 버튼을 하나의 그룹으로 묶어 상태 변경 가능.
🔸 사용 예: 다중 선택 UI, 설정 변경.

📌 예제 코드

ToggleButtons(
  onPressed: (int index) {
    for (int i = 0; i < isSelected.length; i++) {
      setState(() {
        isSelected[i] = (i == index);
      }); // 하나만 선택 가능하도록 변경
    }
  },
  isSelected: isSelected,
  children: const <Widget>[
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.format_underlined),
  ],
)

---

✅ 결론

ElevatedButton	입체감 있는 기본 버튼
TextButton	텍스트만 있는 버튼
OutlinedButton	외곽선 있는 버튼
IconButton	아이콘만 있는 버튼
FloatingActionButton	플로팅 버튼 (FAB)
DropdownButton	드롭다운 선택 버튼
PopupMenuButton	팝업 메뉴 버튼
GestureDetector	커스텀 터치 이벤트 버튼
InkWell	머티리얼 디자인 터치 효과 버튼
ToggleButtons	여러 개의 토글 버튼