[flutter] FloatingActionButton에 아이콘 추가하기
  1. 소개
  2. Flutter 앱에 FloatingActionButton 추가하기
  3. 아이콘 추가하기
  4. 결론

소개

Flutter는 Google에서 제공하는 모바일 앱 개발 프레임워크로, 다양한 위젯과 기능을 제공합니다. FloatingActionButton(부동 작업 단추)은 화면의 특정 작업을 수행하기 쉽게 하는 버튼입니다. 이번 블로그에서는 Flutter 앱에 FloatingActionButton을 추가하고 아이콘을 추가하는 방법에 대해 알아보겠습니다.

Flutter 앱에 FloatingActionButton 추가하기

먼저, Scaffold 위젯 내부에 FloatingActionButton을 추가해야 합니다. Scaffold는 기본적인 레이아웃 구조를 구성하는데 사용되며, 앱 바닥에 버튼이나 메뉴 등을 추가할 수 있습니다.

다음은 Scaffold 위젯 내에 FloatingActionButton을 추가하는 예제 코드입니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    // 버튼을 눌렀을 때 수행할 작업
  },
  child: Icon(Icons.add),
),

아이콘 추가하기

FloatingActionButton에 아이콘을 추가하려면 child 속성을 이용하여 Icon 위젯을 추가하면 됩니다. Icons.add는 내장된 아이콘 중 하나로, 필요에 따라 변경할 수 있습니다.

이 예제에서는 Icons.add를 사용하여 추가 아이콘을 설정했습니다. 이 코드를 수정하여 다른 아이콘을 사용할 수 있습니다. 예를 들어, Icons.edit는 수정 아이콘, Icons.delete는 삭제 아이콘 등의 다양한 아이콘을 사용할 수 있습니다.

결론

Flutter를 사용하여 FloatingActionButton을 추가하고 아이콘을 설정하는 방법에 대해 알아보았습니다. 이러한 작업은 앱을 보다 직관적이고 사용하기 편하게 만들어줍니다. 앱의 사용자 경험을 향상시킬 수 있는 다양한 위젯과 기능을 활용하여 멋진 Flutter 앱을 개발해보세요.


참고 문서: Flutter 공식 문서