[flutter] FloatingActionButton의 디자인 패턴 및 가이드라인

11 Dec 2023

flutter

소개

Flutter에서는 FloatingActionButton 위젯을 사용하여 앱 화면에서 중요한 작업을 실행할 수 있는 기능을 제공하고 있습니다. 디자인 패턴과 가이드라인을 따르면 사용자가 앱에서 기능을 사용하는 데 어려움을 겪지 않을 것입니다.

디자인 패턴

위치

FloatingActionButton은 화면의 주요 작업을 나타내는 데 사용되므로 화면의 중앙이나 가운데에 배치하는 것이 일반적입니다.

FloatingActionButton(
  onPressed: () {
    // Add your onPressed action here
  },
  child: Icon(Icons.add),
)

색상

FloatingActionButton의 색상은 앱의 주요 색상과 일치시키는 것이 좋습니다.

FloatingActionButton(
  backgroundColor: Theme.of(context).primaryColor,
  onPressed: () {
    // Add your onPressed action here
  },
  child: Icon(Icons.add),
)

가이드라인

크기

일반적으로 FloatingActionButton의 지름은 56dp로 설정하는 것이 권장됩니다.

FloatingActionButton(
  onPressed: () {
    // Add your onPressed action here
  },
  child: Icon(Icons.add),
  heroTag: null,
  mini: false,
  materialTapTargetSize: MaterialTapTargetSize.padded,
)

그림자

FloatingActionButton 주변에는 일반적으로 약간의 그림자가 있으며, 이를 통해 이 콘텐츠가 떠 있는 것처럼 보이게 됩니다.

FloatingActionButton(
  onPressed: () {
    // Add your onPressed action here
  },
  child: Icon(Icons.add),
  elevation: 4.0,
)

결론

FloatingActionButton은 앱에서 중요한 작업을 쉽게 수행할 수 있도록 도와주는 매우 유용한 위젯입니다. 디자인 패턴과 가이드라인을 따르면 사용자 경험이 향상될 것입니다.

참고 문헌:

Official Flutter Documentation

이 문서는 FloatingActionButton 위젯의 디자인 가이드라인과 가장 일반적인 사용 사례를 다루고 있습니다.