Flutter-AnimatedContainer

AnimatedContainer

AnimatedContainer는 일정 기간 동안 점차적으로 값을 변경하는 Container 애니메이션 버전입니다.

 

-이전 값과 새로운 값 사이를 자동적으로 애니메이션 합니다. (Curve와 Duration 사용)

-속성 값이 null인 것은 애니메이션 하지 않습니다.

-자식은 애니메이션 하지 않습니다.

-Color, Border, BorderRadii, BackgroundImages, Shadows, Gradients, Shape, Padding, Width, Height, Alignment, Transforms.. 등등을 애니메이션 할 수 있습니다.

 

 

위 3개의 사진처럼 floatingActionButton을 누르면 색상 크기 모서리의 동그란 정도등이 랜덤하게 애니메이션으로 바뀌는 걸 만들어보겠습니다.

 

처음으로 main.dart에서 필요없는 부분을 지우세요

그리고 MyAnimatedContainer.dart 파일을 만들고 main.dart에서 home: MyAnimatedContainer()으로 바꿔줍니다.

import 'dart:math';

import 'package:flutter/material.dart';

class MyAnimatedContainer extends StatefulWidget {
  @override
  _MyAnimatedContainerState createState() => _MyAnimatedContainerState();
}

class _MyAnimatedContainerState extends State<MyAnimatedContainer> {
  double _width=50;
  double _height=50;
  Color _color=Colors.green;
  BorderRadius _borderRadius=BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedContainer'),
      ),
      body: Center(
        child: AnimatedContainer(
          width: _width,
          height: _height,

          decoration: BoxDecoration(
              color: _color,
            borderRadius: _borderRadius,
          ),
          duration: Duration(seconds: 1),
          curve: Curves.fastOutSlowIn,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            final random=Random();
            _width=random.nextInt(300).toDouble();
            _height=random.nextInt(300).toDouble();
            _color=Color.fromRGBO(random.nextInt(256), random.nextInt(256), random.nextInt(256), 1);
            _borderRadius=BorderRadius.circular(random.nextInt(100).toDouble());
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

 

body : Center 안에다 child: AnimatedContainer를 넣고 width와 height 값을 랜덤으로 지정하여 줍니다

 

다음으로 decoration: BoxDecoration에서 색상과 모서리 둥글기도 랜덤으로 지정합니다.

 

색상은 랜덤으로 지정할때는 decoration에다 넣고 아닐시 밖에다 빼도 됩니다.

 

duration은 floatingAction버튼을 누를면 1초동안 에니메이션이 실행된다는 뜻이고

 

curve는 다양하게 있는데 fastOutSlowIn은 좀더 빠르게 변합니다. 여러개를 실행해보고 원하는것을 사용하면 될듯 합니다.