안드로이드 스튜디오를 활용해 용돈 벌어주는 나만의 앱 만들기 프로젝트에서 FloatingActionButton 위젯의 상세 사용법에 대해 알아보는 시간을 갖도록 하겠습니다. 플로팅엑션 버튼에 대한 다양한 속성을 하나하나 실제 활용방법을 익혀보도록 할께요.
먼저 main.dart 파일을 열어주세요.
플로팅 액션 버튼 위젯은 scaffold 위젯 하단에 플로팅엑션 버튼을 사용하여 배치할 수 있습니다.
FloatingActionButton 위젯
- child: 버튼에 표시할 위젯을 지정합니다. 일반적으로 아이콘 (Icon) 위젯을 사용하지만, 원한다면 텍스트 (Text) 위젯이나 기타 위젯을 사용할 수도 있습니다.
- child: Text(‘foo’)로 설정하면 text롤 지정할 수 있어요.
- tooltip: 플로팅 액션 버튼을 길게 눌렀을 때 보여줄 텍스트를 지정합니다.
- onPressed: 플로팅 액션 버튼을 눌렀을 때 실행할 동작을 지정합니다.
- mini: 작은 버전의 플로팅 액션 버튼을 사용할지 여부를 지정합니다. 기본값은 false 입니다.
- mini : true를 설정하면 플로팅 액션 버튼이 작게 표시되는 걸 확인할 수 있습니다.
FloatingActionButton.extended 사용하기
텍스트와 아이콘을 동시에 표시하는 버전입니다.
다음 속성을 사용합니다.
- icon: 표시할 아이콘을 지정합니다.
- label: 표시할 텍스트를 지정합니다.
- 그 외 다른 속성들은 일반 플로팅 액션 버튼과 동일합니다.
floatingActionButtonLocation 사용하기
플로팅 액션 버튼이 표시되는 위치를 변경합니다.
값을 지정하지 않으면 기본값 (FloatingActionButtonLocation.centerFloat)이 적용되어 화면 우측 가운데에 표시됩니다.
- centerFloat
- centerTop
- startFloat
- startTop
- endFloat
- endTop
