플러터(Flutter) AnimatedContainer를 이용한 콘테이너 애니메이션

1. AnimatedContainer란?

기본 Container와 기본적으로 같다. 다른점이란, 컨테이너 속성(크기, 색상, 테두리반지름)을 변경할 경우 보기좋게 애니메이션 효과와 함께 변경된다는 점이다. 백문이 불여일견. AnimatedContainer와 Container의 차이점을 보자.

AnimatedContainer	Container

AnimatedContainer의 속성을 살펴보면

AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            // 여기까지는 Container와 같다
            duration: const Duration(seconds: 1), 
            //AnimatedContainer의 필수 속성으로 애니메이션의 시간길이설정
            curve: Curves.fastOutSlowIn,
            // 애니메이션의 커브 설정(효과)
          ),

 

반응형

 

다음은 플러터 공식 문서의 cookbook의 AnimatedContainer Demo Source 이다.

import 'dart:math';
import 'package:flutter/material.dart';

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

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({Key? key}) : super(key: key);

  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // AnimatedContainer의 기본 속성을 설정할 변수를 할당.
  // FloatingActionButton을 탭하면 다음 값을 랜덤하게 변경하여 AnimatedContainer 를 변경
  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: const Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child: AnimatedContainer(
            // State 클래스에서 선언한 변수로 속성 설정
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            // 애니메이션 시간 설정
            duration: const Duration(seconds: 1),
            // 애니메이션이 부드럽게 변화는 효과 옵션설정
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // 버튼을 탭하면
          onPressed: () {
            // setState 메서드를 통해 위젯을 다시 로드
            setState(() {
              // 랜덤 객체 생성
              final random = Random();

              // 300이내의 랜덤 정수 생성 후 double 타입으로 변경, 할당
              _width = random.nextInt(300).toDouble();
              _height = random.nextInt(300).toDouble();

              // RGB 색상을 랜덤하게 생성
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );

              // 모서리 곡률을 랜덤하게 설정
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}

 

이 게시물은 플러터 공식 문서의 Animate the properties of a container 를 참조해 작성되었습니다.

Animate the properties of a container