Flutter의 핵심 기능 실행 버튼: FloatingActionButton
FloatingActionButton은 사용자가 앱의 주요 기능을 쉽게 접근할 수 있도록 도와주는 원형 버튼입니다. 이 버튼은 주로 앱의 화면에 고정된 위치에 표시되며, 다양한 상호작용과 행동을 위한 직관적인 접근점을 제공합니다.
주요 속성
onPressed: 버튼이 눌렸을 때 실행할 기능을 정의합니다. 필수 속성입니다.child: 버튼 내부에 표시될 위젯을 지정합니다. 주로Icon위젯이 사용됩니다.backgroundColor: 버튼의 배경색을 지정합니다. 테마의accentColor가 기본값입니다.foregroundColor: 버튼의 전경색을 지정합니다. 주로 아이콘과 텍스트의 색상에 사용됩니다.elevation: 버튼의 그림자 깊이를 조절하여 떠 있는 듯한 효과를 줍니다. 기본값은 6입니다.
주요 활용도
- 주요 액션 강조: 앱에서 중요한 동작(예: 새 게시물 작성, 새로운 채팅 시작 등)을 사용자에게 눈에 띄게 하고 쉽게 접근할 수 있도록 합니다.
- 시각적 인터렉션: 사용자의 상호 작용을 유도하는 시각적 신호로 작용합니다.
- UI 일관성 유지: 모든 화면에서 동일한 위치에 고정되어 UI의 일관성을 유지하며 사용자 경험을 향상시킵니다.
코드 예제
아래 예제는 FloatingActionButton을 사용하여 메시지를 추가하는 기능을 구현하는 방법을 보여줍니다.
Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child: Text('FloatingActionButton 예제'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// 버튼 클릭 시 실행할 작업
print('메시지 추가');
},
child: Icon(Icons.add),
backgroundColor: Colors.blue,
),
)추가 팁
- 위치 조정: 필요에 따라
floatingActionButtonLocation속성을 사용하여 버튼의 위치를 조정할 수 있습니다. - 단일성: 각 화면에는 최대 한 개의
FloatingActionButton을 사용해야 합니다. 이는 UI의 명료성과 사용자의 주의를 한 가지 중요한 행동에 집중시키기 위함입니다. - 긍정적인 행동 지원: "생성", "공유", "탐색"과 같은 긍정적인 행동을 촉진하는 데 사용됩니다.
- 고유한 heroTag: 둘 이상의 버튼이 하나의 Route에 사용되는 경우, 각 버튼은 고유한
heroTag를 가져야 합니다. 그렇지 않으면 예외가 발생할 수 있습니다. - 비활성화 금지:
onPressed콜백이null일 경우 버튼은 비활성화되며 터치에 반응하지 않습니다. 버튼을 비활성화하는 것은 사용자에게 불분명한 신호를 줄 수 있으므로, 버튼을 비활성화할 때는 배경색을 변경하는 것이 좋습니다.
관련 자료
- Scaffold:
FloatingActionButton은 보통Scaffold내부에 위치합니다. - ElevatedButton: 터치 시 물질적으로 부각되는 버튼입니다.
- Material Design Guidelines: 머티리얼 디자인 가이드라인에서는 플로팅 액션 버튼의 디자인과 사용법에 대해 자세히 설명합니다.
- M3 Material Guidelines: 새로운 머티리얼 디자인 3에서는
FloatingActionButton의 다양한 변형과 색상 매핑을 제공합니다.
추가 참고 리소스
flutter 개발자(진)