Flutter에서 Opacity 애니메이션을 쉽게 구현하는 방법

Flutter는 애니메이션과 트랜지션 기능을 매우 쉽게 구현할 수 있도록 다양한 위젯을 제공합니다. 그중에서도 AnimatedOpacity 위젯은 특정 위젯의 투명도를 부드럽게 조절하는 데 사용되며, 자연스러운 화면 전환 효과를 줄 수 있는 중요한 기능입니다. 이 블로그에서는 Flutter에서 AnimatedOpacity를 사용하여 위젯을 페이드 인(Fade-in) 및 페이드 아웃(Fade-out)시키는 방법에 대해 설명하겠습니다. 또한 이를 활용하여 앱의 UI를 더 매끄럽고 세련되게 만드는 팁들을 공유하겠습니다.

왜 Opacity 애니메이션이 중요한가?

화면 전환에서 단순히 위젯을 숨기거나 보여주는 것만으로는 사용자에게 갑작스럽고 어색한 느낌을 줄 수 있습니다. 이러한 문제를 해결하기 위해 위젯의 투명도를 조절하여 부드럽게 화면에 나타나거나 사라지는 Opacity 애니메이션을 사용하는 것이 좋습니다. 이를 통해 사용자는 자연스러운 애니메이션을 경험하게 되고, 전체적인 사용자 경험이 향상됩니다.

Opacity 애니메이션을 위한 기본 구조 만들기

먼저 페이드 인(Fade-in)과 페이드 아웃(Fade-out) 효과를 줄 위젯을 만들어야 합니다. 예를 들어, 간단한 녹색 박스를 애니메이션 대상으로 사용할 수 있습니다. 아래 코드는 녹색 박스를 나타내는 기본 구조입니다:

Container(
  width: 200,
  height: 200,
  color: Colors.green,
)

StatefulWidget 정의하기

이제 박스를 애니메이션으로 제어하기 위해 StatefulWidget을 사용해야 합니다. StatefulWidget은 UI 상태를 변경하고, 그에 따라 화면을 다시 그리도록 할 수 있기 때문에 애니메이션 처리에 적합합니다. 애니메이션을 제어할 수 있는 변수인 _visible 변수를 선언하고, 해당 변수를 통해 박스가 보일지 여부를 결정합니다.

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // UI 구성
    );
  }
}

버튼으로 투명도 전환하기

이제 버튼을 통해 녹색 박스의 보임/안 보임 상태를 전환하는 기능을 추가합니다. 버튼을 누를 때마다 _visible 변수를 토글하여 박스의 상태를 변경하고, setState()를 사용해 UI를 다시 그리도록 합니다.

FloatingActionButton(
  onPressed: () {
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: const Icon(Icons.flip),
)

AnimatedOpacity로 페이드 효과 적용하기

이제 AnimatedOpacity 위젯을 사용해 박스가 부드럽게 나타나거나 사라지는 효과를 추가합니다. AnimatedOpacity는 세 가지 주요 속성을 가집니다:

• opacity: 0.0에서 1.0 사이의 값으로, 투명도를 나타냅니다. 0.0은 완전 투명, 1.0은 완전 불투명입니다.
• duration: 애니메이션이 진행되는 시간을 설정합니다.
• child: 애니메이션 효과를 적용할 대상 위젯입니다.

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: const Duration(milliseconds: 500),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.green,
  ),
)

이 코드를 통해 박스가 부드럽게 나타났다 사라지는 효과를 볼 수 있습니다.

응용 및 추가 팁

• 애니메이션의 부드러움: 애니메이션의 지속 시간(duration)을 조정하여 더 부드러운 전환 효과를 만들 수 있습니다.
• 여러 위젯에 적용: 단순한 박스뿐만 아니라, 다양한 UI 요소에도 동일한 방식으로 AnimatedOpacity를 적용할 수 있습니다.
• 사용자 경험 강화: 버튼, 이미지, 텍스트 등 여러 요소에 자연스러운 페이드 인/아웃 애니메이션을 추가하여 사용자 경험을 향상시킬 수 있습니다.

---

결론

Flutter의 AnimatedOpacity는 간단하지만 강력한 애니메이션 도구입니다. UI를 보다 매끄럽고 사용자 친화적으로 만들기 위해 꼭 필요한 기능으로, 특히 위젯을 부드럽게 보여주거나 숨기는 상황에서 매우 유용합니다. 작은 변화로도 사용자 경험을 크게 향상시킬 수 있으니, 적절한 곳에 적용해 보세요.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Opacity Demo';
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take data and create a State class.
// In this case, the widget takes a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data you can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          // If the widget is visible, animate to 0.0 (invisible).
          // If the widget is hidden, animate to 1.0 (fully visible).
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          // The green box must be a child of the AnimatedOpacity widget.
          child: Container(
            width: 200,
            height: 200,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Call setState. This tells Flutter to rebuild the
          // UI with the changes.
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: const Icon(Icons.flip),
      ),
    );
  }
}