[flutter] 플러터에서의 Stack 위젯과 AnimatedOpacity 위젯의 조합 예시

07 Dec 2023

flutter

플러터(Flutter)는 UI를 구축하기 위한 다양한 위젯을 제공합니다. 그 중에서도 Stack과 AnimatedOpacity 위젯은 효과적인 UI 구성을 위해 자주 사용되는 위젯입니다. 이번 예시에서는 Stack 위젯과 AnimatedOpacity 위젯을 함께 사용하여 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

Stack 위젯

Stack 위젯은 다른 위젯들을 겹쳐서 표시할 수 있도록 해주는 위젯입니다. Stack 위젯은 자식 위젯들을 위치와 크기를 정확하게 지정하여 배치할 수 있습니다. 자식 위젯들은 스택의 가장 위에 있는 것부터 차례로 표시됩니다.

다음은 Stack 위젯의 간단한 사용 예시입니다.

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 150,
      height: 150,
      color: Colors.green,
    ),
  ],
),

위 코드는 크기가 200x200인 빨간색 Container 위젯과 크기가 150x150인 초록색 Container 위젯을 Stack 위젯으로 겹쳐서 표시합니다.

AnimatedOpacity 위젯

AnimatedOpacity 위젯은 투명도를 애니메이션화하여 부드러운 페이드 인/아웃 효과를 구현할 수 있도록 도와주는 위젯입니다. 애니메이션의 시작과 끝 값인 opacity를 설정하여 애니메이션 효과를 적용할 수 있습니다.

다음은 AnimatedOpacity 위젯의 간단한 사용 예시입니다.

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

위 코드는 _visible 변수에 따라 투명도가 조절되는 AnimatedOpacity 위젯을 사용하여 크기가 200x200인 파란색 Container 위젯을 표시합니다. _visible 변수가 true이면 투명도가 1로 설정되어 표시되고, false이면 투명도가 0으로 설정되어 숨깁니다.

Stack 위젯과 AnimatedOpacity 위젯의 조합 예시

이제 Stack 위젯과 AnimatedOpacity 위젯을 조합하여 애니메이션 효과를 구현해보겠습니다. 예시는 하나의 버튼을 누르면 위젯이 서서히 나타나고 사라지는 동작을 보여줍니다.

class AnimatedStackExample extends StatefulWidget {
  @override
  _AnimatedStackExampleState createState() => _AnimatedStackExampleState();
}

class _AnimatedStackExampleState extends State<AnimatedStackExample> {
  bool _visible = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text('Toggle Widget'),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
        SizedBox(height: 20),
        Stack(
          alignment: Alignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _visible ? 1.0 : 0.0,
              duration: Duration(milliseconds: 500),
              child: Container(
                width: 200,
                height: 200,
                color: Colors.yellow,
              ),
            ),
            Text(
              'Animated Widget',
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
          ],
        ),
      ],
    );
  }
}

위 코드는 AnimatedStackExample이라는 StatefulWidget을 정의합니다. _visible 변수를 사용하여 위젯의 가시성을 제어하고, RaisedButton을 누르면 _visible 변수의 값이 토글됩니다.

Stack 위젯 내에 AnimatedOpacity 위젯과 Text 위젯을 배치하여 애니메이션 효과를 구현합니다. AnimatedOpacity 위젯은 _visible 변수에 따라 투명도가 조절되고, Text 위젯은 항상 중앙에 위치합니다.

버튼을 토글하면서 위젯이 서서히 나타나고 사라지는 애니메이션 효과를 확인할 수 있습니다.

이처럼 플러터에서 Stack 위젯과 AnimatedOpacity 위젯을 조합하여 다양한 애니메이션 효과를 구현할 수 있습니다. 두 위젯을 잘 활용하여 독창적인 UI를 개발해보세요!

참고 자료: