플러터 시작하기 04. FloatingActionButton 꾸미기

Scaffold의 마지막 속성, floatingActionButton입니다! 글 쓰기, 메뉴 보기 등으로 많이 사용하는 버튼이죠. 이번 포스트에서는 이 버튼을 한번 꾸며보도록 하겠습니다.

---

플러터 시작하기 02. Appbar 꾸미기

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기

---

FloatingActionButton 만들기

Scaffold(
    body: const Center(child: Text('Action Button Example')),
    floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
    ),
);

우선은 floatingActionButton을 하나 생성해 보겠습니다. FloatingActionButton은 버튼이기 때문에 버튼을 클릭했을 때 수행할 작업, onPressed가 필수로 필요하지만 지금은 그냥 빈 함수로 놔두고 진행하겠습니다. 자식으로 아이콘 하나를 입력해 주겠습니다. 저는 더하기 아이콘을 선택했어요.

색상 변경하기

FloatingActionButton(
    ...
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
)

색상을 변경하는 건 다른 위젯과 동일합니다. BackgroundColor 속성을 변경해서 배경 색을, foregroundColor 속성을 변경해서 아이콘 및 레이블 등의 색상을 변경할 수 있습니다.

그림자 효과 주기

FloatingActionButton(
    ...
    elevation: 0,
)

Elevation 속성을 활용하면 버튼이 공중에 떠있는 듯한 느낌을 줄 수 있습니다. 조금 더 쉽게 이야기하자면 그림자 효과를 얼마나 줄 것인지 정하는 속성이죠. 0으로 설정하면 아래 이미지처럼 바닥에 딱 붙어있는 듯한 느낌을 줄 수 있습니다. 기본값은 6입니다.

버튼 위치 설정하기

Scaffold(
    ...
    floatingActionButton: FloatingActionButton(
        ...
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);

Scaffold의 속성 중 floatingActionButtonLocation 속성을 활용하면 버튼의 위치를 원하는 곳으로 변경할 수 있습니다. start center end 키워드로 왼쪽, 중앙, 오른쪽 정렬이 가능하고 top float docked 키워드로 상단, 하단, 또는 내비게이션 바에 도킹된 상태로 정렬할 수 있습니다. 이 두 키워드들을 합쳐서 위치를 손쉽게 지정이 가능합니다. 위 예제 코드는 중앙 하단으로 정렬해 보았습니다.

버튼 모양 바꾸기

FloatingActionButton(
    ...
    shape: const CircleBorder(),
)

Shape 속성을 활용하면 버튼의 모양을 바꿀 수 있습니다. ShapeBorder 클래스를 가지는 위젯을 입력해 주면 되는데요, CircleBorder OvalBorder StarBorder RoundedRectangleBorder 등이 있습니다. CircleBorder을 사용해서 동그라미 버튼으로 만들어 보도록 하겠습니다.

레이블 추가하기

Scaffold(
    ...
    floatingActionButton: FloatingActionButton.extended(
        ...
        icon: const Icon(Icons.add),
        label: const Text('더하기'),
    ),
)

FloatingActionButton.extended를 활용하면 아이콘만이 아니라 레이블까지 함께 표시할 수 있습니다. 단 기존의 child 속성 대신 icon과 label 속성을 사용하기 때문에 이 부분만 수정해 주면 됩니다. 나머지 속성들은 그대로 사용이 가능합니다. 이렇게 아이콘과 레이블을 입력하면 길이에 맞춰 자동으로 버튼 크기가 조절이 됩니다. 

이번 포스트에서는 FloatingActionButton에 대해서 알아보았습니다. 이제 scaffold의 기본적인 요소들에 대한 소개가 모두 끝났으니 다른 위젯들에 대해서도 차차 알아가 보도록 하겠습니다. 

---

플러터 시작하기 05. 버튼 종류를 알아보자!