플러터에서 RawMaterialButton 사용하기: 가이드 및 활용 예시

 

RawMaterialButton은 Flutter에서 기본적인 버튼 위젯을 만드는 데 사용되는 유용한 위젯입니다.

주요 기능, 속성, 활용 예시 등을 자세히 살펴보고, 실제 개발에 활용할 수 있는 코드와 팁을 제공합니다.

1. RawMaterialButton 기본 사용

RawMaterialButton을 사용하려면 먼저 material.dart 라이브러리를 import해야 합니다.

import 'package:flutter/material.dart';

 

RawMaterialButton 위젯은 다음과 같은 기본 구조를 가지고 있습니다.

RawMaterialButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 코드
  },
  child: Text('버튼 텍스트'),
  fillColor: Colors.blue, // 버튼 색상
  elevation: 2.0, // 버튼 그림자 높이
  shape: CircleBorder(), // 버튼 모양
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 버튼 영역 조절
  splashColor: Colors.white, // 버튼 눌렀을 때 물결 효과 색상
  highlightColor: Colors.blueAccent, // 버튼 눌렀을 때 하이라이트 색상
),

 

• onPressed: 버튼 클릭 시 실행할 함수를 지정합니다.
• child: 버튼에 표시할 위젯을 지정합니다.
• fillColor: 버튼 색상을 지정합니다.
• elevation: 버튼 그림자 높이를 지정합니다.
• shape: 버튼 모양을 지정합니다. 기본적으로 CircleBorder()를 사용하여 원형 모양이지만, RoundedRectangleBorder() 등을 사용하여 원하는 모양을 만들 수 있습니다.
• materialTapTargetSize: 버튼 영역 크기를 조절합니다. 기본적으로 MaterialTapTargetSize.padded를 사용하여 여백을 추가하지만, MaterialTapTargetSize.shrinkWrap을 사용하면 여백 없이 버튼 영역을 설정할 수 있습니다.
• splashColor: 버튼 눌렀을 때 표시되는 물결 효과 색상을 지정합니다.
• highlightColor: 버튼 눌렀을 때 표시되는 하이라이트 색상을 지정합니다.

2. 주요 속성

RawMaterialButton에는 다음과 같은 주요 속성들이 있습니다:

• onPressed: 버튼 클릭 시 실행할 함수 (필수)
• child: 버튼에 표시할 위젯 (필수)
• fillColor: 버튼 색상
• elevation: 버튼 그림자 높이
• shape: 버튼 모양
• materialTapTargetSize: 버튼 영역 크기 조절
• splashColor: 버튼 눌렀을 때 물결 효과 색상
• highlightColor: 버튼 눌렀을 때 하이라이트 색상
• onHighlightChanged: 버튼 하이라이트 상태 변경 시 호출되는 함수
• onLongPress: 버튼을 오래 누를 때 호출되는 함수
• clipBehavior: 버튼 영역 밖의 자식 위젯 잘라내기 (예: ClipBehavior.antiAlias)
• shapeBorder: 버튼 모양을 정의하는 BorderShape (예: RoundedRectangleBorder)
• padding: 버튼 주변 여백
• constraints: 버튼 크기 제약 조건
• focusColor: 버튼 포커스 상태 시 색상
• hoverColor: 버튼 마우스 호버 시 색상
• disabledColor: 버튼 비활성화 시 색상
• visualDensity: 버튼 시각적 밀도 (데이터 밀도에 따라 버튼 크기 조정)

3. 활용 팁

• RawMaterialButton은 기본적인 버튼 기능을 제공하는 데 유용합니다.
• fillColor, elevation, shape 등 다양한 속성을 사용하여 버튼의 디자인을 변경할 수 있습니다.
• onPressed 속성에 함수를 지정하여 버튼 클릭 시 원하는 작업을 수행할 수 있습니다.
• RawMaterialButton은 다른 위젯들과 함께 사용하여 다양한 기능을 구현할 수 있습니다. 예를 들어, Scaffold의 appBar에 추가하거나, ListView 아이템의 액션 버튼으로 사용할 수 있습니다.

4. 실제 활용 예시

다음은 RawMaterialButton을 사용하는 실제 코드 예시입니다

  onPressed: () {
    print('기본 버튼 클릭됨');
  },
  child: Text('기본 버튼'),
  fillColor: Colors.blue,
  elevation: 4.0,
  shape: CircleBorder(),
),
RawMaterialButton(
  onPressed: () {
    print('모서리 버튼 클릭됨');
  },
  child: Text('모서리 버튼'),
  fillColor: Colors.green,
  elevation: 2.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(30.0),
  ),
),
RawMaterialButton(
  onPressed: () {
    print('아이콘 버튼 클릭됨');
  },
  child: Row(
    children: <Widget>[
      Icon(Icons.add),
      SizedBox(width: 10.0),
      Text('아이콘 버튼'),
    ],
  ),
  fillColor: Colors.orange,
  elevation: 4.0,
  shape: StadiumBorder(),
),

 

• 코드 설명:
  • 위 코드는 세 개의 RawMaterialButton 버튼을 만드는 예시입니다.
  • 각 버튼마다 onPressed 속성에 함수를 지정하여 버튼 클릭 시 콘솔에 메시지를 출력합니다.
  • child 속성에는 버튼에 표시할 위젯을 지정합니다.
  • fillColor, elevation, shape 속성을 사용하여 버튼의 디자인을 변경합니다.
  • RoundedRectangleBorder을 사용하여 모서리가 둥근 버튼, StadiumBorder를 사용하여 타원형 버튼, Icon을 사용하여 아이콘 버튼을 만듭니다.

5. 추가 고려 사항

• 접근성: 시각 장애인 사용자를 위해 버튼에 tooltip을 제공하는 것이 좋습니다.
• 성능: 애니메이션 효과를 사용할 때는 성능 영향을 고려해야 합니다.
• 테스트: 다양한 기기와 환경에서 RawMaterialButton의 동작을 테스트해야 합니다.