[flutter] RaisedButton의 애니메이션 효과 추가

07 Dec 2023

flutter

Flutter에서는 RaisedButtorn을 사용하여 버튼을 만들 수 있습니다. 이번에는 RaisedButton에 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

1. 애니메이션 패키지 추가하기

RaisedButton의 애니메이션 효과를 추가하기 위해서는 flutter_animation_progressions 패키지를 사용해야 합니다. 먼저 pubspec.yaml 파일에 패키지를 추가합니다.

dependencies:
  flutter_animation_progressions: ^0.1.3

이후 패키지를 가져옵니다.

import 'package:flutter_animation_progressions/flutter_animation_progressions.dart';

2. RaisedButton 애니메이션 적용하기

RaisedButton에 애니메이션을 적용하려면 AnimatedRaisedButton 위젯을 사용해야 합니다. 아래는 예시입니다.

class AnimatedButton extends StatefulWidget {
  @override
  _AnimatedButtonState createState() => _AnimatedButtonState();
}

class _AnimatedButtonState extends State<AnimatedButton>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedRaisedButton(
      animationProgression: AnimationProgression.ACCELERATE_DECCELERATE,
      onPressed: () {
        if (_animationController.isCompleted) {
          _animationController.reverse();
        } else {
          _animationController.forward();
        }
      },
      child: Text('Animated Button'),
      animationController: _animationController,
      size: Size(200, 50),
    );
  }
}

위의 예시 코드에서는 AnimatedRaisedButton 위젯을 사용하여 RaisedButton에 애니메이션 효과를 적용했습니다. AnimatedRaisedButton 위젯의 속성인 animationProgression을 설정하여 애니메이션의 진행 방식을 설정할 수 있습니다. onPressed 콜백 함수에서는 애니메이션을 제어할 수 있도록 설정하였습니다.

3. 애니메이션 확인하기

위에서 작성한 AnimatedButton 위젯을 화면에 추가하여 애니메이션을 확인할 수 있습니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Animation Demo'),
        ),
        body: Center(
          child: AnimatedButton(),
        ),
      ),
    );
  }
}

AnimatedButton 위젯을 Center 위젯으로 감싸서 가운데 정렬하여 화면에 표시하였습니다.

이제 애니메이션 효과가 추가된 RaisedButton을 확인할 수 있습니다.

결론

지금까지 Flutter에서 RaisedButton에 애니메이션 효과를 추가하는 방법에 대해 알아보았습니다. flutter_animation_progressions 패키지를 사용하여 간단하게 애니메이션을 적용할 수 있습니다. 이를 응용하여 다양한 애니메이션 효과를 추가할 수 있습니다.

참고 문서

flutter_animation_progressions 패키지