[flutter] 스택드 위젯을 사용하여 애니메이션 효과 주기

15 Dec 2023

flutter

이번 포스팅에서는 Flutter의 스택(Stack) 위젯을 사용하여 애니메이션 효과를 주는 방법에 대해 알아보겠습니다.

1. 스택(Stack) 위젯이란?

스택(Stack) 위젯은 다른 위젯을 배치하는 데 사용되는데, 위젯들을 겹쳐서 쌓을 때 유용합니다. 이 때문에 애니메이션 효과들을 만들 때 자주 활용됩니다.

2. 애니메이션 효과 주기

아래는 AnimatedOpacity 위젯을 사용하여 위젯의 투명도를 조절하여 애니메이션 효과를 줄 수 있는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stack Animation'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
            AnimatedOpacity(
              opacity: _visible ? 1.0 : 0.0,
              duration: Duration(seconds: 1),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

위 코드는 빨간색 정사각형이 파란색 정사각형 위에 겹쳐져서 표시되고, _visible 부울 변수를 수정하여 애니메이션 효과를 적용하는 예제입니다.

Flutter의 스택(Stack) 위젯을 사용하여 애니메이션 효과를 주는 방법에 대해 알아보았습니다. 여러분도 이러한 기술을 사용하여 멋진 사용자 경험을 제공할 수 있을 것입니다.

더 많은 정보는 Flutter 공식 문서에서 확인할 수 있습니다.