위젯을 서서히 나타내고 사라지게 하는 방법

flutter 공식 문서: Fade a widget in and out 번역

화면 상의 요소를 보여주거나 숨기는 것은 UI 개발자들이 자주 필요로 하는 기능입니다. 그러나 요소를 갑자기 화면에 표시하거나 숨기는 것은 사용자에게 불편함을 줄 수 있습니다. 대신, 요소를 서서히 나타내거나 사라지게 하여 부드러운 경험을 제공하는 것이 좋습니다.

AnimatedOpacity 위젯을 사용하면 투명도 애니메이션을 쉽게 수행할 수 있습니다. 이 레시피는 다음 단계를 사용합니다:

1. 서서히 나타나고 사라질 박스 생성
2. StatefulWidget 정의
3. 가시성을 전환하는 버튼 표시
4. 박스를 서서히 나타나고 사라지게 함

1. 서서히 나타나고 사라질 박스 생성

먼저, 서서히 나타나고 사라질 무언가를 생성합니다. 이 예제에서는 화면에 녹색 박스를 그립니다.

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

2. StatefulWidget 정의

녹색 박스를 애니메이션할 준비가 되었다면, 박스가 보여야 할지 여부를 알아야 합니다. 이를 위해 StatefulWidget을 사용합니다.

StatefulWidget은 State 객체를 생성하는 클래스입니다. State 객체는 앱에 대한 일부 데이터를 보유하고 이 데이터를 업데이트할 수 있는 방법을 제공합니다. 데이터를 업데이트할 때 Flutter에 UI를 변경된 데이터로 다시 빌드하도록 요청할 수 있습니다.

이 경우, 데이터는 버튼이 보여야 하는지 여부를 나타내는 불리언입니다.

StatefulWidget을 구성하려면, StatefulWidget과 해당 State 클래스 두 가지를 생성합니다. 팁: Android Studio와 VSCode의 Flutter 플러그인은 이 코드를 빠르게 생성하는 stful 스니펫을 포함하고 있습니다.

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) {
    // 여기에 녹색 박스와 다른 위젯들이 위치합니다.
  }
}

3. 가시성을 전환하는 버튼 표시

녹색 박스가 보여야 하는지 여부를 결정하는 데이터가 있으니, 이제 그 데이터를 업데이트할 방법이 필요합니다. 예를 들어, 박스가 보이면 숨기고, 박스가 숨겨져 있으면 보이게 합니다.

이를 위해 버튼을 표시합니다. 사용자가 버튼을 누르면, 불리언을 true에서 false로, 또는 false에서 true로 전환합니다. setState() 메서드를 사용하여 이 변경을 수행합니다. 이 메서드는 State 클래스의 메서드로, Flutter에게 위젯을 다시 빌드하도록 지시합니다.

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

4. 박스를 서서히 나타나고 사라지게 함

화면에 녹색 박스가 있고, 가시성을 true 또는 false로 전환할 수 있는 버튼이 있습니다.

어떻게 박스를 서서히 나타나고 사라지게 할까요? AnimatedOpacity 위젯을 사용하면 됩니다.

AnimatedOpacity 위젯은 세 가지 인자를 필요로 합니다:

• opacity: 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,
  ),
)

이 방법을 통해 Flutter에서 요소를 서서히 나타내고 사라지게 하는 애니메이션을 구현할 수 있습니다.

5. 코드 예시

```dart
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 = '투명도 데모';
    return const MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// StatefulWidget의 역할은 데이터를 받아 State 클래스를 생성하는 것입니다.
// 이 경우, 위젯은 제목을 받아 _MyHomePageState를 생성합니다.
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });

  final String title;

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

// State 클래스는 두 가지 역할을 담당합니다: 업데이트할 수 있는 데이터를 보유하고
// 그 데이터를 사용해 UI를 구축하는 것입니다.
class _MyHomePageState extends State<MyHomePage> {
  // 녹색 상자가 보이는지 여부
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          // 위젯이 보이면 0.0(투명)으로 애니메이션하고,
          // 숨겨져 있으면 1.0(완전히 보임)으로 애니메이션합니다.
          opacity: _visible ? 1.0 : 0.0,
          duration: const Duration(milliseconds: 500),
          // 녹색 상자는 AnimatedOpacity 위젯의 자식이어야 합니다.
          child: Container(
            width: 200,
            height: 200,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // setState를 호출합니다. 이는 Flutter에 변경 사항으로
          // UI를 다시 빌드하라고 지시합니다.
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: '투명도 전환',
        child: const Icon(Icons.flip),
      ),
    );
  }
}