Flutter의 버튼 위젯(Button Widget)

Flutter에서 버튼은 사용자의 상호작용을 처리하는 중요한 UI 요소입니다. 버튼을 통해 사용자는 애플리케이션 내에서 다양한 작업을 수행할 수 있습니다. Flutter는 여러 종류의 버튼 위젯을 제공하며, 각 버튼 위젯은 고유한 스타일과 용도를 가지고 있습니다. 이번 글에서는 Flutter의 버튼 위젯의 다양한 종류와 그 사용법에 대해 자세히 살펴보겠습니다.

1. ElevatedButton

ElevatedButton은 일반적으로 양각된 버튼으로, 입체적인 외관을 가지고 있습니다. 기본적으로 주로 사용되는 버튼 위젯입니다.

 

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressed');
  },
  child: Text('Elevated Button'),
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 기본적인 ElevatedButton을 생성합니다.

2. TextButton

TextButton은 텍스트로만 구성된 버튼으로, 주로 간단한 액션을 위해 사용됩니다. 평평한 디자인을 가지고 있으며, 주로 대화 상자나 툴바에서 사용됩니다.

 

TextButton(
  onPressed: () {
    print('TextButton pressed');
  },
  child: Text('Text Button'),
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 기본적인 TextButton을 생성합니다.

3. OutlinedButton

OutlinedButton은 외곽선만 있는 버튼으로, 일반적으로 덜 중요한 액션을 나타낼 때 사용됩니다. 기본적으로 버튼의 가장자리를 따라 외곽선이 그려집니다.

 

OutlinedButton(
  onPressed: () {
    print('OutlinedButton pressed');
  },
  child: Text('Outlined Button'),
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 기본적인 OutlinedButton을 생성합니다.

4. IconButton

IconButton은 아이콘을 사용하여 버튼을 만드는 위젯입니다. 주로 앱바나 툴바에서 사용되며, 시각적 단서를 제공하는 데 유용합니다.

 

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('IconButton pressed');
  },
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 IconButton을 생성합니다.

 

반응형

 

 

5. FloatingActionButton

FloatingActionButton은 주로 화면의 주요 액션을 나타내기 위해 사용되는 둥근 버튼입니다. 주로 화면 하단 오른쪽에 떠 있는 형태로 배치됩니다.

 

FloatingActionButton(
  onPressed: () {
    print('FloatingActionButton pressed');
  },
  child: Icon(Icons.add),
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 FloatingActionButton을 생성합니다.

6. CupertinoButton

CupertinoButton은 iOS 스타일의 버튼으로, iOS 디자인 가이드라인을 따르는 애플리케이션에서 사용됩니다.

 

import 'package:flutter/cupertino.dart';

CupertinoButton(
  child: Text('Cupertino Button'),
  onPressed: () {
    print('CupertinoButton pressed');
  },
)

 

위 코드는 클릭 시 콘솔에 메시지를 출력하는 기본적인 CupertinoButton을 생성합니다.

7. 커스텀 버튼 스타일링

모든 버튼 위젯은 style 속성을 사용하여 커스텀 스타일링이 가능합니다. ButtonStyle 클래스를 사용하여 버튼의 색상, 모양, 그림자 등을 지정할 수 있습니다.

 

ElevatedButton(
  onPressed: () {
    print('Styled ElevatedButton pressed');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.teal, // 배경색
    onPrimary: Colors.white, // 텍스트 색상
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
  ),
  child: Text('Styled Elevated Button'),
)

 

위 코드는 커스텀 스타일이 적용된 ElevatedButton을 생성합니다. 버튼의 배경색, 텍스트 색상, 모서리 반경, 패딩 등을 설정할 수 있습니다.

결론

Flutter의 버튼 위젯은 다양한 종류와 스타일을 제공하여 애플리케이션의 사용자 인터페이스를 더욱 풍부하게 만듭니다. ElevatedButton, TextButton, OutlinedButton, IconButton, FloatingActionButton, CupertinoButton 등 다양한 버튼을 상황에 맞게 사용할 수 있으며, ButtonStyle을 통해 버튼의 스타일을 커스터마이징할 수 있습니다. Flutter의 버튼 위젯을 활용하여 사용자 경험을 향상시키고, 애플리케이션의 인터페이스를 더욱 직관적이고 매력적으로 만들어보세요.