Flutter AnimatedOpacity 사용법 및 예제

Flutter는 매우 유연하고 강력한 UI 프레임워크로, 다양한 디자인 요소를 손쉽게 구현할 수 있습니다. 그 중에서도 Opacity 위젯은 UI 요소의 투명도를 조절하는 데 매우 유용한 도구입니다. 이 글에서는 Flutter AnimatedOpacity 위젯의 기본 사용법과 이를 활용한 다양한 예제를 소개합니다.

Opacity 위젯이란?

Opacity 위젯은 자식 위젯의 투명도를 조절할 수 있는 위젯입니다. 간단히 말해, 이를 사용하면 특정 위젯을 부분적으로 투명하게 하거나 완전히 숨길 수 있습니다. 투명도를 설정하는 값은 0.0에서 1.0 사이의 double 타입으로, 0.0은 완전히 투명한 상태를, 1.0은 완전히 불투명한 상태를 나타냅니다.

사용법

Opacity 위젯을 애니메이션과 결합하면 더 다채로운 효과를 만들 수 있습니다. 예를 들어, 아래와 같이 AnimatedOpacity를 구현할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

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

  void _toggleOpacity() {
    setState(() {
      _visible = !_visible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Opacity Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(seconds: 1),
                child: Container(
                  width: 200,
                  height: 200,
                  color: Colors.red,
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _toggleOpacity,
                child: Text('Toggle Opacity'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Opacity 위젯 사용 시 성능 이슈를 최소화하려면 Opacity 위젯 대신 FadeTransition 또는 AnimatedOpacity와 같은 애니메이션 위젯을 사용하는 것도 고려할 수 있습니다. 이러한 위젯은 더욱 최적화된 성능을 제공하며 애니메이션 효과도 쉽게 구현할 수 있습니다.