Flutter 강좌 - Animate the properties of a container | AnimatedContainer 사용법

 

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

이번 강좌에서는 AnimatedContainer를 이용하여 애니메이션 효과를 주는 방법에 대해서 알아본다.

일반적으로 컨테이너는 위젯을 담을 수 있는 그릇이라고 할 수 있다. AnimatedContainer의 경우 컨테이너의 높이, 너비, 배경색, 테투리 등의 속성값을 조정하여 애니메이션 효과를 줄 수 있다.

우선 동작 화면부터 살펴보자. 화면 하단에 floatingActionButton을 클릭할 때마다 화면 중앙에 도형의 너비, 높이, 색상, 외각선 모양이 랜덤하게 변경되는 것을 확인할 수 있다.

 

소스코드는 다음과 같다.

import 'package:flutter/material.dart';
import 'dart:math'; // Random 함수 사용을 위해 라이브러리 추가

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

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {

  // 속성값의 초기값 설정
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedContainer Demo'),
        ),
        body: Center(
          // AnimatedContainer 등록
          child: AnimatedContainer(
            // 너비와 높이 설정
            width: _width,
            height: _height,
            // 컨테이너의 색상과 테두리 모양 설정
            decoration:
                BoxDecoration(color: _color, borderRadius: _borderRadius),
            // 애니메이션 효과 소요 시간
            duration: Duration(seconds: 1),
            // 애니메이션 효과 커브
            curve: Curves.fastOutSlowIn,
          ),
        ),

        // floatingActionButton 추가
        floatingActionButton: FloatingActionButton(
          // 아이콘 추가
          child: Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              final random = Random();

              _width = random.nextInt(300).toDouble();
              _height = random.nextInt(300).toDouble();
              _color = Color.fromARGB(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
        ),
      ),
    );
  }
}

 

AnimatedContainer와 같이 상태값(설정값)이 변경되면 실시간으로 컨테이너의 너비, 높이, 색상, 테투리모양 등이 변경되도록 하기 위해서는 StatefulWidget 위젯을 이용해야 한다.

메인 함수에서는 StatefulWidget을 상속하는 AnimatedContainerApp 클래스를 생성/호출하고 있으며, AnimatedContainerApp에서는 State를 상속하는 _AnimatedContainerAppState 생성/호출하고 있다.

_AnimatedContainerAppState 클래스에는 AnimatedContainer의 상태값에 해당하는 필드들이 존재하며, floatingActionButton이 눌릴때마다 setState 함수가 호출되면서 AnimcatedContainer의 상태값이 랜덤하게 변경되게 되고, 변경된 상태값으로 변하는 모습이 애니메이션 효과로 발생하게 된다.

 

본 강좌는 Flutter 공식 사이트의 문서를 참조하여 작성되었습니다.

https://flutter.dev/docs/cookbook/animation/animated-container

Animate the properties of a container

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱