[Flutter] ElevatedButton 란?

Flutter의 ElevatedButton

ElevatedButton은 Flutter에서 자주 사용되는 버튼 위젯으로, 사용자 상호작용을 위해 기본적인 눌림 효과와 함께 사용됩니다. 이전에는 RaisedButton으로 알려졌으나 Flutter의 최신 버전에서 ElevatedButton으로 대체되었습니다.

 

 

 

 

 

ElevatedButton의 주요 특징

• 버튼 높이: 버튼이 기본적으로 '들려있는' 높이감을 제공하여, 눌렸을 때 입체적인 효과를 나타냅니다.
• 색상과 스타일 지정 가능: 버튼의 배경색, 텍스트 스타일, 테두리 등을 쉽게 커스터마이징할 수 있습니다.
• 비동기 작업과 사용 가능: 버튼을 누를 때 비동기 작업을 처리하도록 설정할 수 있습니다.

 

 

 

 

 

ElevatedButton의 기본 사용법

ElevatedButton은 onPressed 속성에 콜백 함수를 지정하여, 버튼을 눌렀을 때 실행할 동작을 정의합니다. 기본적으로 다음과 같이 사용됩니다:

ElevatedButton(
  onPressed: () {
    print('버튼 클릭됨');
  },
  child: Text('클릭하세요'),
)
    

 

 

 

 

 

 

 

ElevatedButton의 주요 속성

• onPressed: 버튼이 눌렸을 때 실행되는 콜백 함수입니다. 버튼을 비활성화하려면 null을 전달합니다.
• child: 버튼 안에 표시될 내용을 설정합니다. 주로 텍스트 위젯이나 아이콘을 넣습니다.
• style: 버튼의 색상, 크기, 모양 등을 커스터마이징할 수 있는 속성입니다.

 

 

 

 

 

 

ElevatedButton 스타일링

ElevatedButton은 style 속성을 사용하여 버튼의 모양을 다양한 방식으로 커스터마이징할 수 있습니다. ButtonStyle을 사용하여 버튼의 색상, 크기, 텍스트 스타일 등을 변경할 수 있습니다.

스타일링 예시

ElevatedButton(
  onPressed: () {
    print('커스텀 버튼 클릭됨');
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // 버튼 배경색
    onPrimary: Colors.white, // 버튼 텍스트 색상
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15), // 패딩
    textStyle: TextStyle(fontSize: 18), // 텍스트 스타일
  ),
  child: Text('커스텀 버튼'),
)
    

 

비동기 작업 처리 예시

onPressed 콜백에서 비동기 작업을 수행할 수 있습니다. 예를 들어, 서버에 데이터를 보내거나 화면 전환을 처리할 때 사용할 수 있습니다:

ElevatedButton(
  onPressed: () async {
    await Future.delayed(Duration(seconds: 2)); // 2초 지연
    print('비동기 작업 완료');
  },
  child: Text('비동기 작업 버튼'),
)
    

 

버튼 비활성화

버튼을 비활성화하고 싶다면 onPressed 속성에 null을 전달하면 됩니다. 이 경우 버튼이 비활성화되고 클릭할 수 없습니다:

ElevatedButton(
  onPressed: null,  // 버튼 비활성화
  child: Text('비활성화된 버튼'),
)
    

 

 

 

 

 

 

 

 

결론

ElevatedButton은 Flutter에서 가장 기본적이면서도 유연하게 사용할 수 있는 버튼 위젯입니다. 색상, 크기, 모양 등을 쉽게 커스터마이징할 수 있으며, 비동기 작업도 처리할 수 있어 앱 개발 시 다양한 상황에 맞춰 사용할 수 있습니다.