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

 

FloatingActionButton은 Flutter에서 화면 오른쪽 아래에 표시되는 버튼을 만드는 데 사용되는 유용한 위젯입니다.

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

1. FloatingActionButton 기본 사용

 

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

import 'package:flutter/material.dart';

 

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

FloatingActionButton(
  onPressed: () {
    // 버튼 클릭 시 실행할 코드
  },
  child: Icon(Icons.add), // 기본적으로 + 아이콘 표시
  backgroundColor: Colors.blue, // 버튼 배경색
  foregroundColor: Colors.white, // 아이콘 색상
  elevation: 4.0, // 버튼 그림자 높이
  shape: CircleBorder(), // 기본적으로 원형 모양
),

 

• onPressed: 버튼 클릭 시 실행할 함수를 지정합니다.
• child: 버튼에 표시할 위젯을 지정합니다. 기본적으로 Icon(Icons.add) 아이콘이 표시되지만, 원하는 위젯을 자유롭게 지정할 수 있습니다.
• backgroundColor: 버튼 배경색을 지정합니다.
• foregroundColor: 버튼에 표시되는 위젯의 색상을 지정합니다.
• elevation: 버튼 그림자의 높이를 지정합니다.
• shape: 버튼 모양을 지정합니다. 기본적으로 CircleBorder()를 사용하여 원형 모양이지만, RoundedRectangleBorder() 등을 사용하여 원하는 모양을 만들 수 있습니다.

2. 주요 속성

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

• onPressed: 버튼 클릭 시 실행할 함수 (필수)
• child: 버튼에 표시할 위젯 (필수)
• backgroundColor: 버튼 배경색
• foregroundColor: 버튼에 표시되는 위젯의 색상
• elevation: 버튼 그림자 높이
• shape: 버튼 모양
• mini: 버튼 크기를 작게 설정 (기본 크기보다 작음)
• tooltip: 버튼에 대한 설명 텍스트 (도움말)
• heroTag: 동일한 heroTag를 가진 FloatingActionButton끼리 화면 전환 시 애니메이션 적용
• isExtended: 버튼을 확장하여 여러 액션 버튼을 표시 (예: FAB menu)

3. 활용 팁

• FloatingActionButton은 주요 기능이나 중요한 작업을 강조하기 위해 사용하는 것이 좋습니다.
• backgroundColor 속성을 사용하여 버튼의 색상을 브랜드 색상이나 테마 색상과 일관되게 설정할 수 있습니다.
• onPressed 속성에 함수를 지정하여 버튼 클릭 시 원하는 작업을 수행할 수 있습니다.
• tooltip 속성을 사용하면 버튼에 대한 설명 텍스트를 제공하여 사용자 경험을 향상시킬 수 있습니다.
• FloatingActionButton은 다른 위젯들과 함께 사용하여 다양한 기능을 구현할 수 있습니다. 예를 들어, Scaffold의 appBar에 추가하거나, ListView 아이템의 액션 버튼으로 사용할 수 있습니다.

4. 실제 활용 예시

  transform: Matrix4.identity().translate(
    _offsetX,
    _offsetY,
  ),
  child: Visibility(
    visible: _isExtended,
    child: Row(
      children: <Widget>[
        FloatingActionButton(
          onPressed: () {
            print('FAB 1 클릭됨');
          },
          child: Icon(Icons.camera),
          mini: true,
        ),
        SizedBox(width: 10.0),
        FloatingActionButton(
          onPressed: () {
            print('FAB 2 클릭됨');
          },
          child: Icon(Icons.mic),
          mini: true,
        ),
      ],
    ),
  ),
),

 

• FAB menu 코드 설명:
  • _isExtended 상태 변수를 사용하여 FAB 확장 여부를 제어합니다.
  • onPressed 속성에서 setState를 사용하여 _isExtended 상태를 변경하고, FAB의 모양을 변경합니다.
  • child 속성에서 조건부 위젯을 사용하여 확장된 FAB 상태에 따라 표시할 아이콘을 변경합니다.
  • AnimatedContainer을 사용하여 FAB menu 애니메이션 효과를 추가합니다.
  • Visibility 위젯을 사용하여 확장된 FAB 상태에 따라 FAB menu를 표시/숨깁니다.
  • Row 위젯을 사용하여 FAB menu 내 여러 버튼을 배치합니다.
  • FloatingActionButton.mini 속성을 사용하여 FAB 버튼 크기를 작게 설정합니다.

* FAB 확장은 FloatingActionButton(FAB) 위젯을 확장하여 여러 개의 액션 버튼을 표시하는 기능입니다.

5. 추가 고려 사항

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

6. 마무리

FloatingActionButton은 Flutter에서 주요 기능이나 중요한 작업을 강조하고 사용자 경험을 향상시키는 데 유용한 위젯입니다.

다양한 스타일링, 기능, 활용 예시들을 통해 원하는 디자인과 기능을 구현할 수 있습니다.

이 블로그 포스팅이 Flutter에서 FloatingActionButton을 사용하는 데 도움이 되었기를 바랍니다.

궁금한 점이나 추가적으로 알고 싶은 내용이 있으면 언제든지 질문해주세요.