[flutter] AnimatedOpacity를 이용한 페이드 인/아웃 애니메이션 구현하기

08 Dec 2023

flutter

Flutter는 애니메이션을 쉽게 다룰 수 있는 강력한 기능을 제공합니다. AnimatedOpacity 위젯을 사용하면 간단하게 페이드 인/아웃 효과를 적용할 수 있습니다. 이번 포스트에서는 AnimatedOpacity를 사용하여 간단한 페이드 인/아웃 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

AnimatedOpacity란?

AnimatedOpacity는 자식 위젯의 투명도를 애니메이션으로 제어하는 데 사용됩니다. 이를 통해 화면 전환 시 부드러운 페이드 인/아웃 효과를 적용할 수 있습니다.

구현 방법

아래는 AnimatedOpacity를 사용하여 페이드 인/아웃 애니메이션을 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('페이드 인/아웃 애니메이션'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedOpacity(
                duration: Duration(seconds: 1),
                opacity: _visible ? 1.0 : 0.0,
                child: FlutterLogo(size: 200),
              ),
              SizedBox(height: 20),
              RaisedButton(
                onPressed: () {
                  setState(() {
                    _visible = !_visible;
                  });
                },
                child: Text(
                  _visible ? '사라지기' : '나타나기',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서는 AnimatedOpacity로 감싼 FlutterLogo 위젯을 선언하고, 버튼을 누를 때마다 _visible 값을 토글하여 페이드 인/아웃 효과를 적용하고 있습니다.

마무리

이렇게 간단히 AnimatedOpacity를 사용하여 페이드 인/아웃 애니메이션을 구현할 수 있습니다. 이러한 애니메이션을 적절히 활용하여 Flutter 애플리케이션을 더 생동감 있게 만들어보세요.

참고 자료: Flutter 공식 문서 - AnimatedOpacity