flutter 주요 버튼 위젯 모음

Flutter에서는 다양한 버튼 위젯을 제공하여 사용자가 다양한 상호작용을 할 수 있도록 지원합니다. 각 버튼 위젯은 고유한 스타일과 기능을 가지고 있어 다양한 사용 사례에 적합합니다. 주요 버튼 위젯과 그 특징을 정리해보겠습니다.

 

주요 버튼 위젯

 

1. ElevatedButton

• 설명: 이전의 RaisedButton에 해당하며, 입체감을 제공하는 기본 버튼입니다.

• 특징:

• 사용자가 버튼을 누를 때 시각적인 효과를 제공

• 스타일을 통해 색상, 모양 등을 커스터마이징 가능

• 예제:

ElevatedButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Elevated Button'),
);

2. TextButton

• 설명: 이전의 FlatButton에 해당하며, 배경 없이 텍스트로만 구성된 버튼입니다.

• 특징:

• 버튼을 누를 때 배경 색상이 변경됨

• 간단한 텍스트 버튼을 구현할 때 사용

• 예제:

TextButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Text Button'),
);

3. OutlinedButton

• 설명: 외곽선이 있는 버튼으로, 이전의 OutlineButton에 해당합니다.

• 특징:

• 버튼을 누를 때 외곽선 색상이 변경됨

• 기본 버튼에 외곽선을 추가하여 강조할 때 사용

• 예제:

OutlinedButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Text('Outlined Button'),
);

4. IconButton

• 설명: 아이콘을 포함하는 버튼으로, 아이콘만으로 구성됩니다.

• 특징:

• 아이콘을 클릭할 때 사용

• 버튼에 텍스트 대신 아이콘을 사용하여 직관적인 인터페이스 제공

• 예제:

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
);

5. FloatingActionButton

• 설명: 둥근 모양의 떠 있는 버튼으로, 일반적으로 주요 동작을 나타냅니다.

• 특징:

• 화면 위에 떠 있는 듯한 시각적 효과

• 주로 주요 액션 버튼으로 사용

• 예제:

FloatingActionButton(
  onPressed: () {
    // 버튼 클릭 시 실행되는 코드
  },
  child: Icon(Icons.add),
);

버튼 스타일링

 

Flutter의 버튼 위젯들은 스타일링 옵션을 제공하여 다양한 커스터마이징이 가능합니다. 예를 들어, ElevatedButton의 스타일을 설정하는 방법은 다음과 같습니다:

ElevatedButton(
  onPressed: () {},
  child: Text('Styled Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 배경 색상
    onPrimary: Colors.white, // 텍스트 색상
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    textStyle: TextStyle(fontSize: 20),
  ),
);