Flutter 앱을 개발하다보면 동작할 때 필요한 기능을 나타내는 FloatingActionButton을 많이 사용하게 됩니다. FloatingActionButton에 디자인적으로 라벨을 추가하고 싶을 때가 있습니다. 이 포스트에서는 Flutter에서 FloatingActionButton에 라벨을 추가하는 방법을 알아보겠습니다.

Flutter에서 FloatingActionButton에 라벨 추가하기

Flutter에서 FloatingActionButton에 라벨을 추가하는 방법은 Stack 위에 FloatingActionButton 위젯과 Text 위젯을 함께 사용하여 구현할 수 있습니다.

Stack(
  children: <Widget>[
    FloatingActionButton(
      onPressed: () {
        // 눌렀을 때 실행되는 로직
      },
      child: Icon(Icons.add),
      backgroundColor: Colors.blue,
    ),
    Positioned(
      bottom: 0,
      child: Container(
        padding: EdgeInsets.all(8),
        color: Colors.blue,
        child: Text(
          '추가',
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ],
)

위 코드에서 Stack 위젯을 사용하여 FloatingActionButton과 Text 위젯을 겹쳐서 표시하였습니다. Positioned를 사용하여 Text 위젯의 위치를 조절하고, Container를 사용하여 배경색과 padding을 지정했습니다. 이렇게 함으로써 FloatingActionButton에 라벨을 추가할 수 있습니다.

결론

Flutter에서는 Stack을 사용하여 여러 위젯을 겹쳐서 표시할 수 있습니다. 이를 활용하여 FloatingActionButton에 라벨을 추가할 수 있습니다. 위의 예제를 참고하여 자신의 앱에 맞게 디자인하여 사용해보세요.

더 많은 정보와 예제는 Flutter 공식 문서에서 확인할 수 있습니다.