Flutter 버튼(Button) 종류 + InkWell 정리

📌 1. 버튼 개요

Flutter에서 버튼은 크게 두 가지로 나뉨:

👉 1) 기본 제공 버튼
👉 2) 커스텀 클릭 처리 (InkWell 등)

---

📌 2. 기본 버튼 종류

버튼	설명
ElevatedButton	가장 기본 (튀어나온 버튼)
TextButton	텍스트만 있는 버튼
OutlinedButton	테두리 버튼
IconButton	아이콘 클릭
FloatingActionButton	떠 있는 주요 버튼

---

📌 3. ElevatedButton (기본 ⭐)

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

👉 가장 많이 사용 (주요 액션)

---

📌 4. TextButton

TextButton(
  onPressed: () {},
  child: const Text("Text 버튼"),
)

👉 가벼운 액션 (취소, 보조 버튼)

---

📌 5. OutlinedButton

OutlinedButton(
  onPressed: () {},
  child: const Text("Outlined 버튼"),
)

👉 중간 강조 버튼

---

📌 6. IconButton

IconButton(
  onPressed: () {},
  icon: const Icon(Icons.favorite),
)

👉 아이콘 클릭용

---

📌 7. FloatingActionButton

FloatingActionButton(
  onPressed: () {},
  child: const Icon(Icons.add),
)

👉 화면 하단 핵심 액션 (+ 버튼)

---

📌 8. InkWell (중요 ⭐)

✅ 개념

👉 버튼이 아니라 “클릭 효과 + 터치 감지 위젯”

👉 어떤 UI든 클릭 가능하게 만듦

---

✅ 기본 예제

InkWell(
  onTap: () {
    print("클릭됨");
  },
  child: Container(
    padding: const EdgeInsets.all(16),
    color: Colors.blue,
    child: const Text("클릭 영역"),
  ),
)

---

📌 언제 사용?

• 카드 전체 클릭
• 리스트 아이템 클릭
• 이미지 클릭
• 커스텀 버튼 제작

---

📌 실전 예제

InkWell(
  onTap: () {
    print("상품 클릭");
  },
  child: Row(
    children: [
      Container(width: 50, height: 50, color: Colors.grey),
      const SizedBox(width: 10),
      const Text("상품 이름"),
    ],
  ),
)

👉 리스트 전체 클릭 가능

---

⚠️ InkWell 주의

👉 Material 위젯 안에서 사용해야 ripple 효과 보임

Material(
  child: InkWell(
    onTap: () {},
    child: Container(
      padding: const EdgeInsets.all(16),
      child: const Text("Ripple OK"),
    ),
  ),
)

---

📌 9. 전체 버튼 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ButtonExample(),
    );
  }
}

class ButtonExample extends StatelessWidget {
  const ButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Button Example")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {},
            child: const Text("Elevated"),
          ),
          TextButton(
            onPressed: () {},
            child: const Text("Text"),
          ),
          OutlinedButton(
            onPressed: () {},
            child: const Text("Outlined"),
          ),
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.favorite),
          ),
          const SizedBox(height: 20),

          // InkWell 예제
          Material(
            child: InkWell(
              onTap: () {
                print("InkWell 클릭");
              },
              child: Container(
                padding: const EdgeInsets.all(16),
                color: Colors.orange,
                child: const Text("InkWell 버튼"),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

---

📌 10. 핵심 정리

구분	역할
ElevatedButton	주요 액션
TextButton	보조 액션
OutlinedButton	중간 강조
IconButton	아이콘
FAB	핵심 버튼
InkWell	커스텀 클릭 영역

---

🚀 한 줄 핵심

👉 기본 버튼 + InkWell 조합이면 모든 UI 구현 가능

---

🔥 실무 팁

• 일반 버튼 → ElevatedButton
• 리스트 클릭 → InkWell
• 디자인 커스텀 → InkWell + Container

---

Flutter Material 위젯 정리

📌 1. Material이란?

✅ 개념

• Material Design의 “표면(Surface)” 역할을 하는 위젯
• Flutter에서 버튼, 터치 효과, 그림자 등의 시각적 기반이 되는 컨테이너

👉 쉽게 말하면
“UI가 그려지는 종이” 같은 존재

---

📌 2. 왜 필요한가?

Flutter의 InkWell 같은 위젯은
👉 Material 위에서만 ripple(물결 효과)을 그릴 수 있음

---

❌ Material 없이

InkWell(
  onTap: () {},
  child: Container(
    color: Colors.orange,
    padding: EdgeInsets.all(16),
    child: Text("버튼"),
  ),
)

👉 ripple 효과 안 보일 수 있음

---

✅ Material 사용

Material(
  child: InkWell(
    onTap: () {},
    child: Container(
      color: Colors.orange,
      padding: EdgeInsets.all(16),
      child: Text("버튼"),
    ),
  ),
)

👉 클릭 시 ripple 효과 정상 표시

---

📌 3. 구조 이해

Material (표면)
 └─ InkWell (터치 감지 + ripple)
     └─ UI (Container 등)

👉 InkWell은 Material 위에 “잉크 효과”를 그림

---

📌 4. 주요 기능

기능	설명
ripple 효과	터치 시 물결 애니메이션
elevation	그림자 (떠 있는 느낌)
color	배경색
shape	모양 (둥근 모서리 등)

---

📌 5. 스타일 적용 예제

Material(
  color: Colors.blue,
  elevation: 4,
  borderRadius: BorderRadius.circular(10),
  child: InkWell(
    borderRadius: BorderRadius.circular(10),
    onTap: () {},
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text(
        "Material 버튼",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

👉 버튼처럼 보이는 커스텀 UI

---

📌 6. 언제 사용해야 하나?

👉 아래 상황에서 직접 사용:

• Container + 클릭 효과 만들 때
• 커스텀 카드 UI
• InkWell ripple이 안 보일 때

---

📌 7. 이미 포함된 경우

👉 Flutter 기본 구조:

MaterialApp
 └─ Scaffold
     └─ AppBar / body

👉 대부분 자동으로 Material 포함됨

그래서:

ElevatedButton(...)

👉 따로 Material 안 써도 됨

---

📌 8. 핵심 정리

개념	설명
Material	UI 표면
InkWell	클릭 + ripple
관계	Material 위에서 InkWell 동작

---

🚀 한 줄 핵심

👉 Material은 ripple 효과가 그려지는 “배경”이다

---

🔥 실무 팁

• ripple 안 보이면 → Material 확인
• 커스텀 버튼 만들 때 거의 필수
• borderRadius 같이 맞춰야 자연스럽다

---