Flutter[플러터] / FloatingActionButton 을 사용하여 떠있는 하단 버튼 만들기 (더하기 버튼, 추가 버튼, FAB) FloatingActionButton(Flutter Widget of the Week)

FloatingActionButton class

Material Design 플로팅 액션 버튼.

플로팅 액션 버튼은 콘텐츠 위에 마우스를 올려 애플리케이션의 주요 동작을 표시하는 원형 아이콘 버튼입니다. 플로팅 액션 버튼은 Scaffold.floatingActionButton 필드에서 가장 일반적으로 사용됩니다.

https://youtu.be/2uaoEDOgk_I

공식 문서 코드

 

 

 

 

---

FloatingActionButton, FAB 는 정말 플러터 개발에 있어서 빠질 수 없는 요소 중 하나이다.

위의 예제를 보면 굉장히 심플한 것 같아 보이는데 실제로도 굉장히 간단하다.

공식 문서에는 다루지 않고 공식 영상에서만 나오는 내비게이션 안에 배치하는 것도 한번 알아보자.

 

일단 아주 기본적인 요소만 넣으면 이런 상태가 된다.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    shape: CircleBorder(),
    child: Icon(Icons.add),
  ),
);

 

 

이제 여기에다가 본인이 넣고 싶은 기능과 디자인을 넣으면 되겠다.

하위속성은 밑에 정리해 놨으니 참고하면 좋을 것 같다.

 

자 그렇다면 영상에서 나오는 바텀내비게이션에 배치하는 방법은 뭐냐?

그냥 코드 한 줄 더 추가하면 된다.

 

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // 이거 추가
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    shape: CircleBorder(),
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomAppBar(),
);

 

 

믿기 힘들 정도로 간단하게 된다.

근데 사실 이게 함정인점이다. 굉장히 간단하게 거의 대부분이 준비되어 있어서 하위 속성으로 넣을 수 있는 게 겁나 많다.

그래서 사용할 때 꼭 숙지해 두면 좋을 것이다.

 

하지만 보통 나는 이것을 사용할 때 커스텀으로 만들어서 사용한다.

왜냐하면 내가 생각하기엔 이것을 사용할 때에 초점을 맞춰야 할 것은 FloatingActionButton() 이 아닌 이 위젯을 띄워주는 floatingActionButton: 이라고 생각하기 때문이다.

왜 그런지 한번 알아보자.

 

일단 기본적으로 floatingActionButton: 은 타입을 Widget? 으로 받고 있는데 이는 즉, 플러터에 존재하는 위젯은 일단 다 넣을 수 있다는 뜻이 되겠다.

그니까 굳이 여기에 FloatingActionButton() 을 넣을 필요는 없다는 거다. 물론 이거 자체는 하단에 위치가 좀 고정되어 있어서 거의 커스텀을 해도 FAB 의 숙명을 벗어날 수 없긴 하다만 나는 이걸 커스텀해서 '직접 만들어 사용해라'라고 하고 싶다.

floatingActionButton: Container(
  // TODO Anything
  height: 75,
  width: 75,
  color: Colors.black,
  child: Icon(Icons.add, color: Colors.white,),
)

 

보면 알겠지만 Container 배치가 가능하다. 이미 이것만으로 설명이 끝난 것 같긴 하다만 이렇게 해서 사용하면 훨씬 사용 범위가 높아진다고 생각한다.

하위 속성

속성명	타입	기본값	설명
child	Widget?	-	버튼 안에 표시할 위젯 (주로 아이콘 사용)
tooltip	String?	-	버튼을 길게 누르면 표시되는 설명 텍스트
foregroundColor	Color?	-	버튼 내부 아이콘이나 텍스트 색상
backgroundColor	Color?	-	버튼의 배경색
focusColor	Color?	-	포커스 상태일 때 버튼의 색상
hoverColor	Color?	-	마우스 오버 상태일 때 버튼의 색상
splashColor	Color?	-	버튼 클릭 시 물결 효과 색상
heroTag	Object?	_DefaultHeroTag()	Hero 애니메이션을 위한 태그
elevation	double?	-	기본 그림자 높이
focusElevation	double?	-	포커스 상태일 때 그림자 높이
hoverElevation	double?	-	마우스 오버 상태일 때 그림자 높이
highlightElevation	double?	-	클릭 중일 때 그림자 높이
disabledElevation	double?	-	비활성 상태일 때 그림자 높이
onPressed	VoidCallback?	-	버튼 클릭 시 호출되는 콜백 함수
mouseCursor	MouseCursor?	SystemMouseCursors.click	버튼 위에 올렸을 때 커서 모양
mini	bool	false	버튼을 작은 크기로 표시할지 여부
shape	ShapeBorder?	-	버튼의 모양 (예: 원형, 타원형)
clipBehavior	Clip	Clip.none	자식 위젯 잘림 처리 방식
isExtended	bool	false	확장형 버튼 여부 (텍스트 포함 여부)
focusNode	FocusNode?	-	포커스를 제어하는 노드
autofocus	bool	false	초기에 자동 포커스 여부
materialTapTargetSize	MaterialTapTargetSize?	ThemeData.materialTapTargetSize	터치 영역 크기 설정
enableFeedback	bool?	true	터치 시 진동 또는 소리 피드백 여부
extendedIconLabelSpacing	double?	8.0	확장형 버튼에서 아이콘과 텍스트 사이 간격
extendedPadding	EdgeInsetsGeometry?	-	확장형 버튼의 내부 패딩
extendedTextStyle	TextStyle?	-	확장형 버튼 텍스트 스타일

 

그래도 별 기능 추가 안 할 거면 FAB 그대로 사용해도 아무런 문제없다. 아니 오히려 그게 나을지 모른다.

그래도 이런 하위 속성 수는 살짝 벽이 느껴지긴 한다;

 

이렇게 FAB(FloatingActionButton) 에 대해서 알아보았다. 도움이 되었길 바라며 마치겠다.

반응형