[flutter] FloatingActionButton의 애니메이션 효과 설정하기

11 Dec 2023

flutter

Flutter에서 FloatingActionButton은 화면 상단에 부유하여 나타나는 버튼을 만들 때 사용되며, 사용자에게 주요한 작업을 수행할 수 있는 기능을 제공합니다. 이번에는 FloatingActionButton이 나타날 때 애니메이션 효과를 설정하는 방법에 대해 알아보겠습니다.

기본 FloatingActionButton 만들기

먼저, 기본적인 FloatingActionButton을 만들어보겠습니다. 아래 예제는 Scaffold 위에 단순한 FloatingActionButton을 추가하는 예제 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FloatingActionButton 애니메이션')),
        body: Center(child: Text('애니메이션 효과를 설정해보세요!')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 버튼 클릭 시 동작 추가
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

애니메이션 효과 설정하기

FloatingActionButton에 애니메이션 효과를 적용하려면 floatingActionButton의 floatingActionButtonAnimator 속성을 사용합니다. Animator 클래스는 애니메이션의 속도 및 동작을 정의하며, 다양한 효과를 설정할 수 있습니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    // 버튼 클릭 시 동작 추가
  },
  child: Icon(Icons.add),
  **floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling**, // 애니메이션 효과 설정
),

위의 floatingActionButtonAnimator에 설정할 수 있는 여러 가지 효과 중 하나인 scaling을 사용하면 FloatingActionButton이 나타날 때 축소 및 확대 애니메이션이 적용됩니다.

결론

이처럼, FloatingActionButton의 애니메이션 효과를 설정하는 것은 사용자 경험을 개선하고 동작에 대한 시각적 피드백을 제공하는 데 도움이 됩니다.

자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.