Button

Flutter에서 사용 가능한 버튼 위젯을 정리해봤어요!

•

 Flutter 버튼 위젯 종류

•

 각 버튼별 코드 예제 

◦

 1. ElevatedButton (입체 버튼)

◦

 2. TextButton (텍스트 버튼)

◦

 3. OutlinedButton (외곽선 버튼)

◦

 4. IconButton (아이콘 버튼)

◦

 5. FloatingActionButton (FAB)

◦

 6. PopupMenuButton (팝업 메뉴 버튼)

◦

 7. DropdownButton (드롭다운 버튼)

◦

 8. InkWell (커스텀 터치 버튼)

◦

 9. GestureDetector (모든 터치 이벤트 감지)

•

 커스텀 버튼 정의하기

Flutter 버튼 위젯 종류

버튼 위젯	설명
ElevatedButton	입체감 있는 버튼 (기본 버튼)
TextButton	배경 없이 텍스트만 있는 버튼
OutlinedButton	외곽선이 있는 버튼
IconButton	아이콘만 있는 버튼
FloatingActionButton (FAB)	둥근 원형 버튼 (주로 액션 버튼으로 사용)
PopupMenuButton	팝업 메뉴를 제공하는 버튼
DropdownButton	드롭다운 형태의 버튼
InkWell	터치 효과가 있는 커스텀 버튼
GestureDetector	모든 터치 이벤트를 감지할 수 있는 버튼 대체 위젯

각 버튼별 코드 예제

1. ElevatedButton (입체 버튼)

ElevatedButton(
  onPressed: () {
    print("ElevatedButton 클릭!");
  },
  child: Text("ElevatedButton"),
),
Dart
복사

2. TextButton (텍스트 버튼)

TextButton(
  onPressed: () {
    print("TextButton 클릭!");
  },
  child: Text("TextButton"),
),
Dart
복사

3. OutlinedButton (외곽선 버튼)

OutlinedButton(
  onPressed: () {
    print("OutlinedButton 클릭!");
  },
  child: Text("OutlinedButton"),
),
Dart
복사

4. IconButton (아이콘 버튼)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print("IconButton 클릭!");
  },
),
Dart
복사

5. FloatingActionButton (FAB)

FloatingActionButton(
  onPressed: () {
    print("FloatingActionButton 클릭!");
  },
  child: Icon(Icons.add),
),
Dart
복사

6. PopupMenuButton (팝업 메뉴 버튼)

PopupMenuButton<String>(
  onSelected: (value) {
    print("선택한 값: $value");
  },
  itemBuilder: (context) => [
    PopupMenuItem(value: "옵션1", child: Text("옵션 1")),
    PopupMenuItem(value: "옵션2", child: Text("옵션 2")),
  ],
),
Dart
복사

7. DropdownButton (드롭다운 버튼)

DropdownButton<String>(
  value: "옵션1",
  onChanged: (newValue) {
    print("선택한 값: $newValue");
  },
  items: [
    DropdownMenuItem(value: "옵션1", child: Text("옵션 1")),
    DropdownMenuItem(value: "옵션2", child: Text("옵션 2")),
  ],
),
Dart
복사

8. InkWell (커스텀 터치 버튼)

InkWell(
  onTap: () {
    print("InkWell 클릭!");
  },
  child: Container(
    padding: EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Text("InkWell 버튼", style: TextStyle(color: Colors.white)),
  ),
),
Dart
복사

9. GestureDetector (모든 터치 이벤트 감지)

GestureDetector(
  onTap: () {
    print("GestureDetector 클릭!");
  },
  child: Container(
    padding: EdgeInsets.all(16),
    color: Colors.green,
    child: Text("GestureDetector 버튼", style: TextStyle(color: Colors.white)),
  ),
),
Dart
복사

공통 위젯으로 정의하기

커스텀 버튼을 위젯으로 정의하고, 프로젝트의 공통 위젯으로 재사용하는 방법을 알아봅니다.

커스텀 버튼을 만들기 위해서는 StatelessWidget을 상속받아 새로운 위젯 클래스를 정의합니다. 이렇게 만든 커스텀 버튼은 프로젝트 전체에서 재사용할 수 있습니다.

CustomButton

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

  const CustomButton({
    Key? key,
    required this.text,
    required this.onPressed,
    this.color = Colors.blue,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        primary: color,
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
      child: Text(
        text,
        style: TextStyle(fontSize: 16),
      ),
    );
  }
}
Dart
복사

사용 예시

CustomButton(
  text: "커스텀 버튼",
  onPressed: () {
    print("커스텀 버튼 클릭!");
  },
  color: Colors.green,
)
Dart
복사

이렇게 정의한 커스텀 버튼은 다음과 같은 장점이 있습니다.

•

 코드 재사용성 향상

•

 일관된 디자인 시스템 구현

•

 유지보수 용이성

•

 버튼 스타일 중앙 관리